Merge branch 'master' into languy-upgrade-markdown-notebooks

.eslintignore

@@ -97,7 +97,6 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -126,29 +125,20 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
 src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
-src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -308,8 +298,6 @@ src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.t
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es6: true,
   },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
   extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
   globals: {
     Atomics: "readonly",
@@ -20,7 +20,7 @@ module.exports = {
   overrides: [
     {
       files: ["**/*.tsx"],
-      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
+      extends: ["plugin:react/recommended"],
       plugins: ["react"],
     },
     {
@@ -42,6 +42,8 @@ module.exports = {
     "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
     eqeqeq: "error",
     "react/display-name": "off",
+    "react-hooks/rules-of-hooks": "warn", // TODO: error
+    "react-hooks/exhaustive-deps": "warn", // TODO: error
     "no-restricted-syntax": [
       "error",
       {

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1 @@
+[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)

.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

@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -170,7 +170,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",
@@ -200,8 +200,8 @@
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
-    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
-    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
+    "strict:find": "node ./strict-null-checks/find.js",
+    "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
     "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },

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,70 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const port = process.env.PORT || 3000;
+const fetch = require("node-fetch");
+
+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.get("/pull/:pr(\\d+)", (req, res) => {
+  const pr = req.params.pr;
+  const [, query] = req.originalUrl.split("?");
+  const search = new URLSearchParams(query);
+
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
+    .then((response) => response.json())
+    .then(({ head: { ref, sha } }) => {
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
+      prUrl.hash = ref;
+      search.set("feature.pr", prUrl.href);
+
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
+      explorer.search = search.toString();
+
+      const portal = new URL("https://ms.portal.azure.com/");
+      portal.searchParams.set("dataExplorerSource", explorer.href);
+      portal.hash =
+        "@microsoft.onmicrosoft.com/resource/subscriptions/b9c77f10-b438-4c32-9819-eef8a654e478/resourceGroups/stfaul/providers/Microsoft.DocumentDb/databaseAccounts/stfaul-sql/dataExplorer";
+
+      return res.redirect(portal.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port: ${port}`);
+});

preview/package.json

@@ -0,0 +1,18 @@
+{
+  "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",
+    "node-fetch": "^2.6.1"
+  }
+}

src/Common/CosmosClient.ts

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

src/Common/Logger.ts

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

src/Common/MessageHandler.ts

@@ -48,32 +48,18 @@ export function sendCachedDataMessage<TResponseDataModel>(
 }
 
 export function sendMessage(data: any): void {
-  if (canSendMessage()) {
-    // We try to find data explorer window first, then fallback to current window
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    portalChildWindow.parent.postMessage(
-      {
+  _sendMessage({
     signature: "pcIframe",
     data: data,
-      },
-      portalChildWindow.document.referrer
-    );
-  }
+  });
 }
 
 export function sendReadyMessage(): void {
-  if (canSendMessage()) {
-    // We try to find data explorer window first, then fallback to current window
-    const portalChildWindow = getDataExplorerWindow(window) || window;
-    portalChildWindow.parent.postMessage(
-      {
+  _sendMessage({
     signature: "pcIframe",
     kind: "ready",
     data: "ready",
-      },
-      portalChildWindow.document.referrer
-    );
-  }
+  });
 }
 
 export function canSendMessage(): boolean {
@@ -89,3 +75,17 @@ export function runGarbageCollector() {
     }
   });
 }
+
+const _sendMessage = (message: any): void => {
+  if (canSendMessage()) {
+    // Portal window can receive messages from only child windows
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    if (portalChildWindow === window) {
+      // Current window is a child of portal, send message to portal window
+      portalChildWindow.parent.postMessage(message, portalChildWindow.document.referrer || "*");
+    } else {
+      // Current window is not a child of portal, send message to the child window instead (which is data explorer)
+      portalChildWindow.postMessage(message, portalChildWindow.location.origin || "*");
+    }
+  }
+};

src/Common/Tooltip/index.tsx

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

src/Common/Upload/index.tsx

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

src/Common/__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/Common/dataAccess/readCollections.ts

@@ -1,15 +1,15 @@
-import * as DataModels from "../../Contracts/DataModels";
 import { AuthType } from "../../AuthType";
+import * as DataModels from "../../Contracts/DataModels";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { client } from "../CosmosClient";
-import { handleError } from "../ErrorHandlingUtils";
-import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { userContext } from "../../UserContext";
 import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import { listGremlinGraphs } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { listMongoDBCollections } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
   const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
@@ -17,7 +17,6 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
       return await readCollectionsWithARM(databaseId);

src/Common/dataAccess/updateCollection.ts

@@ -1,39 +1,37 @@
+import { ContainerDefinition } from "@azure/cosmos";
+import { RequestOptions } from "@azure/cosmos/dist-esm";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
-import { ContainerDefinition } from "@azure/cosmos";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import {
-  CreateUpdateOptions,
-  ExtendedResourceProperties,
-  MongoDBCollectionCreateUpdateParameters,
-  MongoDBCollectionResource,
-  SqlContainerCreateUpdateParameters,
-  SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { client } from "../CosmosClient";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+import { userContext } from "../../UserContext";
 import {
   createUpdateCassandraTable,
   getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-import {
-  createUpdateMongoDBCollection,
-  getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
   createUpdateGremlinGraph,
   getGremlinGraph,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import {
+  createUpdateMongoDBCollection,
+  getMongoDBCollection,
+} from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
+import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
-import { handleError } from "../ErrorHandlingUtils";
+import {
+  ExtendedResourceProperties,
+  MongoDBCollectionCreateUpdateParameters,
+  SqlContainerCreateUpdateParameters,
+  SqlContainerResource,
+} from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { userContext } from "../../UserContext";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
 
 export async function updateCollection(
   databaseId: string,
   collectionId: string,
-  newCollection: Collection,
+  newCollection: Partial<Collection>,
   options: RequestOptions = {}
 ): Promise<Collection> {
   let collection: Collection;
@@ -43,7 +41,6 @@ export async function updateCollection(
     if (
       userContext.authType === AuthType.AAD &&
       !userContext.useSDKOperations &&
-      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
       userContext.defaultExperience !== DefaultAccountExperienceType.Table
     ) {
       collection = await updateCollectionWithARM(databaseId, collectionId, newCollection);
@@ -69,7 +66,7 @@ export async function updateCollection(
 async function updateCollectionWithARM(
   databaseId: string,
   collectionId: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const subscriptionId = userContext.subscriptionId;
   const resourceGroup = userContext.resourceGroup;
@@ -85,6 +82,15 @@ async function updateCollectionWithARM(
       return updateGremlinGraph(databaseId, collectionId, subscriptionId, resourceGroup, accountName, newCollection);
     case DefaultAccountExperienceType.Table:
       return updateTable(collectionId, subscriptionId, resourceGroup, accountName, newCollection);
+    case DefaultAccountExperienceType.MongoDB:
+      return updateMongoDBCollection(
+        databaseId,
+        collectionId,
+        subscriptionId,
+        resourceGroup,
+        accountName,
+        newCollection
+      );
     default:
       throw new Error(`Unsupported default experience type: ${defaultExperience}`);
   }
@@ -96,7 +102,7 @@ async function updateSqlContainer(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -115,35 +121,26 @@ async function updateSqlContainer(
   throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
 }
 
-export async function updateMongoDBCollectionThroughRP(
+export async function updateMongoDBCollection(
   databaseId: string,
   collectionId: string,
-  newCollection: MongoDBCollectionResource,
-  updateOptions?: CreateUpdateOptions
-): Promise<MongoDBCollectionResource> {
-  const subscriptionId = userContext.subscriptionId;
-  const resourceGroup = userContext.resourceGroup;
-  const accountName = userContext.databaseAccount.name;
-
+  subscriptionId: string,
+  resourceGroup: string,
+  accountName: string,
+  newCollection: Partial<Collection>
+): Promise<Collection> {
   const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
-    const updateParams: MongoDBCollectionCreateUpdateParameters = {
-      properties: {
-        resource: newCollection,
-        options: updateOptions,
-      },
-    };
-
+    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
     const updateResponse = await createUpdateMongoDBCollection(
       subscriptionId,
       resourceGroup,
       accountName,
       databaseId,
       collectionId,
-      updateParams
+      getResponse as MongoDBCollectionCreateUpdateParameters
     );
-
-    return updateResponse && (updateResponse.properties.resource as MongoDBCollectionResource);
+    return updateResponse && (updateResponse.properties.resource as Collection);
   }
 
   throw new Error(
@@ -157,7 +154,7 @@ async function updateCassandraTable(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -184,7 +181,7 @@ async function updateGremlinGraph(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -208,7 +205,7 @@ async function updateTable(
   subscriptionId: string,
   resourceGroup: string,
   accountName: string,
-  newCollection: Collection
+  newCollection: Partial<Collection>
 ): Promise<Collection> {
   const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
   if (getResponse && getResponse.properties && getResponse.properties.resource) {

src/Contracts/ViewModels.ts

@@ -88,7 +88,6 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
-  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;

src/Explorer/ComponentRegisterer.test.ts

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

src/Explorer/ComponentRegisterer.ts

@@ -1,31 +1,29 @@
 import * as ko from "knockout";
-import * as PaneComponents from "./Panes/PaneComponents";
 import { DiffEditorComponent } from "./Controls/DiffEditor/DiffEditorComponent";
 import { DynamicListComponent } from "./Controls/DynamicList/DynamicListComponent";
 import { EditorComponent } from "./Controls/Editor/EditorComponent";
 import { ErrorDisplayComponent } from "./Controls/ErrorDisplayComponent/ErrorDisplayComponent";
-import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
 import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahead";
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
-import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
-
+import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
+import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import * as PaneComponents from "./Panes/PaneComponents";
+import ConflictsTab from "./Tabs/ConflictsTab";
 import DocumentsTab from "./Tabs/DocumentsTab";
-import StoredProcedureTab from "./Tabs/StoredProcedureTab";
-import TriggerTab from "./Tabs/TriggerTab";
-import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
-import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
-import QueryTab from "./Tabs/QueryTab";
-import QueryTablesTab from "./Tabs/QueryTablesTab";
+import GalleryTab from "./Tabs/GalleryTab";
 import GraphTab from "./Tabs/GraphTab";
 import MongoShellTab from "./Tabs/MongoShellTab";
-import ConflictsTab from "./Tabs/ConflictsTab";
 import NotebookTabV2 from "./Tabs/NotebookV2Tab";
-import TerminalTab from "./Tabs/TerminalTab";
-import GalleryTab from "./Tabs/GalleryTab";
 import NotebookViewerTab from "./Tabs/NotebookViewerTab";
-import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
+import QueryTab from "./Tabs/QueryTab";
+import QueryTablesTab from "./Tabs/QueryTablesTab";
+import { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
+import StoredProcedureTab from "./Tabs/StoredProcedureTab";
 import TabsManagerTemplate from "./Tabs/TabsManager.html";
+import TerminalTab from "./Tabs/TerminalTab";
+import TriggerTab from "./Tabs/TriggerTab";
+import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";
 
 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
@@ -54,7 +52,6 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate });
   TerminalTab,
   GalleryTab,
   NotebookViewerTab,
-  DatabaseSettingsTab,
   DatabaseSettingsTabV2,
 ].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
 
@@ -65,24 +62,12 @@ ko.components.register(
   "delete-collection-confirmation-pane",
   new PaneComponents.DeleteCollectionConfirmationPaneComponent()
 );
-ko.components.register(
-  "delete-database-confirmation-pane",
-  new PaneComponents.DeleteDatabaseConfirmationPaneComponent()
-);
+
 ko.components.register("graph-new-vertex-pane", new PaneComponents.GraphNewVertexPaneComponent());
 ko.components.register("graph-styling-pane", new PaneComponents.GraphStylingPaneComponent());
 ko.components.register("table-add-entity-pane", new PaneComponents.TableAddEntityPaneComponent());
 ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEntityPaneComponent());
-ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
-ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
-ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
-ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
-ko.components.register("upload-items-pane", new PaneComponents.UploadItemsPaneComponent());
-ko.components.register("load-query-pane", new PaneComponents.LoadQueryPaneComponent());
-ko.components.register("save-query-pane", new PaneComponents.SaveQueryPaneComponent());
-ko.components.register("browse-queries-pane", new PaneComponents.BrowseQueriesPaneComponent());
-ko.components.register("upload-file-pane", new PaneComponents.UploadFilePaneComponent());
 ko.components.register("string-input-pane", new PaneComponents.StringInputPaneComponent());
 ko.components.register("setup-notebooks-pane", new PaneComponents.SetupNotebooksPaneComponent());
 ko.components.register("github-repos-pane", new PaneComponents.GitHubReposPaneComponent());

src/Explorer/ContextMenuButtonFactory.ts

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

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

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

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

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

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

@@ -1,17 +1,18 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import Explorer from "../../Explorer";
+import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
+import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
+import { isDirty, TtlType } from "./SettingsUtils";
+import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -21,16 +22,9 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     changeFeedPolicy: undefined,
     analyticalStorageTtl: undefined,
     geospatialConfig: undefined,
-  } as DataModels.Collection),
-  updateMongoDBCollectionThroughRP: jest.fn().mockReturnValue({
-    id: undefined,
-    shardKey: undefined,
     indexes: [],
-    analyticalStorageTtl: undefined,
-  } as MongoDBCollectionResource),
+  }),
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -134,7 +128,6 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
-      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
@@ -194,7 +187,6 @@ describe("SettingsComponent", () => {
     };
     await settingsComponentInstance.onSaveClick();
     expect(updateCollection).toBeCalled();
-    expect(updateMongoDBCollectionThroughRP).toBeCalled();
     expect(updateOffer).toBeCalled();
   });
 

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -6,7 +6,7 @@ import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
@@ -782,12 +782,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
       try {
         const newMongoIndexes = this.getMongoIndexesToSave();
-        const newMongoCollection: MongoDBCollectionResource = {
+        const newMongoCollection = {
           ...this.mongoDBCollectionResource,
           indexes: newMongoIndexes,
         };
 
-        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
+        this.mongoDBCollectionResource = await updateCollection(
           this.collection.databaseId,
           this.collection.id(),
           newMongoCollection

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

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

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

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

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

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

src/Explorer/Explorer.test.tsx

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

src/Explorer/Explorer.tsx

@@ -19,13 +19,12 @@ import { Splitter, SplitterBounds, SplitterDirection } from "../Common/Splitter"
 import { configContext, Platform } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { SubscriptionType } from "../Contracts/SubscriptionType";
 import * as ViewModels from "../Contracts/ViewModels";
 import { IGalleryItem } from "../Juno/JunoClient";
 import { NotebookWorkspaceManager } from "../NotebookWorkspaceManager/NotebookWorkspaceManager";
 import { ResourceProviderClientFactory } from "../ResourceProvider/ResourceProviderClientFactory";
 import { RouteHandler } from "../RouteHandlers/RouteHandler";
-import { appInsights } from "../Shared/appInsights";
+import { trackEvent } from "../Shared/appInsights";
 import * as SharedConstants from "../Shared/Constants";
 import { DefaultExperienceUtility } from "../Shared/DefaultExperienceUtility";
 import { ExplorerSettings } from "../Shared/ExplorerSettings";
@@ -44,33 +43,32 @@ import { DialogProps, TextFieldProps } from "./Controls/Dialog";
 import { GalleryTab } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { CommandBarComponentAdapter } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import { ConsoleData, ConsoleDataType } from "./Menus/NotificationConsole/NotificationConsoleComponent";
-import { FileSystemUtil } from "./Notebook/FileSystemUtil";
+import * as FileSystemUtil from "./Notebook/FileSystemUtil";
 import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import { NotebookUtil } from "./Notebook/NotebookUtil";
 import AddCollectionPane from "./Panes/AddCollectionPane";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import AddDatabasePane from "./Panes/AddDatabasePane";
-import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane";
+import { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
 import DeleteCollectionConfirmationPane from "./Panes/DeleteCollectionConfirmationPane";
 import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
-import DeleteDatabaseConfirmationPane from "./Panes/DeleteDatabaseConfirmationPane";
-import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane";
+import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
+import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPane } from "./Panes/LoadQueryPane";
+import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
 import NewVertexPane from "./Panes/NewVertexPane";
-import { SaveQueryPane } from "./Panes/SaveQueryPane";
+import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
 import { SettingsPane } from "./Panes/SettingsPane";
 import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
 import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
-import { QuerySelectPane } from "./Panes/Tables/QuerySelectPane";
-import { TableColumnOptionsPane } from "./Panes/Tables/TableColumnOptionsPane";
+import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
 import { UploadFilePane } from "./Panes/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane";
-import { UploadItemsPaneAdapter } from "./Panes/UploadItemsPaneAdapter";
+import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
@@ -96,13 +94,10 @@ export interface ExplorerParams {
   closeSidePanel: () => void;
   closeDialog: () => void;
   openDialog: (props: DialogProps) => void;
+  tabsManager: TabsManager;
 }
 
 export default class Explorer {
-  public flight: ko.Observable<string> = ko.observable<string>(
-    SharedConstants.CollectionCreation.DefaultAddCollectionDefaultFlight
-  );
-
   public addCollectionText: ko.Observable<string>;
   public addDatabaseText: ko.Observable<string>;
   public collectionTitle: ko.Observable<string>;
@@ -110,7 +105,6 @@ export default class Explorer {
   public deleteDatabaseText: ko.Observable<string>;
   public collectionTreeNodeAltText: ko.Observable<string>;
   public refreshTreeTitle: ko.Observable<string>;
-  public hasWriteAccess: ko.Observable<boolean>;
   public collapsedResourceTreeWidth: number = ExplorerMetrics.CollapsedResourceTreeWidth;
 
   /**
@@ -119,11 +113,6 @@ export default class Explorer {
    * */
   public databaseAccount: ko.Observable<DataModels.DatabaseAccount>;
   public collectionCreationDefaults: ViewModels.CollectionCreationDefaults = SharedConstants.CollectionCreationDefaults;
-  /**
-   * @deprecated
-   * Use userContext.subscriptionType instead
-   * */
-  public subscriptionType: ko.Observable<SubscriptionType>;
   /**
    * @deprecated
    * Use userContext.apiType instead
@@ -204,22 +193,11 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public deleteCollectionConfirmationPane: DeleteCollectionConfirmationPane;
-  public deleteDatabaseConfirmationPane: DeleteDatabaseConfirmationPane;
   public graphStylingPane: GraphStylingPane;
   public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
-  public tableColumnOptionsPane: TableColumnOptionsPane;
-  public querySelectPane: QuerySelectPane;
   public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
-  public settingsPane: SettingsPane;
-  public executeSprocParamsPane: ExecuteSprocParamsPane;
-  public uploadItemsPane: UploadItemsPane;
-  public uploadItemsPaneAdapter: UploadItemsPaneAdapter;
-  public loadQueryPane: LoadQueryPane;
-  public saveQueryPane: ContextualPaneBase;
-  public browseQueriesPane: BrowseQueriesPane;
-  public uploadFilePane: UploadFilePane;
   public stringInputPane: StringInputPane;
   public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
@@ -283,7 +261,6 @@ export default class Explorer {
     });
     this.addCollectionText = ko.observable<string>("New Collection");
     this.addDatabaseText = ko.observable<string>("New Database");
-    this.hasWriteAccess = ko.observable<boolean>(true);
     this.collectionTitle = ko.observable<string>("Collections");
     this.collectionTreeNodeAltText = ko.observable<string>("Collection");
     this.deleteCollectionText = ko.observable<string>("Delete Collection");
@@ -291,7 +268,6 @@ export default class Explorer {
     this.refreshTreeTitle = ko.observable<string>("Refresh collections");
 
     this.databaseAccount = ko.observable<DataModels.DatabaseAccount>();
-    this.subscriptionType = ko.observable<SubscriptionType>(SharedConstants.CollectionCreation.DefaultSubscriptionType);
     this.isAccountReady = ko.observable<boolean>(false);
     this._isInitializingNotebooks = false;
     this.arcadiaToken = ko.observable<string>();
@@ -352,7 +328,7 @@ export default class Explorer {
                 userContext.features.enableSpark
             );
             if (this.isSparkEnabled()) {
-              appInsights.trackEvent(
+              trackEvent(
                 { name: "LoadedWithSparkEnabled" },
                 {
                   subscriptionId: userContext.subscriptionId,
@@ -569,13 +545,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.deleteDatabaseConfirmationPane = new DeleteDatabaseConfirmationPane({
-      id: "deletedatabaseconfirmationpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.graphStylingPane = new GraphStylingPane({
       id: "graphstylingpane",
       visible: ko.observable<boolean>(false),
@@ -597,20 +566,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.tableColumnOptionsPane = new TableColumnOptionsPane({
-      id: "tablecolumnoptionspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.querySelectPane = new QuerySelectPane({
-      id: "queryselectpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.newVertexPane = new NewVertexPane({
       id: "newvertexpane",
       visible: ko.observable<boolean>(false),
@@ -625,57 +580,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.settingsPane = new SettingsPane({
-      id: "settingspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.executeSprocParamsPane = new ExecuteSprocParamsPane({
-      id: "executesprocparamspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadItemsPane = new UploadItemsPane({
-      id: "uploaditemspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadItemsPaneAdapter = new UploadItemsPaneAdapter(this);
-
-    this.loadQueryPane = new LoadQueryPane({
-      id: "loadquerypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.saveQueryPane = new SaveQueryPane({
-      id: "savequerypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.browseQueriesPane = new BrowseQueriesPane({
-      id: "browsequeriespane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
-    this.uploadFilePane = new UploadFilePane({
-      id: "uploadfilepane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.stringInputPane = new StringInputPane({
       id: "stringinputpane",
       visible: ko.observable<boolean>(false),
@@ -690,27 +594,17 @@ export default class Explorer {
       container: this,
     });
 
-    this.tabsManager = new TabsManager();
+    this.tabsManager = params?.tabsManager ?? new TabsManager();
 
     this._panes = [
       this.addDatabasePane,
       this.addCollectionPane,
       this.deleteCollectionConfirmationPane,
-      this.deleteDatabaseConfirmationPane,
       this.graphStylingPane,
       this.addTableEntityPane,
       this.editTableEntityPane,
-      this.tableColumnOptionsPane,
-      this.querySelectPane,
       this.newVertexPane,
       this.cassandraAddCollectionPane,
-      this.settingsPane,
-      this.executeSprocParamsPane,
-      this.uploadItemsPane,
-      this.loadQueryPane,
-      this.saveQueryPane,
-      this.browseQueriesPane,
-      this.uploadFilePane,
       this.stringInputPane,
       this.setupNotebooksPane,
     ];
@@ -806,8 +700,6 @@ export default class Explorer {
         this.editTableEntityPane.title("Edit Table Row");
         this.deleteCollectionConfirmationPane.title("Delete Table");
         this.deleteCollectionConfirmationPane.collectionIdConfirmationText("Confirm by typing the table id");
-        this.deleteDatabaseConfirmationPane.title("Delete Keyspace");
-        this.deleteDatabaseConfirmationPane.databaseIdConfirmationText("Confirm by typing the keyspace id");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
     }
@@ -1025,10 +917,8 @@ export default class Explorer {
 
     // TODO: Refactor
     const deferred: Q.Deferred<any> = Q.defer();
-    this._setLoadingStatusText("Fetching databases...");
     readDatabases().then(
       (databases: DataModels.Database[]) => {
-        this._setLoadingStatusText("Successfully fetched databases.");
         TelemetryProcessor.traceSuccess(
           Action.LoadDatabases,
           {
@@ -1041,20 +931,16 @@ export default class Explorer {
         this.addDatabasesToList(deltaDatabases.toAdd);
         this.deleteDatabasesFromList(deltaDatabases.toDelete);
         this.selectedNode(currentlySelectedNode);
-        this._setLoadingStatusText("Fetching containers...");
         this.refreshAndExpandNewDatabases(deltaDatabases.toAdd).then(
           () => {
-            this._setLoadingStatusText("Successfully fetched containers.");
             deferred.resolve();
           },
           (reason) => {
-            this._setLoadingStatusText("Failed to fetch containers.");
             deferred.reject(reason);
           }
         );
       },
       (error) => {
-        this._setLoadingStatusText("Failed to fetch databases.");
         deferred.reject(error);
         const errorMessage = getErrorMessage(error);
         TelemetryProcessor.traceFailure(
@@ -1330,7 +1216,12 @@ export default class Explorer {
   }
 
   public isLastNonEmptyDatabase(): boolean {
-    if (this.isLastDatabase() && this.databases()[0].collections && this.databases()[0].collections().length > 0) {
+    if (
+      this.isLastDatabase() &&
+      this.databases()[0] &&
+      this.databases()[0].collections &&
+      this.databases()[0].collections().length > 0
+    ) {
       return true;
     }
     return false;
@@ -1365,11 +1256,6 @@ export default class Explorer {
         this.collectionCreationDefaults = inputs.defaultCollectionThroughput;
       }
       this.databaseAccount(databaseAccount);
-      this.subscriptionType(inputs.subscriptionType ?? SharedConstants.CollectionCreation.DefaultSubscriptionType);
-      this.hasWriteAccess(inputs.hasWriteAccess ?? true);
-      if (inputs.addCollectionDefaultFlight) {
-        this.flight(inputs.addCollectionDefaultFlight);
-      }
       this.setFeatureFlagsFromFlights(inputs.flights);
       TelemetryProcessor.traceSuccess(
         Action.LoadDatabaseAccount,
@@ -2123,38 +2009,6 @@ export default class Explorer {
       .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
   }
 
-  public onUploadToNotebookServerClicked(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
-
-    this.uploadFilePane.openWithOptions({
-      paneTitle: "Upload file to notebook server",
-      selectFileInputLabel: "Select file to upload",
-      errorMessage: "Could not upload file",
-      inProgressMessage: "Uploading file to notebook server",
-      successMessage: "Successfully uploaded file to notebook server",
-      onSubmit: async (file: File): Promise<NotebookContentItem> => {
-        const readFileAsText = (inputFile: File): Promise<string> => {
-          const reader = new FileReader();
-          return new Promise((resolve, reject) => {
-            reader.onerror = () => {
-              reader.abort();
-              reject(`Problem parsing file: ${inputFile}`);
-            };
-            reader.onload = () => {
-              resolve(reader.result as string);
-            };
-            reader.readAsText(inputFile);
-          });
-        };
-
-        const fileContent = await readFileAsText(file);
-        return this.uploadFile(file.name, fileContent, parent);
-      },
-      extensions: undefined,
-      submitButtonLabel: "Upload",
-    });
-  }
-
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!this.isNotebookEnabled() || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to refresh notebook list, but notebook is not enabled";
@@ -2358,32 +2212,6 @@ export default class Explorer {
     }
   }
 
-  private _setLoadingStatusText(text: string, title: string = "Welcome to Azure Cosmos DB") {
-    if (!text) {
-      return;
-    }
-
-    const loadingText = document.getElementById("explorerLoadingStatusText");
-    if (!loadingText) {
-      Logger.logError(
-        "getElementById('explorerLoadingStatusText') failed to find element",
-        "Explorer/_setLoadingStatusText"
-      );
-      return;
-    }
-    loadingText.innerHTML = text;
-
-    const loadingTitle = document.getElementById("explorerLoadingStatusTitle");
-    if (!loadingTitle) {
-      Logger.logError(
-        "getElementById('explorerLoadingStatusTitle') failed to find element",
-        "Explorer/_setLoadingStatusText"
-      );
-    } else {
-      loadingTitle.innerHTML = title;
-    }
-  }
-
   private _openSetupNotebooksPaneForQuickstart(): void {
     const title = "Enable Notebooks (Preview)";
     const description =
@@ -2463,6 +2291,33 @@ export default class Explorer {
         );
   }
 
+  public openDeleteDatabaseConfirmationPane(): void {
+    this.openSidePanel(
+      "Delete Database",
+      <DeleteDatabaseConfirmationPanel
+        explorer={this}
+        openNotificationConsole={this.expandConsole}
+        closePanel={this.closeSidePanel}
+        selectedDatabase={this.findSelectedDatabase()}
+      />
+    );
+  }
+
+  public openUploadItemsPanePane(): void {
+    this.openSidePanel("Upload", <UploadItemsPane explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openSettingPane(): void {
+    this.openSidePanel("Settings", <SettingsPane explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openExecuteSprocParamsPanel(): void {
+    this.openSidePanel(
+      "Input parameters",
+      <ExecuteSprocParamsPanel explorer={this} closePanel={() => this.closeSidePanel()} />
+    );
+  }
+
   public async openAddCollectionPanel(): Promise<void> {
     await this.loadDatabaseOffers();
     this.openSidePanel(
@@ -2474,4 +2329,35 @@ export default class Explorer {
       />
     );
   }
+
+  public openBrowseQueriesPanel(): void {
+    this.openSidePanel("Open Saved Queries", <BrowseQueriesPanel explorer={this} closePanel={this.closeSidePanel} />);
+  }
+
+  public openLoadQueryPanel(): void {
+    this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+  }
+
+  public openSaveQueryPanel(): void {
+    this.openSidePanel("Save Query", <SaveQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+  }
+
+  public openUploadFilePanel(parent?: NotebookContentItem): void {
+    parent = parent || this.resourceTree.myNotebooksContentRoot;
+    this.openSidePanel(
+      "Upload File",
+      <UploadFilePane
+        explorer={this}
+        closePanel={this.closeSidePanel}
+        uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)}
+      />
+    );
+  }
+
+  public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void {
+    this.openSidePanel(
+      "Select Column",
+      <TableQuerySelectPanel explorer={this} closePanel={this.closeSidePanel} queryViewModel={queryViewModal} />
+    );
+  }
 }

src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts

@@ -1,6 +1,6 @@
-import { NeighborVertexBasicInfo } from "./GraphExplorer";
-import * as GraphData from "./GraphData";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import * as GraphData from "./GraphData";
+import { NeighborVertexBasicInfo } from "./GraphExplorer";
 
 interface JoinArrayMaxCharOutput {
   result: string; // string output
@@ -13,9 +13,9 @@ interface EdgePropertyType {
   inV?: string;
 }
 
-export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
+export const getNeighborTitle = (neighbor: NeighborVertexBasicInfo): string => {
   return `edge id: ${neighbor.edgeId}, vertex id: ${neighbor.id}`;
-}
+};
 
 /**
  * Collect all edges from this node
@@ -23,11 +23,11 @@ export function getNeighborTitle(neighbor: NeighborVertexBasicInfo): string {
  * @param graphData
  * @param newNodes (optional) object describing new nodes encountered
  */
-export function createEdgesfromNode(
+export const createEdgesfromNode = (
   vertex: GraphData.GremlinVertex,
   graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>,
   newNodes?: { [id: string]: boolean }
-): void {
+): void => {
   if (Object.prototype.hasOwnProperty.call(vertex, "outE")) {
     const outE = vertex.outE;
     for (const label in outE) {
@@ -66,7 +66,7 @@ export function createEdgesfromNode(
       });
     }
   }
-}
+};
 
 /**
  * From ['id1', 'id2', 'idn'] build the following string "'id1','id2','idn'".
@@ -75,7 +75,7 @@ export function createEdgesfromNode(
  * @param maxSize
  * @return
  */
-export function getLimitedArrayString(array: string[], maxSize: number): JoinArrayMaxCharOutput {
+export const getLimitedArrayString = (array: string[], maxSize: number): JoinArrayMaxCharOutput => {
   if (!array || array.length === 0 || array[0].length + 2 > maxSize) {
     return { result: "", consumedCount: 0 };
   }
@@ -96,16 +96,16 @@ export function getLimitedArrayString(array: string[], maxSize: number): JoinArr
     result: output,
     consumedCount: i + 1,
   };
-}
+};
 
-export function createFetchEdgePairQuery(
+export const createFetchEdgePairQuery = (
   outE: boolean,
   pkid: string,
   excludedEdgeIds: string[],
   startIndex: number,
   pageSize: number,
   withoutStepArgMaxLenght: number
-): string {
+): string => {
   let gremlinQuery: string;
   if (excludedEdgeIds.length > 0) {
     // build a string up to max char
@@ -128,15 +128,15 @@ export function createFetchEdgePairQuery(
     }().as('v').select('e', 'v')`;
   }
   return gremlinQuery;
-}
+};
 
 /**
  * Trim graph
  */
-export function trimGraph(
+export const trimGraph = (
   currentRoot: GraphData.GremlinVertex,
   graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
+): void => {
   const importantNodes = [currentRoot.id].concat(currentRoot._ancestorsId);
   graphData.unloadAllVertices(importantNodes);
 
@@ -144,32 +144,32 @@ export function trimGraph(
   $.each(graphData.ids, (index: number, id: string) => {
     graphData.getVertexById(id)._isFixedPosition = importantNodes.indexOf(id) !== -1;
   });
-}
+};
 
-export function addRootChildToGraph(
+export const addRootChildToGraph = (
   root: GraphData.GremlinVertex,
   child: GraphData.GremlinVertex,
   graphData: GraphData.GraphData<GraphData.GremlinVertex, GraphData.GremlinEdge>
-) {
+): void => {
   child._ancestorsId = (root._ancestorsId || []).concat([root.id]);
   graphData.addVertex(child);
   createEdgesfromNode(child, graphData);
   graphData.addNeighborInfo(child);
-}
+};
 
 /**
  * TODO Perform minimal substitution to prevent breaking gremlin query and allow \"" for now.
  * @param value
  */
-export function escapeDoubleQuotes(value: string): string {
+export const escapeDoubleQuotes = (value: string): string => {
   return value === undefined ? value : value.replace(/"/g, '\\"');
-}
+};
 
 /**
  * Surround with double-quotes if val is a string.
  * @param val
  */
-export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
+export const getQuotedPropValue = (ip: ViewModels.InputPropertyValue): string => {
   switch (ip.type) {
     case "number":
     case "boolean":
@@ -179,12 +179,12 @@ export function getQuotedPropValue(ip: ViewModels.InputPropertyValue): string {
     default:
       return `"${escapeDoubleQuotes(ip.value as string)}"`;
   }
-}
+};
 
 /**
  * TODO Perform minimal substitution to prevent breaking gremlin query and allow \' for now.
  * @param value
  */
-export function escapeSingleQuotes(value: string): string {
+export const escapeSingleQuotes = (value: string): string => {
   return value === undefined ? value : value.replace(/'/g, "\\'");
-}
+};

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -164,7 +164,7 @@ export function createControlCommandBarButtons(container: Explorer): CommandButt
     const settingsPaneButton: CommandButtonComponentProps = {
       iconSrc: SettingsIcon,
       iconAlt: label,
-      onCommandClick: () => container.settingsPane.open(),
+      onCommandClick: () => container.openSettingPane(),
       commandButtonLabel: undefined,
       ariaLabel: label,
       tooltipText: label,
@@ -407,7 +407,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.onUploadToNotebookServerClicked(),
+    onCommandClick: () => container.openUploadFilePanel(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,
@@ -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/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx

@@ -1,9 +1,9 @@
-import React from "react";
 import { shallow } from "enzyme";
+import React from "react";
 import {
-  NotificationConsoleComponentProps,
-  NotificationConsoleComponent,
   ConsoleDataType,
+  NotificationConsoleComponent,
+  NotificationConsoleComponentProps,
 } from "./NotificationConsoleComponent";
 
 describe("NotificationConsoleComponent", () => {
@@ -12,7 +12,7 @@ describe("NotificationConsoleComponent", () => {
       consoleData: undefined,
       isConsoleExpanded: false,
       inProgressConsoleDataIdToBeDeleted: "",
-      setIsConsoleExpanded: (isExpanded: boolean): void => {},
+      setIsConsoleExpanded: (): void => undefined,
     };
   };
 
@@ -98,7 +98,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
     expect(wrapper.find(".notificationConsoleData .date").text()).toEqual(date);
     expect(wrapper.find(".notificationConsoleData .message").text()).toEqual(message);
-    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`));
+    expect(wrapper.exists(`.notificationConsoleData .${iconClassName}`)).toBe(true);
   };
 
   it("renders progress notifications", () => {
@@ -139,7 +139,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
 
     wrapper.find(".clearNotificationsButton").simulate("click");
-    expect(!wrapper.exists(".notificationConsoleData"));
+    expect(wrapper.exists(".notificationConsoleData")).toBe(true);
   });
 
   it("collapses and hide content", () => {
@@ -155,7 +155,7 @@ describe("NotificationConsoleComponent", () => {
     wrapper.setProps(props);
 
     wrapper.find(".notificationConsoleHeader").simulate("click");
-    expect(!wrapper.exists(".notificationConsoleContent"));
+    expect(wrapper.exists(".notificationConsoleContent")).toBe(false);
   });
 
   it("display latest data in header", () => {

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -2,19 +2,20 @@
  * React component for control bar
  */
 
-import * as React from "react";
-import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
-import AnimateHeight from "react-animate-height";
 import { Dropdown, IDropdownOption } from "office-ui-fabric-react";
-import LoadingIcon from "../../../../images/loading.svg";
+import * as React from "react";
+import AnimateHeight from "react-animate-height";
+import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
+import ClearIcon from "../../../../images/Clear.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
+import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
 import InfoIcon from "../../../../images/info_color.svg";
-import ErrorRedIcon from "../../../../images/error_red.svg";
-import ClearIcon from "../../../../images/Clear.svg";
-import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
+import LoadingIcon from "../../../../images/loading.svg";
 import ChevronDownIcon from "../../../../images/QueryBuilder/CollapseChevronDown_16x.png";
+import ChevronUpIcon from "../../../../images/QueryBuilder/CollapseChevronUp_16x.png";
+import { ClientDefaults, KeyCodes } from "../../../Common/Constants";
+import { userContext } from "../../../UserContext";
 
 /**
  * Log levels
@@ -76,7 +77,7 @@ export class NotificationConsoleComponent extends React.Component<
   public componentDidUpdate(
     prevProps: NotificationConsoleComponentProps,
     prevState: NotificationConsoleComponentState
-  ) {
+  ): void {
     const currentHeaderStatus = NotificationConsoleComponent.extractHeaderStatus(this.props.consoleData);
 
     if (
@@ -97,7 +98,7 @@ export class NotificationConsoleComponent extends React.Component<
     }
   }
 
-  public setElememntRef = (element: HTMLElement) => {
+  public setElememntRef = (element: HTMLElement): void => {
     this.consoleHeaderElement = element;
   };
 
@@ -116,7 +117,7 @@ export class NotificationConsoleComponent extends React.Component<
           className="notificationConsoleHeader"
           id="notificationConsoleHeader"
           ref={this.setElememntRef}
-          onClick={(event: React.MouseEvent<HTMLDivElement>) => this.expandCollapseConsole()}
+          onClick={() => this.expandCollapseConsole()}
           onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onExpandCollapseKeyPress(event)}
           tabIndex={0}
         >
@@ -135,6 +136,7 @@ export class NotificationConsoleComponent extends React.Component<
                 <span className="numInfoItems">{numInfoItems}</span>
               </span>
             </span>
+            {userContext.features.pr && <PrPreview pr={userContext.features.pr} />}
             <span className="consoleSplitter" />
             <span className="headerStatus">
               <span className="headerStatusEllipsis">{this.state.headerStatus}</span>
@@ -304,3 +306,18 @@ export class NotificationConsoleComponent extends React.Component<
     );
   };
 }
+
+const PrPreview = (props: { pr: string }) => {
+  const url = new URL(props.pr);
+  const [, ref] = url.hash.split("#");
+  url.hash = "";
+
+  return (
+    <>
+      <span className="consoleSplitter" />
+      <a target="_blank" rel="noreferrer" href={url.href} style={{ marginRight: "1em", fontWeight: "bold" }}>
+        {ref}
+      </a>
+    </>
+  );
+};

src/Explorer/Notebook/FileSystemUtil.ts

@@ -1,6 +1,3 @@
-// Utilities for file system
-
-export class FileSystemUtil {
 /**
  * file list returns path starting with ./blah
  * rename returns simply blah.
@@ -10,7 +7,7 @@ export class FileSystemUtil {
  * @param path1
  * @param path2
  */
-  public static isPathEqual(path1: string, path2: string): boolean {
+export function isPathEqual(path1: string, path2: string): boolean {
   const normalize = (path: string): string => {
     const dotSlash = "./";
     if (path.indexOf(dotSlash) === 0) {
@@ -27,11 +24,10 @@ export class FileSystemUtil {
  * @param path
  * @param extension Without the ".". e.g. "ipynb" (and not ".ipynb")
  */
-  public static stripExtension(path: string, extension: string): string {
+export function stripExtension(path: string, extension: string): string {
   const splitted = path.split(".");
   if (splitted[splitted.length - 1] === extension) {
     splitted.pop();
   }
   return splitted.join(".");
 }
-}

src/Explorer/Notebook/NotebookClientV2.ts

@@ -1,15 +1,16 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import * as Constants from "../../Common/Constants";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-
 // Vendor modules
 import {
   actions,
   AppState,
+  ContentRecord,
   createHostRef,
   createKernelspecsRef,
+  HostRecord,
+  HostRef,
+  IContentProvider,
+  KernelspecsRef,
   makeAppRecord,
   makeCommsRecord,
   makeContentsRecord,
@@ -19,23 +20,21 @@ import {
   makeJupyterHostRecord,
   makeStateRecord,
   makeTransformsRecord,
-  ContentRecord,
-  HostRecord,
-  HostRef,
-  KernelspecsRef,
-  IContentProvider,
 } from "@nteract/core";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
-
-import configureStore from "./NotebookComponent/store";
-
 import { Notification } from "react-notification-system";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
+import * as Constants from "../../Common/Constants";
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import configureStore from "./NotebookComponent/store";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
+import JavaScript from "./NotebookRenderer/outputs/javascript";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -168,7 +167,7 @@ export class NotebookClientV2 {
               "application/vnd.vega.v5+json": NullTransform,
               "application/vdom.v1+json": TransformVDOM,
               "application/json": Media.Json,
-              "application/javascript": Media.JavaScript,
+              "application/javascript": userContext.features.sandboxNotebookOutputs ? JavaScript : Media.JavaScript,
               "text/html": Media.HTML,
               "text/markdown": Media.Markdown,
               "text/latex": Media.LaTeX,

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -44,7 +44,7 @@ import { CdbAppState } from "./types";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
 import * as TextFile from "./contents/file/text-file";
 import { NotebookUtil } from "../NotebookUtil";
-import { FileSystemUtil } from "../FileSystemUtil";
+import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { Areas } from "../../../Common/Constants";
 

src/Explorer/Notebook/NotebookContentClient.ts

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

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -1,18 +1,20 @@
-import * as React from "react";
-import "./base.css";
-import "./default.css";
-
-import { CodeCell, RawCell, Cells, MarkdownCell } from "@nteract/stateful-components";
-import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
-import { AzureTheme } from "./AzureTheme";
-
-import { connect } from "react-redux";
-import { Dispatch } from "redux";
 import { actions, ContentRef } from "@nteract/core";
-import loadTransform from "../NotebookComponent/loadTransform";
+import { KernelOutputError, StreamText } from "@nteract/outputs";
+import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
 import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
+import Prompt, { PassedPromptProps } from "@nteract/stateful-components/lib/inputs/prompt";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { userContext } from "../../../UserContext";
+import loadTransform from "../NotebookComponent/loadTransform";
+import { AzureTheme } from "./AzureTheme";
+import "./base.css";
+import "./default.css";
 import "./NotebookReadOnlyRenderer.less";
+import IFrameOutputs from "./outputs/IFrameOutputs";
 
 export interface NotebookRendererProps {
   contentRef: any;
@@ -60,6 +62,16 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
               <CodeCell id={id} contentRef={contentRef}>
                 {{
                   prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
+                  outputs: userContext.features.sandboxNotebookOutputs
+                    ? (props: any) => (
+                        <IFrameOutputs id={id} contentRef={contentRef}>
+                          <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+                          <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+                          <KernelOutputError />
+                          <StreamText />
+                        </IFrameOutputs>
+                      )
+                    : undefined,
                   editor: {
                     monaco: (props: PassedEditorProps) =>
                       this.props.hideInputs ? <></> : <MonacoEditor readOnly={true} {...props} editorType={"monaco"} />,

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -1,37 +1,32 @@
-import * as React from "react";
-import "./base.css";
-import "./default.css";
-
-import { RawCell, Cells, CodeCell, MarkdownCell } from "@nteract/stateful-components";
+import { CellId } from "@nteract/commutable";
+import { CellType } from "@nteract/commutable/src";
+import { actions, ContentRef } from "@nteract/core";
+import { KernelOutputError, StreamText } from "@nteract/outputs";
+import { Cells, CodeCell, MarkdownCell, RawCell } from "@nteract/stateful-components";
 import MonacoEditor from "@nteract/stateful-components/lib/inputs/connected-editors/monacoEditor";
 import { PassedEditorProps } from "@nteract/stateful-components/lib/inputs/editor";
-
-import Prompt from "./Prompt";
-import { promptContent } from "./PromptContent";
-
-import { AzureTheme } from "./AzureTheme";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import * as React from "react";
 import { DndProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
-
 import { connect } from "react-redux";
 import { Dispatch } from "redux";
-import { actions, ContentRef } from "@nteract/core";
-import { CellId } from "@nteract/commutable";
-import loadTransform from "../NotebookComponent/loadTransform";
-import DraggableCell from "./decorators/draggable";
-import CellCreator from "./decorators/CellCreator";
-import KeyboardShortcuts from "./decorators/kbd-shortcuts";
-
-import CellToolbar from "./Toolbar";
-import StatusBar from "./StatusBar";
-
-import HijackScroll from "./decorators/hijack-scroll";
-import { CellType } from "@nteract/commutable/src";
-
-import "./NotebookRenderer.less";
-import HoverableCell from "./decorators/HoverableCell";
-import CellLabeler from "./decorators/CellLabeler";
+import { userContext } from "../../../UserContext";
 import * as cdbActions from "../NotebookComponent/actions";
+import loadTransform from "../NotebookComponent/loadTransform";
+import { AzureTheme } from "./AzureTheme";
+import "./base.css";
+import CellCreator from "./decorators/CellCreator";
+import CellLabeler from "./decorators/CellLabeler";
+import HoverableCell from "./decorators/HoverableCell";
+import KeyboardShortcuts from "./decorators/kbd-shortcuts";
+import "./default.css";
+import "./NotebookRenderer.less";
+import IFrameOutputs from "./outputs/IFrameOutputs";
+import Prompt from "./Prompt";
+import { promptContent } from "./PromptContent";
+import StatusBar from "./StatusBar";
+import CellToolbar from "./Toolbar";
 
 export interface NotebookRendererBaseProps {
   contentRef: any;
@@ -112,6 +107,16 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                               </Prompt>
                             ),
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
+                            outputs: userContext.features.sandboxNotebookOutputs
+                              ? (props: any) => (
+                                  <IFrameOutputs id={id} contentRef={contentRef}>
+                                    <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+                                    <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+                                    <KernelOutputError />
+                                    <StreamText />
+                                  </IFrameOutputs>
+                                )
+                              : undefined,
                           }}
                         </CodeCell>
                       ),

src/Explorer/Notebook/NotebookRenderer/outputs/IFrameOutputs.tsx

@@ -0,0 +1,70 @@
+import { AppState, ContentRef, selectors } from "@nteract/core";
+import { Output } from "@nteract/outputs";
+import Immutable from "immutable";
+import React from "react";
+import { connect } from "react-redux";
+import { SandboxFrame } from "./SandboxFrame";
+
+// Adapted from https://github.com/nteract/nteract/blob/main/packages/stateful-components/src/outputs/index.tsx
+// to add support for sandboxing using <iframe>
+
+interface ComponentProps {
+  id: string;
+  contentRef: ContentRef;
+  children: React.ReactNode;
+}
+
+interface StateProps {
+  hidden: boolean;
+  expanded: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outputs: Immutable.List<any>;
+}
+
+export class IFrameOutputs extends React.PureComponent<ComponentProps & StateProps> {
+  render(): JSX.Element {
+    const { outputs, children, hidden, expanded } = this.props;
+    return (
+      <SandboxFrame
+        style={{ border: "none", width: "100%" }}
+        sandbox="allow-downloads allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-popups-to-escape-sandbox"
+      >
+        <div className={`nteract-cell-outputs ${hidden ? "hidden" : ""} ${expanded ? "expanded" : ""}`}>
+          {outputs.map((output, index) => (
+            <Output output={output} key={index}>
+              {children}
+            </Output>
+          ))}
+        </div>
+      </SandboxFrame>
+    );
+  }
+}
+
+export const makeMapStateToProps = (
+  initialState: AppState,
+  ownProps: ComponentProps
+): ((state: AppState) => StateProps) => {
+  const mapStateToProps = (state: AppState): StateProps => {
+    let outputs = Immutable.List();
+    let hidden = false;
+    let expanded = false;
+
+    const { contentRef, id } = ownProps;
+    const model = selectors.model(state, { contentRef });
+
+    if (model && model.type === "notebook") {
+      const cell = selectors.notebook.cellById(model, { id });
+      if (cell) {
+        outputs = cell.get("outputs", Immutable.List());
+        hidden = cell.cell_type === "code" && cell.getIn(["metadata", "jupyter", "outputs_hidden"]);
+        expanded = cell.cell_type === "code" && cell.getIn(["metadata", "collapsed"]) === false;
+      }
+    }
+
+    return { outputs, hidden, expanded };
+  };
+  return mapStateToProps;
+};
+
+export default connect<StateProps, void, ComponentProps, AppState>(makeMapStateToProps)(IFrameOutputs);

src/Explorer/Notebook/NotebookRenderer/outputs/SandboxFrame.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { copyStyles } from "../../../../Utils/StyleUtils";
+
+interface SandboxFrameProps {
+  style: React.CSSProperties;
+  sandbox: string;
+}
+
+interface SandboxFrameState {
+  frame: HTMLIFrameElement;
+  frameBody: HTMLElement;
+  frameHeight: number;
+}
+
+export class SandboxFrame extends React.PureComponent<SandboxFrameProps, SandboxFrameState> {
+  private resizeObserver: ResizeObserver;
+
+  constructor(props: SandboxFrameProps) {
+    super(props);
+
+    this.state = {
+      frame: undefined,
+      frameBody: undefined,
+      frameHeight: 0,
+    };
+  }
+
+  render(): JSX.Element {
+    return (
+      <iframe
+        ref={(ele) => this.setState({ frame: ele })}
+        srcDoc={`<!DOCTYPE html>`}
+        onLoad={(event) => this.onFrameLoad(event)}
+        style={this.props.style}
+        sandbox={this.props.sandbox}
+        height={this.state.frameHeight}
+      >
+        {this.state.frameBody && ReactDOM.createPortal(this.props.children, this.state.frameBody)}
+      </iframe>
+    );
+  }
+
+  componentWillUnmount() {
+    this.resizeObserver?.disconnect();
+  }
+
+  onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
+    const doc = (event.target as HTMLIFrameElement).contentDocument;
+    copyStyles(document, doc);
+
+    this.setState({
+      frameBody: doc.body,
+      frameHeight: doc.body.scrollHeight,
+    });
+
+    this.resizeObserver = new ResizeObserver(() =>
+      this.setState({
+        frameHeight: this.state.frameBody.scrollHeight,
+      })
+    );
+    this.resizeObserver.observe(doc.body);
+  }
+}

src/Explorer/Notebook/NotebookRenderer/outputs/javascript.tsx

@@ -0,0 +1,26 @@
+import { Media } from "@nteract/outputs";
+import React from "react";
+
+interface Props {
+  /**
+   * The JavaScript code that we would like to execute.
+   */
+  data: string;
+  /**
+   * The media type associated with our component.
+   */
+  mediaType: "text/javascript";
+}
+
+export class JavaScript extends React.PureComponent<Props> {
+  static defaultProps = {
+    data: "",
+    mediaType: "application/javascript",
+  };
+
+  render(): JSX.Element {
+    return <Media.HTML data={`<script>${this.props.data}</script>`} />;
+  }
+}
+
+export default JavaScript;

src/Explorer/OpenActions.ts

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

src/Explorer/Panes/AddCollectionPane.ts

@@ -105,10 +105,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.databaseId = ko.observable<string>();
     this.databaseCreateNew = ko.observable<boolean>(true);
     this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
-    this.container.subscriptionType &&
-      this.container.subscriptionType.subscribe((subscriptionType) => {
-        this.databaseCreateNewShared(this.getSharedThroughputDefault());
-      });
     this.collectionWithThroughputInShared = ko.observable<boolean>(false);
     this.databaseIds = ko.observableArray<string>();
     this.uniqueKeys = ko.observableArray<DynamicListItem>();
@@ -478,9 +474,6 @@ export default class AddCollectionPane extends ContextualPaneBase {
     });
 
     this.resetData();
-    this.container.flight.subscribe(() => {
-      this.resetData();
-    });
 
     this.freeTierExceedThroughputTooltip = ko.pureComputed<string>(() =>
       this.isFreeTierAccount() && !this.container.isFirstResourceCreated()
@@ -659,7 +652,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   }
 
   public getSharedThroughputDefault(): boolean {
-    const subscriptionType = this.container.subscriptionType && this.container.subscriptionType();
+    const subscriptionType = userContext.subscriptionType;
     if (subscriptionType === SubscriptionType.EA || this.container.isServerlessEnabled()) {
       return false;
     }
@@ -701,12 +694,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         partitionKey: this.partitionKey(),
         databaseId: this.databaseId(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: this._getThroughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -805,12 +798,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
         uniqueKeyPolicy,
         collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
         throughput: offerThroughput,
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       useIndexingForSharedThroughput: this.useIndexingForSharedThroughput(),
@@ -877,12 +870,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           }),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
         };
@@ -909,12 +902,12 @@ export default class AddCollectionPane extends ContextualPaneBase {
             uniqueKeyPolicy,
             collectionWithThroughputInShared: this.collectionWithThroughputInShared(),
           },
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: this.storage() === Constants.BackendDefaults.singlePartitionStorageInGb ? "f" : "u",
             throughput: offerThroughput,
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           error: errorMessage,

src/Explorer/Panes/AddDatabasePane.test.ts

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

src/Explorer/Panes/AddDatabasePane.ts

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

src/Explorer/Panes/BrowseQueriesPane.html

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

src/Explorer/Panes/BrowseQueriesPane.ts

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

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

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

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

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

src/Explorer/Panes/BrowseQueriesPanel/index.tsx

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

src/Explorer/Panes/CassandraAddCollectionPane.ts

@@ -5,7 +5,6 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { HashMap } from "../../Common/HashMap";
 import { configContext, Platform } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
-import { SubscriptionType } from "../../Contracts/SubscriptionType";
 import * as ViewModels from "../../Contracts/ViewModels";
 import * as AddCollectionUtility from "../../Shared/AddCollectionUtility";
 import * as SharedConstants from "../../Shared/Constants";
@@ -117,10 +116,6 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
 
     this.resetData();
 
-    this.container.flight.subscribe(() => {
-      this.resetData();
-    });
-
     this.requestUnitsUsageCostDedicated = ko.computed(() => {
       const account = this.container.databaseAccount();
       if (!account) {
@@ -306,12 +301,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         partitionKey: "",
         databaseId: this.keyspaceId(),
       }),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
     };
@@ -358,12 +353,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
         hasDedicatedThroughput: this.dedicateTableThroughput(),
       }),
       keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-      subscriptionType: SubscriptionType[this.container.subscriptionType()],
+      subscriptionType: userContext.subscriptionType,
       subscriptionQuotaId: userContext.quotaId,
       defaultsCheck: {
         storage: "u",
         throughput: this.throughput(),
-        flight: this.container.flight(),
+        flight: userContext.addCollectionFlight,
       },
       dataExplorerArea: Constants.Areas.ContextualPane,
       toCreateKeyspace: toCreateKeyspace,
@@ -402,12 +397,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           }),
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,
@@ -430,12 +425,12 @@ export default class CassandraAddCollectionPane extends ContextualPaneBase {
             hasDedicatedThroughput: this.dedicateTableThroughput(),
           },
           keyspaceHasSharedOffer: this.keyspaceHasSharedOffer(),
-          subscriptionType: SubscriptionType[this.container.subscriptionType()],
+          subscriptionType: userContext.subscriptionType,
           subscriptionQuotaId: userContext.quotaId,
           defaultsCheck: {
             storage: "u",
             throughput: this.throughput(),
-            flight: this.container.flight(),
+            flight: userContext.addCollectionFlight,
           },
           dataExplorerArea: Constants.Areas.ContextualPane,
           toCreateKeyspace: toCreateKeyspace,

src/Explorer/Panes/DeleteDatabaseConfirmationPane.html

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

src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts

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

src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts

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

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.test.tsx

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

src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx

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

src/Explorer/Panes/ExecuteSprocParamsPane.html

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

src/Explorer/Panes/ExecuteSprocParamsPane.ts

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

src/Explorer/Panes/ExecuteSprocParamsPanel/InputParameter.tsx

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

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

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

src/Explorer/Panes/ExecuteSprocParamsPanel/index.tsx

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

src/Explorer/Panes/GenericRightPaneComponent.tsx

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

src/Explorer/Panes/LoadQueryPane.html

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

src/Explorer/Panes/LoadQueryPane.ts

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

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

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

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

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

src/Explorer/Panes/LoadQueryPanel/index.tsx

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

src/Explorer/Panes/PaneComponents.ts

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

src/Explorer/Panes/PanelComponent.less

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

src/Explorer/Panes/PublishNotebookPaneAdapter.tsx

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

src/Explorer/Panes/PublishNotebookPaneComponent.tsx

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

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.html

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

src/Explorer/Panes/SettingsPane.test.ts

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

src/Explorer/Panes/SettingsPane.ts

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

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

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

src/Explorer/Panes/SettingsPane/index.tsx

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

src/Explorer/Panes/Tables/QuerySelectPane.ts

@@ -1,174 +0,0 @@
-import * as ko from "knockout";
-import _ from "underscore";
-import * as Constants from "../../Tables/Constants";
-import QueryViewModel from "../../Tables/QueryBuilder/QueryViewModel";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { ContextualPaneBase } from "../ContextualPaneBase";
-
-export interface ISelectColumn {
-  columnName: ko.Observable<string>;
-  selected: ko.Observable<boolean>;
-  editable: ko.Observable<boolean>;
-}
-
-export class QuerySelectPane extends ContextualPaneBase {
-  public titleLabel: string = "Select Columns";
-  public instructionLabel: string = "Select the columns that you want to query.";
-  public availableColumnsTableQueryLabel: string = "Available Columns";
-  public noColumnSelectedWarning: string = "At least one column should be selected.";
-
-  public columnOptions: ko.ObservableArray<ISelectColumn>;
-  public anyColumnSelected: ko.Computed<boolean>;
-  public canSelectAll: ko.Computed<boolean>;
-  public allSelected: ko.Computed<boolean>;
-
-  private selectedColumnOption: ISelectColumn = null;
-
-  public queryViewModel: QueryViewModel;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-
-    this.columnOptions = ko.observableArray<ISelectColumn>();
-    this.anyColumnSelected = ko.computed<boolean>(() => {
-      return _.some(this.columnOptions(), (value: ISelectColumn) => {
-        return value.selected();
-      });
-    });
-
-    this.canSelectAll = ko.computed<boolean>(() => {
-      return _.some(this.columnOptions(), (value: ISelectColumn) => {
-        return !value.selected();
-      });
-    });
-
-    this.allSelected = ko.pureComputed<boolean>({
-      read: () => {
-        return !this.canSelectAll();
-      },
-      write: (value) => {
-        if (value) {
-          this.selectAll();
-        } else {
-          this.clearAll();
-        }
-      },
-      owner: this,
-    });
-  }
-
-  public submit() {
-    this.queryViewModel.selectText(this.getParameters());
-    this.queryViewModel.getSelectMessage();
-    this.close();
-  }
-
-  public open() {
-    this.setTableColumns(this.queryViewModel.columnOptions());
-    this.setDisplayedColumns(this.queryViewModel.selectText(), this.columnOptions());
-    super.open();
-  }
-
-  private getParameters(): string[] {
-    if (this.canSelectAll() === false) {
-      return [];
-    }
-
-    var selectedColumns = this.columnOptions().filter((value: ISelectColumn) => value.selected() === true);
-
-    var columns: string[] = selectedColumns.map((value: ISelectColumn) => {
-      var name: string = value.columnName();
-      return name;
-    });
-
-    return columns;
-  }
-
-  public setTableColumns(columnNames: string[]): void {
-    var columns: ISelectColumn[] = columnNames.map((value: string) => {
-      var columnOption: ISelectColumn = {
-        columnName: ko.observable<string>(value),
-        selected: ko.observable<boolean>(true),
-        editable: ko.observable<boolean>(this.isEntityEditable(value)),
-      };
-      return columnOption;
-    });
-
-    this.columnOptions(columns);
-  }
-
-  public setDisplayedColumns(querySelect: string[], columns: ISelectColumn[]): void {
-    if (querySelect == null || _.isEmpty(querySelect)) {
-      return;
-    }
-    this.setSelected(querySelect, columns);
-  }
-
-  private setSelected(querySelect: string[], columns: ISelectColumn[]): void {
-    this.clearAll();
-    querySelect &&
-      querySelect.forEach((value: string) => {
-        for (var i = 0; i < columns.length; i++) {
-          if (value === columns[i].columnName()) {
-            columns[i].selected(true);
-          }
-        }
-      });
-  }
-
-  public availableColumnsCheckboxClick(): boolean {
-    if (this.canSelectAll()) {
-      return this.selectAll();
-    } else {
-      return this.clearAll();
-    }
-  }
-
-  public selectAll(): boolean {
-    const columnOptions = this.columnOptions && this.columnOptions();
-    columnOptions &&
-      columnOptions.forEach((value: ISelectColumn) => {
-        value.selected(true);
-      });
-    return true;
-  }
-
-  public clearAll(): boolean {
-    const columnOptions = this.columnOptions && this.columnOptions();
-    columnOptions &&
-      columnOptions.forEach((column: ISelectColumn) => {
-        if (this.isEntityEditable(column.columnName())) {
-          column.selected(false);
-        } else {
-          column.selected(true);
-        }
-      });
-    return true;
-  }
-
-  public handleClick = (data: ISelectColumn, event: KeyboardEvent): boolean => {
-    this.selectTargetItem($(event.currentTarget), data);
-    return true;
-  };
-
-  private selectTargetItem($target: JQuery, targetColumn: ISelectColumn): void {
-    this.selectedColumnOption = targetColumn;
-
-    $(".list-item.selected").removeClass("selected");
-    $target.addClass("selected");
-  }
-
-  private isEntityEditable(name: string) {
-    if (this.queryViewModel.queryTablesTab.container.isPreferredApiCassandra()) {
-      const cassandraKeys = this.queryViewModel.queryTablesTab.collection.cassandraKeys.partitionKeys
-        .concat(this.queryViewModel.queryTablesTab.collection.cassandraKeys.clusteringKeys)
-        .map((key) => key.property);
-      return !_.contains<string>(cassandraKeys, name);
-    }
-    return !(
-      name === Constants.EntityKeyNames.PartitionKey ||
-      name === Constants.EntityKeyNames.RowKey ||
-      name === Constants.EntityKeyNames.Timestamp
-    );
-  }
-}

src/Explorer/Panes/Tables/TableColumnOptionsPane.html

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

src/Explorer/Panes/Tables/TableColumnOptionsPane.ts

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

src/Explorer/Panes/Tables/TableQuerySelectPane.html

@@ -1,79 +0,0 @@
-<div data-bind="visible: visible">
-  <div
-    class="contextual-pane-out"
-    data-bind="
-        click: cancel,
-        clickBubble: false"
-  ></div>
-  <div class="contextual-pane" id="queryselectpane">
-    <!-- Query Select form - Start -->
-    <div class="contextual-pane-in">
-      <form
-        class="paneContentContainer"
-        data-bind="
-                submit: submit"
-      >
-        <!-- Query Select header - Start -->
-        <div class="firstdivbg headerline">
-          Select Column
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            tabindex="0"
-            data-bind="
-                        click: cancel, event: { keydown: onCloseKeyPress }"
-          >
-            <img src="../../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Query Select header - End -->
-        <div class="paneMainContent paneContentContainer">
-          <!--<div class="row">
-                        <label id="instructionLabel" data-bind="text: instructionLabel"></label>
-                    </div>-->
-          <div><span>Select the columns that you want to query.</span></div>
-          <div class="column-options">
-            <div class="columns-border">
-              <input class="all-select-check" type="checkbox" data-bind="checked: allSelected" />
-              <label
-                style="font-weight: 700"
-                id="availableColumnsTableQueryLabel"
-                data-bind="text: availableColumnsTableQueryLabel"
-              ></label>
-            </div>
-            <div class="content">
-              <section>
-                <ul data-bind="foreach: columnOptions" aria-labelledby="availableColumnsTableQueryLabel" tabindex="0">
-                  <!-- ko template: {if: editable} -->
-                  <li
-                    class="list-item columns-border"
-                    data-bind="attr: { title: columnName }, click: $parent.handleClick "
-                  >
-                    <input type="checkbox" data-bind="attr: { title: columnName }, checked: selected" />
-                    <span data-bind="text: columnName"></span>
-                  </li>
-                  <!--/ko-->
-                  <!-- ko template: {ifnot: editable} -->
-                  <li class="list-item columns-border" data-bind="attr: { title: columnName } ">
-                    <input type="checkbox" disabled data-bind="checked: selected" />
-                    <span data-bind="text: columnName"></span>
-                  </li>
-                  <!--/ko-->
-                </ul>
-              </section>
-            </div>
-          </div>
-
-          <div class="row-label" data-bind="style: { visibility: anyColumnSelected() ? 'hidden': 'visible' }">
-            <label class="warning" role="alert" aria-atomic="true" data-bind="text: noColumnSelectedWarning"></label>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
-        </div>
-      </form>
-    </div>
-    <!-- Query Select form - End -->
-  </div>
-</div>

src/Explorer/Panes/Tables/TableQuerySelectPanel/index.test.tsx

@@ -0,0 +1,38 @@
+import { mount } from "enzyme";
+import * as ko from "knockout";
+import React from "react";
+import Explorer from "../../../Explorer";
+import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
+import { TableQuerySelectPanel } from "./index";
+
+describe("Table query select Panel", () => {
+  const fakeExplorer = {} as Explorer;
+  const fakeQueryViewModal = {} as QueryViewModel;
+  fakeQueryViewModal.columnOptions = ko.observableArray<string>([""]);
+
+  const props = {
+    explorer: fakeExplorer,
+    closePanel: (): void => undefined,
+    queryViewModel: fakeQueryViewModal,
+  };
+
+  it("should render Default properly", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Should exist availableCheckbox by default", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper.exists("#availableCheckbox")).toBe(true);
+  });
+
+  it("Should checked availableCheckbox by default", () => {
+    const wrapper = mount(<TableQuerySelectPanel {...props} />);
+    expect(wrapper.find("#availableCheckbox").first().props()).toEqual({
+      id: "availableCheckbox",
+      label: "Available Columns",
+      checked: true,
+      onChange: expect.any(Function),
+    });
+  });
+});

src/Explorer/Panes/Tables/TableQuerySelectPanel/index.tsx

@@ -0,0 +1,155 @@
+import { Checkbox, Text } from "office-ui-fabric-react";
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { userContext } from "../../../../UserContext";
+import Explorer from "../../../Explorer";
+import * as Constants from "../../../Tables/Constants";
+import QueryViewModel from "../../../Tables/QueryBuilder/QueryViewModel";
+import { GenericRightPaneComponent, GenericRightPaneProps } from "../../GenericRightPaneComponent";
+
+interface TableQuerySelectPanelProps {
+  explorer: Explorer;
+  closePanel: () => void;
+  queryViewModel: QueryViewModel;
+}
+
+interface ISelectColumn {
+  columnName: string;
+  selected: boolean;
+  editable: boolean;
+}
+
+export const TableQuerySelectPanel: FunctionComponent<TableQuerySelectPanelProps> = ({
+  explorer,
+  closePanel,
+  queryViewModel,
+}: TableQuerySelectPanelProps): JSX.Element => {
+  const [columnOptions, setColumnOptions] = useState<ISelectColumn[]>([
+    { columnName: "", selected: true, editable: false },
+  ]);
+  const [isAvailableColumnChecked, setIsAvailableColumnChecked] = useState<boolean>(true);
+
+  const genericPaneProps: GenericRightPaneProps = {
+    container: explorer,
+    formError: "",
+    formErrorDetail: "",
+    id: "querySelectPane",
+    isExecuting: false,
+    title: "Select Column",
+    submitButtonText: "OK",
+    onClose: () => closePanel(),
+    onSubmit: () => submit(),
+  };
+
+  const submit = (): void => {
+    queryViewModel.selectText(getParameters());
+    queryViewModel.getSelectMessage();
+    closePanel();
+  };
+
+  const handleClick = (isChecked: boolean, selectedColumn: string): void => {
+    const columns = columnOptions.map((column) => {
+      if (column.columnName === selectedColumn) {
+        column.selected = isChecked;
+        return { ...column };
+      }
+      return { ...column };
+    });
+    canSelectAll();
+    setColumnOptions(columns);
+  };
+
+  useEffect(() => {
+    queryViewModel && setTableColumns(queryViewModel.columnOptions());
+  }, []);
+
+  const setTableColumns = (columnNames: string[]): void => {
+    const columns: ISelectColumn[] =
+      columnNames &&
+      columnNames.length &&
+      columnNames.map((value: string) => {
+        const columnOption: ISelectColumn = {
+          columnName: value,
+          selected: true,
+          editable: isEntityEditable(value),
+        };
+        return columnOption;
+      });
+    setColumnOptions(columns);
+  };
+
+  const isEntityEditable = (name: string): boolean => {
+    if (userContext.apiType === "Cassandra") {
+      const cassandraKeys = queryViewModel.queryTablesTab.collection.cassandraKeys.partitionKeys
+        .concat(queryViewModel.queryTablesTab.collection.cassandraKeys.clusteringKeys)
+        .map((key) => key.property);
+      return !cassandraKeys.includes(name);
+    }
+    return !(
+      name === Constants.EntityKeyNames.PartitionKey ||
+      name === Constants.EntityKeyNames.RowKey ||
+      name === Constants.EntityKeyNames.Timestamp
+    );
+  };
+
+  const availableColumnsCheckboxClick = (event: React.FormEvent<HTMLElement>, isChecked: boolean): void => {
+    setIsAvailableColumnChecked(isChecked);
+    selectClearAll(isChecked);
+  };
+
+  const selectClearAll = (isChecked: boolean): void => {
+    const columns: ISelectColumn[] = columnOptions.map((column: ISelectColumn) => {
+      if (isEntityEditable(column.columnName)) {
+        column.selected = isChecked;
+        return { ...column };
+      }
+      return { ...column };
+    });
+    setColumnOptions(columns);
+  };
+
+  const getParameters = (): string[] => {
+    const selectedColumns = columnOptions.filter((value: ISelectColumn) => value.selected === true);
+    const columns: string[] = selectedColumns.map((value: ISelectColumn) => {
+      const name: string = value.columnName;
+      return name;
+    });
+
+    return columns;
+  };
+
+  const canSelectAll = (): void => {
+    const canSelectAllColumn: boolean = columnOptions.some((value: ISelectColumn) => {
+      return !value.selected;
+    });
+    setIsAvailableColumnChecked(!canSelectAllColumn);
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <div className="panelFormWrapper">
+        <div className="panelMainContent">
+          <Text>Select the columns that you want to query.</Text>
+          <div className="column-select-view">
+            <Checkbox
+              id="availableCheckbox"
+              label="Available Columns"
+              checked={isAvailableColumnChecked}
+              onChange={availableColumnsCheckboxClick}
+            />
+            {columnOptions.map((column) => {
+              return (
+                <Checkbox
+                  label={column.columnName}
+                  onChange={(_event, isChecked: boolean) => handleClick(isChecked, column.columnName)}
+                  key={column.columnName}
+                  checked={column.selected}
+                  disabled={!column.editable}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/UploadFilePane.html

@@ -1,83 +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="uploadFilePane">
-    <!-- Upload File form  -- Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: submit">
-        <!-- Upload File header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2" data-bind="text: title"></span>
-          <div class="closeImg" role="button" aria-label="Close pane" tabindex="0" data-bind="click: cancel">
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- Upload File header - End -->
-
-        <!-- Upload File errors - Start -->
-        <div
-          class="warningErrorContainer"
-          aria-live="assertive"
-          data-bind="visible: formErrors() && formErrors() !== ''"
-        >
-          <div class="warningErrorContent">
-            <span><img class="paneErrorIcon" src="/error_red.svg" alt="Error" /></span>
-            <span class="warningErrorDetailsLinkContainer">
-              <span class="formErrors" data-bind="text: formErrors, attr: { title: formErrors }"></span>
-              <a
-                class="errorLink"
-                role="link"
-                data-bind="visible: formErrorsDetails() && formErrorsDetails() !== '', click: showErrorDetails"
-                >More details</a
-              >
-            </span>
-          </div>
-        </div>
-        <!-- Upload File errors - End -->
-
-        <!-- Upload File inputs - Start -->
-        <div class="paneMainContent">
-          <div>
-            <div class="renewUploadItemsHeader" data-bind="text: selectFileInputLabel"></div>
-            <input class="importFilesTitle" type="text" disabled data-bind="value: selectedFilesTitle" />
-            <input
-              type="file"
-              id="importFileInput"
-              style="display: none"
-              data-bind="event: { change: updateSelectedFiles }, attr: { accept: extensions }"
-            />
-            <a
-              href="#"
-              id="fileImportLinkNotebook"
-              data-bind="event: { click: onImportLinkClick, keypress: onImportLinkKeyPress }"
-            >
-              <img
-                id="importFileButton"
-                class="fileImportImg"
-                src="/folder_16x16.svg"
-                alt="upload files"
-                title="Upload files"
-              />
-            </a>
-          </div>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut">
-            <input
-              id="uploadFileButton"
-              type="submit"
-              data-bind="attr: { value: submitButtonLabel }"
-              class="btncreatecoll1"
-            />
-          </div>
-        </div>
-        <!-- Upload File inputs - End -->
-      </form>
-    </div>
-    <!-- Upload File form  - Start -->
-    <!-- Loader - Start -->
-    <div class="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer" data-bind="visible: isExecuting">
-      <img class="dataExplorerLoader" src="/LoadingIndicator_3Squares.gif" />
-    </div>
-    <!-- Loader - End -->
-  </div>
-</div>

src/Explorer/Panes/UploadFilePane.ts

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