resolve conflict master branch

.eslintignore

@@ -90,8 +90,7 @@ src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
 src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts
 src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts
-src/Explorer/Graph/NewVertexComponent/NewVertex.test.ts
+
-src/Explorer/Graph/NewVertexComponent/NewVertexComponent.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
@@ -123,13 +122,11 @@ src/Explorer/Panes/ContextualPaneBase.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/NewVertexPane.ts
+# src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.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/TableEntityPane.ts

.github/workflows/ci.yml

@@ -101,7 +101,8 @@ jobs:
           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/')
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
@@ -126,58 +127,21 @@ jobs:
         with:
           name: screenshots
           path: failed-*
-  accessibility:
+  endtoend:
-    name: "Accessibility | Hosted"
+    name: "E2E"
-    needs: [lint, format, compile, unittest]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - name: Accessibility Check
-        run: |
-          # Ubuntu gets mad when webpack runs too many files watchers
-          cat /proc/sys/fs/inotify/max_user_watches
-          sudo sysctl fs.inotify.max_user_watches=524288
-          sudo sysctl -p
-          npm ci
-          npm start &
-          npx wait-on -i 5000 https-get://0.0.0.0:1234/
-          node utils/accesibilityCheck.js
-        shell: bash
-        env:
-          NODE_TLS_REJECT_UNAUTHORIZED: 0
-  endtoendhosted:
-    name: "End to End Tests"
-    needs: [cleanupaccounts]
     runs-on: ubuntu-latest
     env:
       NODE_TLS_REJECT_UNAUTHORIZED: 0
-      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
-      PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
-      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
-      NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
       NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
-      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
-      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
-      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
-      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
     strategy:
       fail-fast: false
       matrix:
         test-file:
           - ./test/cassandra/container.spec.ts
-          - ./test/mongo/mongoIndexPolicy.spec.ts
-          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
-          - ./test/selfServe/selfServeExample.spec.ts
           - ./test/sql/container.spec.ts
+          - ./test/mongo/container.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/notebooks/upload.spec.ts
           - ./test/sql/resourceToken.spec.ts
           - ./test/tables/container.spec.ts
     steps:
@@ -188,30 +152,17 @@ jobs:
           node-version: 14.x
       - run: npm ci
       - run: npm start &
-      - run: node utils/cleanupDBs.js
       - run: npm run wait-for-server
       - name: ${{ matrix['test-file'] }}
-        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
+        run: |
+          # Run tests up to three times
+          for i in $(seq 1 3); do npx jest -c ./jest.config.playwright.js ${{ matrix['test-file'] }} && s=0 && break || s=$? && sleep 1; done; (exit $s)
         shell: bash
       - uses: actions/upload-artifact@v2
         if: failure()
         with:
           name: screenshots
-          path: failed-*
+          path: screenshots/
-  cleanupaccounts:
-    name: "Cleanup Test Database Accounts"
-    runs-on: ubuntu-latest
-    env:
-      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-    steps:
-      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
-        with:
-          node-version: 14.x
-      - run: npm ci
-      - run: node utils/cleanupDBs.js
   nuget:
     name: Publish Nuget
     if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')

.github/workflows/cleanup.yml

@@ -0,0 +1,28 @@
+# This is a basic workflow to help you get started with Actions
+
+name: Cleanup End to End Account Resources
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+  schedule:
+    # Once every hour
+    - cron: "0 * * * *"
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  cleanupaccounts:
+    name: "Cleanup Test Database Accounts"
+    runs-on: ubuntu-latest
+    env:
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/cleanupDBs.js

.gitignore

@@ -15,3 +15,5 @@ Contracts/*
 .cache/
 .env
 failure.png
+screenshots/*
+GettingStarted-ignore*.ipynb

CODING_GUIDELINES.md

@@ -153,7 +153,7 @@ Cosmos Explorer has been under constant development for over 5 years. As a resul
 
 ✅ DO
 
-- Use [Puppeteer](https://developers.google.com/web/tools/puppeteer) and [Jest](https://jestjs.io/)
+- Use [Playwright](https://github.com/microsoft/playwright) and [Jest](https://jestjs.io/)
 - Write or modify an existing E2E test that covers the primary use case of any major feature.
   - Use caution. Do not try to cover every case. End to End tests can be slow and brittle.
 

jest-playwright.config.js

@@ -0,0 +1,13 @@
+const isCI = require("is-ci");
+
+module.exports = {
+  exitOnPageError: false,
+  launchOptions: {
+    headless: isCI,
+    slowMo: 10,
+    timeout: 60000,
+  },
+  contextOptions: {
+    ignoreHTTPSErrors: true,
+  },
+};

jest-puppeteer.config.js

@@ -1,12 +0,0 @@
-const isCI = require("is-ci");
-
-module.exports = {
-  launch: {
-    headless: isCI,
-    slowMo: 55,
-    defaultViewport: null,
-    ignoreHTTPSErrors: true,
-    args: ["--disable-web-security"],
-    exitOnPageError: false,
-  },
-};

jest.config.e2e.js

@@ -1,5 +0,0 @@
-module.exports = {
-  preset: "jest-puppeteer",
-  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"],
-};

jest.config.playwright.js

@@ -0,0 +1,7 @@
+module.exports = {
+  preset: "jest-playwright-preset",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+  testEnvironment: "./test/playwrightEnv.js",
+  setupFilesAfterEnv: ["expect-playwright"],
+};

package.json

@@ -65,6 +65,7 @@
     "i18next": "19.8.4",
     "i18next-browser-languagedetector": "6.0.1",
     "i18next-http-backend": "1.0.23",
+    "iframe-resizer-react": "1.1.0",
     "immutable": "4.0.0-rc.12",
     "is-ci": "2.0.0",
     "jquery": "3.5.1",
@@ -78,6 +79,7 @@
     "office-ui-fabric-react": "7.164.2",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
+    "post-robot": "10.0.42",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -111,15 +113,12 @@
     "@types/d3": "5.9.2",
     "@types/enzyme": "3.10.7",
     "@types/enzyme-adapter-react-16": "1.0.6",
-    "@types/expect-puppeteer": "4.4.5",
     "@types/hasher": "0.0.31",
     "@types/jest": "26.0.20",
-    "@types/jest-environment-puppeteer": "4.4.1",
     "@types/memoize-one": "4.1.1",
     "@types/node": "12.11.1",
+    "@types/post-robot": "10.0.1",
     "@types/promise.prototype.finally": "2.0.3",
-    "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "5.4.3",
     "@types/q": "1.5.1",
     "@types/react": "17.0.3",
     "@types/react-dom": "17.0.3",
@@ -131,7 +130,6 @@
     "@types/underscore": "1.7.36",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
-    "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
@@ -146,16 +144,18 @@
     "eslint-plugin-no-null": "1.0.2",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "eslint-plugin-react-hooks": "4.2.0",
+    "expect-playwright": "0.3.3",
     "expose-loader": "0.7.5",
     "fast-glob": "3.2.5",
     "file-loader": "2.0.0",
     "fs-extra": "7.0.0",
+    "html-inline-css-webpack-plugin": "1.11.0",
     "html-loader": "0.5.5",
     "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "4.5.2",
     "jest": "25.5.4",
     "jest-canvas-mock": "2.1.0",
-    "jest-puppeteer": "4.4.0",
+    "jest-playwright-preset": "1.5.1",
     "jest-trx-results-processor": "0.0.7",
     "less": "3.8.1",
     "less-loader": "4.1.0",
@@ -163,16 +163,17 @@
     "mini-css-extract-plugin": "0.4.3",
     "monaco-editor-webpack-plugin": "1.7.0",
     "node-fetch": "2.6.1",
+    "playwright": "1.10.0",
     "prettier": "2.2.1",
-    "puppeteer": "8.0.0",
     "raw-loader": "0.5.1",
+    "react-dev-utils": "11.0.4",
     "rimraf": "3.0.0",
     "sinon": "3.2.1",
     "style-loader": "0.23.0",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.2.3",
+    "typescript": "4.2.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",

preview/index.js

@@ -57,8 +57,6 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
 
       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);
     })

src/CellOutputViewer/CellOutputViewer.tsx

@@ -0,0 +1,68 @@
+import { createImmutableOutput, JSONObject, OnDiskOutput } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { KernelOutputError } from "@nteract/outputs/lib/components/kernel-output-error";
+import { Output } from "@nteract/outputs/lib/components/output";
+import { StreamText } from "@nteract/outputs/lib/components/stream-text";
+import { ContentRef } from "@nteract/types";
+import "bootstrap/dist/css/bootstrap.css";
+import postRobot from "post-robot";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import "../../externals/iframeResizer.contentWindow.min.js"; // Required for iFrameResizer to work
+import "../Explorer/Notebook/NotebookRenderer/base.css";
+import "../Explorer/Notebook/NotebookRenderer/default.css";
+import { TransformMedia } from "./TransformMedia";
+
+export interface CellOutputViewerProps {
+  id: string;
+  contentRef: ContentRef;
+  hidden: boolean;
+  expanded: boolean;
+  outputs: OnDiskOutput[];
+  onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => void;
+}
+
+const onInit = async () => {
+  postRobot.on(
+    "props",
+    {
+      window: window.parent,
+      domain: window.location.origin,
+    },
+    (event) => {
+      // Typescript definition for event is wrong. So read props by casting to <any>
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const props = (event as any).data as CellOutputViewerProps;
+      const outputs = (
+        <div
+          data-iframe-height
+          className={`nteract-cell-outputs ${props.hidden ? "hidden" : ""} ${props.expanded ? "expanded" : ""}`}
+        >
+          {props.outputs?.map((output, index) => (
+            <Output output={createImmutableOutput(output)} key={index}>
+              <TransformMedia
+                output_type={"display_data"}
+                id={props.id}
+                contentRef={props.contentRef}
+                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+              />
+              <TransformMedia
+                output_type={"execute_result"}
+                id={props.id}
+                contentRef={props.contentRef}
+                onMetadataChange={(metadata, mediaType) => props.onMetadataChange(metadata, mediaType, index)}
+              />
+              <KernelOutputError />
+              <StreamText />
+            </Output>
+          ))}
+        </div>
+      );
+
+      ReactDOM.render(outputs, document.getElementById("cellOutput"));
+    }
+  );
+};
+
+// Entry point
+window.addEventListener("load", onInit);

src/CellOutputViewer/TransformMedia.tsx

@@ -0,0 +1,138 @@
+import { ImmutableDisplayData, ImmutableExecuteResult, JSONObject } from "@nteract/commutable";
+// import outputs individually to avoid increasing the bundle size
+import { HTML } from "@nteract/outputs/lib/components/media/html";
+import { Image } from "@nteract/outputs/lib/components/media/image";
+import { JavaScript } from "@nteract/outputs/lib/components/media/javascript";
+import { Json } from "@nteract/outputs/lib/components/media/json";
+import { LaTeX } from "@nteract/outputs/lib/components/media/latex";
+import { Plain } from "@nteract/outputs/lib/components/media/plain";
+import { SVG } from "@nteract/outputs/lib/components/media/svg";
+import { ContentRef } from "@nteract/types";
+import React, { Suspense } from "react";
+
+const EmptyTransform = (): JSX.Element => <></>;
+
+const displayOrder = [
+  "application/vnd.jupyter.widget-view+json",
+  "application/vnd.vega.v5+json",
+  "application/vnd.vega.v4+json",
+  "application/vnd.vega.v3+json",
+  "application/vnd.vega.v2+json",
+  "application/vnd.vegalite.v4+json",
+  "application/vnd.vegalite.v3+json",
+  "application/vnd.vegalite.v2+json",
+  "application/vnd.vegalite.v1+json",
+  "application/geo+json",
+  "application/vnd.plotly.v1+json",
+  "text/vnd.plotly.v1+html",
+  "application/x-nteract-model-debug+json",
+  "application/vnd.dataresource+json",
+  "application/vdom.v1+json",
+  "application/json",
+  "application/javascript",
+  "text/html",
+  "text/markdown",
+  "text/latex",
+  "image/svg+xml",
+  "image/gif",
+  "image/png",
+  "image/jpeg",
+  "text/plain",
+];
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const transformsById = new Map<string, React.ComponentType<any>>([
+  ["text/vnd.plotly.v1+html", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/vnd.plotly.v1+json", React.lazy(() => import("@nteract/transform-plotly"))],
+  ["application/geo+json", EmptyTransform], // TODO: The geojson transform will likely need some work because of the basemap URL(s)
+  ["application/x-nteract-model-debug+json", React.lazy(() => import("@nteract/transform-model-debug"))],
+  ["application/vnd.dataresource+json", React.lazy(() => import("@nteract/data-explorer"))],
+  ["application/vnd.jupyter.widget-view+json", React.lazy(() => import("./transforms/WidgetDisplay"))],
+  ["application/vnd.vegalite.v1+json", React.lazy(() => import("./transforms/VegaLite1"))],
+  ["application/vnd.vegalite.v2+json", React.lazy(() => import("./transforms/VegaLite2"))],
+  ["application/vnd.vegalite.v3+json", React.lazy(() => import("./transforms/VegaLite3"))],
+  ["application/vnd.vegalite.v4+json", React.lazy(() => import("./transforms/VegaLite4"))],
+  ["application/vnd.vega.v2+json", React.lazy(() => import("./transforms/Vega2"))],
+  ["application/vnd.vega.v3+json", React.lazy(() => import("./transforms/Vega3"))],
+  ["application/vnd.vega.v4+json", React.lazy(() => import("./transforms/Vega4"))],
+  ["application/vnd.vega.v5+json", React.lazy(() => import("./transforms/Vega5"))],
+  ["application/vdom.v1+json", React.lazy(() => import("@nteract/transform-vdom"))],
+  ["application/json", Json],
+  ["application/javascript", JavaScript],
+  ["text/html", HTML],
+  ["text/markdown", React.lazy(() => import("@nteract/outputs/lib/components/media/markdown"))], // Markdown increases the bundle size so lazy load it
+  ["text/latex", LaTeX],
+  ["image/svg+xml", SVG],
+  ["image/gif", Image],
+  ["image/png", Image],
+  ["image/jpeg", Image],
+  ["text/plain", Plain],
+]);
+
+interface TransformMediaProps {
+  output_type: string;
+  id: string;
+  contentRef: ContentRef;
+  output?: ImmutableDisplayData | ImmutableExecuteResult;
+  onMetadataChange: (metadata: JSONObject, mediaType: string) => void;
+}
+
+export const TransformMedia = (props: TransformMediaProps): JSX.Element => {
+  const { Media, mediaType, data, metadata } = getMediaInfo(props);
+
+  // If we had no valid result, return an empty output
+  if (!mediaType || !data) {
+    return <></>;
+  }
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Media
+        onMetadataChange={props.onMetadataChange}
+        data={data}
+        metadata={metadata}
+        contentRef={props.contentRef}
+        id={props.id}
+      />
+    </Suspense>
+  );
+};
+
+const getMediaInfo = (props: TransformMediaProps) => {
+  const { output, output_type } = props;
+  // This component should only be used with display data and execute result
+  if (!output || !(output_type === "display_data" || output_type === "execute_result")) {
+    console.warn("connected transform media managed to get a non media bundle output");
+    return {
+      Media: EmptyTransform,
+    };
+  }
+
+  // Find the first mediaType in the output data that we support with a handler
+  const mediaType = displayOrder.find(
+    (key) =>
+      Object.prototype.hasOwnProperty.call(output.data, key) &&
+      (Object.prototype.hasOwnProperty.call(transformsById, key) || transformsById.get(key))
+  );
+
+  if (mediaType) {
+    const metadata = output.metadata.get(mediaType);
+    const data = output.data[mediaType];
+
+    const Media = transformsById.get(mediaType);
+    return {
+      Media,
+      mediaType,
+      data,
+      metadata,
+    };
+  }
+
+  return {
+    Media: EmptyTransform,
+    mediaType,
+    output,
+  };
+};
+
+export default TransformMedia;

src/CellOutputViewer/cellOutputViewer.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0" />
+    <title>Cell Output Viewer</title>
+  </head>
+
+  <body>
+    <div class="cellOutput" id="cellOutput"></div>
+  </body>
+</html>

src/CellOutputViewer/transforms/Vega2.ts

@@ -0,0 +1 @@
+export { Vega2 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega3.ts

@@ -0,0 +1 @@
+export { Vega3 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega4.ts

@@ -0,0 +1 @@
+export { Vega4 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/Vega5.ts

@@ -0,0 +1 @@
+export { Vega5 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite1.ts

@@ -0,0 +1 @@
+export { VegaLite1 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite2.ts

@@ -0,0 +1 @@
+export { VegaLite2 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite3.ts

@@ -0,0 +1 @@
+export { VegaLite3 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/VegaLite4.ts

@@ -0,0 +1 @@
+export { VegaLite4 as default } from "@nteract/transform-vega";

src/CellOutputViewer/transforms/WidgetDisplay.ts

@@ -0,0 +1 @@
+export { WidgetDisplay as default } from "@nteract/jupyter-widgets";

src/Common/EntityValue.tsx

@@ -0,0 +1,61 @@
+import { DatePicker, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent } from "react";
+
+export interface TableEntityProps {
+  entityValueLabel?: string;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  entityTimeValue: string;
+  entityValueType: string;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const EntityValue: FunctionComponent<TableEntityProps> = ({
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  isEntityTypeDate,
+  entityTimeValue,
+  entityValueType,
+  onEntityValueChange,
+  onSelectDate,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  if (isEntityTypeDate) {
+    return (
+      <>
+        <DatePicker
+          className="addEntityDatePicker"
+          placeholder={entityValuePlaceholder}
+          value={entityValue && new Date(entityValue)}
+          ariaLabel={entityValuePlaceholder}
+          onSelectDate={onSelectDate}
+        />
+        <TextField
+          label={entityValueLabel && entityValueLabel}
+          id="entityTimeId"
+          autoFocus
+          type="time"
+          value={entityTimeValue}
+          onChange={onEntityTimeValueChange}
+        />
+      </>
+    );
+  }
+
+  return (
+    <TextField
+      label={entityValueLabel && entityValueLabel}
+      className="addEntityTextField"
+      id="entityValueId"
+      autoFocus
+      type={entityValueType}
+      placeholder={entityValuePlaceholder}
+      value={typeof entityValue === "string" && entityValue}
+      onChange={onEntityValueChange}
+    />
+  );
+};

src/Common/MongoProxyClient.ts

@@ -5,11 +5,10 @@ import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
-import { ConsoleDataType } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
 import DocumentId from "../Explorer/Tree/DocumentId";
-import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { userContext } from "../UserContext";
+import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";
 
@@ -348,10 +347,7 @@ export function getEndpoint(): string {
 async function errorHandling(response: Response, action: string, params: unknown): Promise<void> {
   const errorMessage = await response.text();
   // Log the error where the user can see it
-  NotificationConsoleUtils.logConsoleMessage(
+  logConsoleError(`Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`);
-    ConsoleDataType.Error,
-    `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
-  );
   if (response.status === HttpStatusCodes.Forbidden) {
     sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;

src/Common/TableEntity.tsx

@@ -0,0 +1,136 @@
+import {
+  Dropdown,
+  IDropdownOption,
+  IDropdownStyles,
+  IImageProps,
+  Image,
+  IStackTokens,
+  Stack,
+  TextField,
+  TooltipHost,
+} from "office-ui-fabric-react";
+import React, { FunctionComponent } from "react";
+import DeleteIcon from "../../images/delete.svg";
+import EditIcon from "../../images/Edit_entity.svg";
+import { CassandraType, TableType } from "../Explorer/Tables/Constants";
+import { userContext } from "../UserContext";
+import { EntityValue } from "./EntityValue";
+
+const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
+
+export interface TableEntityProps {
+  entityTypeLabel?: string;
+  entityPropertyLabel?: string;
+  entityValueLabel?: string;
+  isDeleteOptionVisible: boolean;
+  entityProperty: string;
+  entityPropertyPlaceHolder: string;
+  selectedKey: string | number;
+  entityValuePlaceholder: string;
+  entityValue: string | Date;
+  isEntityTypeDate: boolean;
+  options: { key: string; text: string }[];
+  isPropertyTypeDisable: boolean;
+  entityTimeValue: string;
+  onDeleteEntity?: () => void;
+  onEditEntity?: () => void;
+  onEntityPropertyChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onEntityTypeChange: (event: React.FormEvent<HTMLElement>, selectedParam: IDropdownOption) => void;
+  onEntityValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+  onSelectDate: (date: Date | null | undefined) => void;
+  onEntityTimeValueChange: (event: React.FormEvent<HTMLElement>, newInput?: string) => void;
+}
+
+export const TableEntity: FunctionComponent<TableEntityProps> = ({
+  entityTypeLabel,
+  entityPropertyLabel,
+  isDeleteOptionVisible,
+  entityProperty,
+  selectedKey,
+  entityPropertyPlaceHolder,
+  entityValueLabel,
+  entityValuePlaceholder,
+  entityValue,
+  options,
+  isPropertyTypeDisable,
+  isEntityTypeDate,
+  entityTimeValue,
+  onEditEntity,
+  onDeleteEntity,
+  onEntityPropertyChange,
+  onEntityTypeChange,
+  onEntityValueChange,
+  onSelectDate,
+  onEntityTimeValueChange,
+}: TableEntityProps): JSX.Element => {
+  const imageProps: IImageProps = {
+    width: 16,
+    height: 30,
+    className: entityPropertyLabel ? "addRemoveIconLabel" : "addRemoveIcon",
+  };
+
+  const sectionStackTokens: IStackTokens = { childrenGap: 12 };
+
+  const getEntityValueType = (): string => {
+    const { Int, Smallint, Tinyint } = CassandraType;
+    const { Double, Int32, Int64 } = TableType;
+
+    if (
+      selectedKey === Double ||
+      selectedKey === Int32 ||
+      selectedKey === Int64 ||
+      selectedKey === Int ||
+      selectedKey === Smallint ||
+      selectedKey === Tinyint
+    ) {
+      return "number";
+    }
+    return "string";
+  };
+
+  return (
+    <>
+      <Stack horizontal tokens={sectionStackTokens}>
+        <TextField
+          label={entityPropertyLabel && entityPropertyLabel}
+          id="entityPropertyId"
+          autoFocus
+          disabled={isPropertyTypeDisable}
+          placeholder={entityPropertyPlaceHolder}
+          value={entityProperty}
+          onChange={onEntityPropertyChange}
+          required
+        />
+        <Dropdown
+          label={entityTypeLabel && entityTypeLabel}
+          selectedKey={selectedKey}
+          onChange={onEntityTypeChange}
+          options={options}
+          disabled={isPropertyTypeDisable}
+          id="entityTypeId"
+          styles={dropdownStyles}
+        />
+        <EntityValue
+          entityValueLabel={entityValueLabel}
+          entityValueType={getEntityValueType()}
+          entityValuePlaceholder={entityValuePlaceholder}
+          entityValue={entityValue}
+          isEntityTypeDate={isEntityTypeDate}
+          entityTimeValue={entityTimeValue}
+          onEntityValueChange={onEntityValueChange}
+          onSelectDate={onSelectDate}
+          onEntityTimeValueChange={onEntityTimeValueChange}
+        />
+        <TooltipHost content="Edit property" id="editTooltip">
+          <Image {...imageProps} src={EditIcon} alt="editEntity" id="editEntity" onClick={onEditEntity} />
+        </TooltipHost>
+
+        {isDeleteOptionVisible && userContext.apiType !== "Cassandra" && (
+          <TooltipHost content="Delete property" id="deleteTooltip">
+            <Image {...imageProps} src={DeleteIcon} alt="delete entity" id="deleteEntity" onClick={onDeleteEntity} />
+          </TooltipHost>
+        )}
+      </Stack>
+    </>
+  );
+};

src/Common/Upload/Upload.tsx

@@ -1,8 +1,8 @@
 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 * as Constants from "../Constants";
-import { Tooltip } from "../Tooltip";
+import { Tooltip } from "../Tooltip/Tooltip";
 
 interface UploadProps {
   label: string;

src/Common/dataAccess/bulkCreateDocument.ts

@@ -22,9 +22,12 @@ export const bulkCreateDocument = async (
       );
 
     const successCount = response.filter((r) => r.statusCode === 201).length;
+    const throttledCount = response.filter((r) => r.statusCode === 429).length;
 
     logConsoleInfo(
-      `${documents.length} operations completed for container ${collection.id()}. ${successCount} operations succeeded`
+      `${
+        documents.length
+      } operations completed for container ${collection.id()}. ${successCount} operations succeeded. ${throttledCount} operations throttled`
     );
     return response;
   } catch (error) {

src/ConfigContext.ts

@@ -26,6 +26,7 @@ export interface ConfigContext {
   GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
   hostedExplorerURL: string;
   armAPIVersion?: string;
+  allowedJunoOrigins: string[];
 }
 
 // Default configuration
@@ -53,6 +54,13 @@ let configContext: Readonly<ConfigContext> = {
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
   JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
   BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+  allowedJunoOrigins: [
+    "https://juno-test.documents-dev.windows-int.net",
+    "https://juno-test2.documents-dev.windows-int.net",
+    "https://tools.cosmos.azure.com",
+    "https://tools-staging.cosmos.azure.com",
+    "https://localhost",
+  ],
 };
 
 export function resetConfigContext(): void {
@@ -86,13 +94,18 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
     });
     if (response.status === 200) {
       try {
-        const { allowedParentFrameOrigins, ...externalConfig } = await response.json();
+        const { allowedParentFrameOrigins, allowedJunoOrigins, ...externalConfig } = await response.json();
         Object.assign(configContext, externalConfig);
         if (allowedParentFrameOrigins && allowedParentFrameOrigins.length > 0) {
           updateConfigContext({
             allowedParentFrameOrigins: [...configContext.allowedParentFrameOrigins, ...allowedParentFrameOrigins],
           });
         }
+        if (allowedJunoOrigins && allowedJunoOrigins.length > 0) {
+          updateConfigContext({
+            allowedJunoOrigins: [...configContext.allowedJunoOrigins, ...allowedJunoOrigins],
+          });
+        }
       } catch (error) {
         console.error("Unable to parse json in config file");
         console.error(error);

src/Contracts/ActionContracts.ts

@@ -4,6 +4,7 @@
 export enum TabKind {
   SQLDocuments,
   MongoDocuments,
+  SchemaAnalyzer,
   TableEntities,
   Graph,
   SQLQuery,

src/Contracts/ViewModels.ts

@@ -141,6 +141,7 @@ export interface Collection extends CollectionBase {
   onTableEntitiesClick(): void;
   onGraphDocumentsClick(): void;
   onMongoDBDocumentsClick(): void;
+  onSchemaAnalyzerClick(): void;
   openTab(): void;
 
   onSettingsClick: () => Promise<void>;
@@ -276,7 +277,6 @@ export interface TabOptions {
   tabKind: CollectionTabKind;
   title: string;
   tabPath: string;
-  isActive: ko.Observable<boolean>;
   hashLocation: string;
   onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
   isTabsContentExpanded?: ko.Observable<boolean>;
@@ -367,6 +367,7 @@ export enum CollectionTabKind {
   Schema = 19,
   CollectionSettingsV2 = 20,
   DatabaseSettingsV2 = 21,
+  SchemaAnalyzer = 22,
 }
 
 export enum TerminalKind {

src/Explorer/ComponentRegisterer.test.ts

@@ -8,10 +8,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("input-typeahead")).toBe(true);
   });
 
-  it("should register new-vertex-form component", () => {
-    expect(ko.components.isRegistered("new-vertex-form")).toBe(true);
-  });
-
   it("should register error-display component", () => {
     expect(ko.components.isRegistered("error-display")).toBe(true);
   });
@@ -73,10 +69,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("add-collection-pane")).toBe(true);
   });
 
-  it("should register graph-new-vertex-pane component", () => {
-    expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
-  });
-
   it("should register graph-styling-pane component", () => {
     expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
   });
@@ -85,10 +77,6 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("string-input-pane")).toBe(true);
   });
 
-  it("should register setup-notebooks-pane component", () => {
-    expect(ko.components.isRegistered("setup-notebooks-pane")).toBe(true);
-  });
-
   it("should register dynamic-list component", () => {
     expect(ko.components.isRegistered("dynamic-list")).toBe(true);
   });

src/Explorer/ComponentRegisterer.ts

@@ -7,7 +7,6 @@ import { InputTypeaheadComponent } from "./Controls/InputTypeahead/InputTypeahea
 import { JsonEditorComponent } from "./Controls/JsonEditor/JsonEditorComponent";
 import { ThroughputInputComponentAutoPilotV3 } from "./Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3";
 import { GraphStyleComponent } from "./Graph/GraphStyleComponent/GraphStyleComponent";
-import { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
 import * as PaneComponents from "./Panes/PaneComponents";
 import ConflictsTab from "./Tabs/ConflictsTab";
 import DocumentsTab from "./Tabs/DocumentsTab";
@@ -18,15 +17,14 @@ import NotebookTabV2 from "./Tabs/NotebookV2Tab";
 import NotebookViewerTab from "./Tabs/NotebookViewerTab";
 import QueryTab from "./Tabs/QueryTab";
 import QueryTablesTab from "./Tabs/QueryTablesTab";
+import SchemaAnalyzerTab from "./Tabs/SchemaAnalyzerTab";
 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);
 ko.components.register("error-display", new ErrorDisplayComponent());
 ko.components.register("graph-style", GraphStyleComponent);
 ko.components.register("editor", new EditorComponent());
@@ -34,7 +32,6 @@ ko.components.register("json-editor", new JsonEditorComponent());
 ko.components.register("diff-editor", new DiffEditorComponent());
 ko.components.register("dynamic-list", DynamicListComponent);
 ko.components.register("throughput-input-autopilot-v3", ThroughputInputComponentAutoPilotV3);
-ko.components.register("tabs-manager", { template: TabsManagerTemplate });
 
 // Collection Tabs
 [
@@ -53,17 +50,15 @@ ko.components.register("tabs-manager", { template: TabsManagerTemplate });
   GalleryTab,
   NotebookViewerTab,
   DatabaseSettingsTabV2,
+  SchemaAnalyzerTab,
 ].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));
 
 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 ko.components.register("add-collection-pane", new PaneComponents.AddCollectionPaneComponent());
-
-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("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
 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

@@ -55,7 +55,7 @@ export class ResourceTreeContextMenuButtonFactory {
     selectedCollection: ViewModels.Collection
   ): TreeNodeMenuItem[] {
     const items: TreeNodeMenuItem[] = [];
-    if (userContext.apiType === "SQL" || container.isPreferredApiGraph()) {
+    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
       items.push({
         iconSrc: AddSqlQueryIcon,
         onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
@@ -80,7 +80,7 @@ export class ResourceTreeContextMenuButtonFactory {
       });
     }
 
-    if (userContext.apiType === "SQL" || container.isPreferredApiGraph()) {
+    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
       items.push({
         iconSrc: AddStoredProcedureIcon,
         onClick: () => {
@@ -123,7 +123,7 @@ export class ResourceTreeContextMenuButtonFactory {
     container: Explorer,
     storedProcedure: StoredProcedure
   ): TreeNodeMenuItem[] {
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       return [];
     }
 
@@ -137,7 +137,7 @@ export class ResourceTreeContextMenuButtonFactory {
   }
 
   public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       return [];
     }
 
@@ -154,7 +154,7 @@ export class ResourceTreeContextMenuButtonFactory {
     container: Explorer,
     userDefinedFunction: UserDefinedFunction
   ): TreeNodeMenuItem[] {
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       return [];
     }
 

src/Explorer/Controls/Dialog.tsx

@@ -1,8 +1,3 @@
-import * as React from "react";
-import { Dialog as FluentDialog, DialogType, DialogFooter, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
-import { IButtonProps, PrimaryButton, DefaultButton } from "office-ui-fabric-react/lib/Button";
-import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
-import { Link } from "office-ui-fabric-react/lib/Link";
 import {
   ChoiceGroup,
   FontIcon,
@@ -10,6 +5,11 @@ import {
   IProgressIndicatorProps,
   ProgressIndicator,
 } from "office-ui-fabric-react";
+import { DefaultButton, IButtonProps, PrimaryButton } from "office-ui-fabric-react/lib/Button";
+import { Dialog as FluentDialog, DialogFooter, DialogType, IDialogProps } from "office-ui-fabric-react/lib/Dialog";
+import { Link } from "office-ui-fabric-react/lib/Link";
+import { ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import React, { FunctionComponent } from "react";
 
 export interface TextFieldProps extends ITextFieldProps {
   label: string;
@@ -50,43 +50,52 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";
 
-export class Dialog extends React.Component<DialogProps> {
+export const Dialog: FunctionComponent<DialogProps> = ({
-  constructor(props: DialogProps) {
+  title,
-    super(props);
+  subText,
-  }
+  isModal,
-
+  visible,
-  public render(): JSX.Element {
+  choiceGroupProps,
+  textFieldProps,
+  linkProps,
+  progressIndicatorProps,
+  primaryButtonText,
+  secondaryButtonText,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
+  primaryButtonDisabled,
+  type,
+  showCloseButton,
+  onDismiss,
+}: DialogProps) => {
   const dialogProps: IDialogProps = {
-      hidden: !this.props.visible,
+    hidden: !visible,
     dialogContentProps: {
-        type: this.props.type || DialogType.normal,
+      type: type || DialogType.normal,
-        title: this.props.title,
+      title,
-        subText: this.props.subText,
+      subText,
       styles: {
         title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
         subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
       },
-        showCloseButton: this.props.showCloseButton || false,
+      showCloseButton: showCloseButton || false,
-        onDismiss: this.props.onDismiss,
+      onDismiss,
     },
-      modalProps: { isBlocking: this.props.isModal, isDarkOverlay: false },
+    modalProps: { isBlocking: isModal, isDarkOverlay: false },
     minWidth: DIALOG_MIN_WIDTH,
     maxWidth: DIALOG_MAX_WIDTH,
   };
-    const choiceGroupProps: IChoiceGroupProps = this.props.choiceGroupProps;
+
-    const textFieldProps: ITextFieldProps = this.props.textFieldProps;
-    const linkProps: LinkProps = this.props.linkProps;
-    const progressIndicatorProps: IProgressIndicatorProps = this.props.progressIndicatorProps;
   const primaryButtonProps: IButtonProps = {
-      text: this.props.primaryButtonText,
+    text: primaryButtonText,
-      disabled: this.props.primaryButtonDisabled || false,
+    disabled: primaryButtonDisabled || false,
-      onClick: this.props.onPrimaryButtonClick,
+    onClick: onPrimaryButtonClick,
   };
   const secondaryButtonProps: IButtonProps =
-      this.props.secondaryButtonText && this.props.onSecondaryButtonClick
+    secondaryButtonText && onSecondaryButtonClick
       ? {
-            text: this.props.secondaryButtonText,
+          text: secondaryButtonText,
-            onClick: this.props.onSecondaryButtonClick,
+          onClick: onSecondaryButtonClick,
         }
       : undefined;
 
@@ -106,5 +115,4 @@ export class Dialog extends React.Component<DialogProps> {
       </DialogFooter>
     </FluentDialog>
   );
-  }
+};
-}

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

@@ -5,6 +5,7 @@ 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 { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
 import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import { SettingsComponent, SettingsComponentProps, SettingsComponentState } from "./SettingsComponent";
@@ -38,7 +39,6 @@ describe("SettingsComponent", () => {
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
-      isActive: ko.observable(false),
       onUpdateTabsButtons: undefined,
     }),
   };
@@ -107,7 +107,13 @@ describe("SettingsComponent", () => {
     expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);
 
     const newContainer = new Explorer();
-    newContainer.isPreferredApiCassandra = ko.computed(() => true);
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableCassandra" }],
+        },
+      } as DataModels.DatabaseAccount,
+    });
 
     const newCollection = { ...collection };
     newCollection.container = newContainer;

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -137,7 +137,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
       this.offer = this.collection?.offer();
       this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
       this.shouldShowIndexingPolicyEditor =
-        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();
+        this.container && userContext.apiType !== "Cassandra" && !this.container.isPreferredApiMongoDB();
 
       this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
@@ -299,7 +299,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     this.state.wasAutopilotOriginallySet !== this.state.isAutoPilotSelected;
 
   public shouldShowKeyspaceSharedThroughputMessage = (): boolean =>
-    this.container && this.container.isPreferredApiCassandra() && hasDatabaseSharedThroughput(this.collection);
+    this.container && userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);
 
   public hasConflictResolution = (): boolean =>
     this.container?.databaseAccount &&

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx

@@ -1,6 +1,7 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
+import { DatabaseAccount } from "../../../../Contracts/DataModels";
+import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { ChangeFeedPolicyState, GeospatialConfigType, TtlOff, TtlOn, TtlOnNoDefault, TtlType } from "../SettingsUtils";
 import { collection, container } from "../TestUtils";
@@ -104,8 +105,13 @@ describe("SubSettingsComponent", () => {
 
   it("partitionKey not visible", () => {
     const newContainer = new Explorer();
-
+    updateUserContext({
-    newContainer.isPreferredApiCassandra = ko.computed(() => true);
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableCassandra" }],
+        },
+      } as DatabaseAccount,
+    });
     const props = { ...baseProps, container: newContainer };
     const subSettingsComponent = new SubSettingsComponent(props);
     expect(subSettingsComponent.getPartitionKeyVisible()).toEqual(false);

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

@@ -320,8 +320,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
 
   public getPartitionKeyVisible = (): boolean => {
     if (
-      this.props.container.isPreferredApiCassandra() ||
+      userContext.apiType === "Cassandra" ||
-      this.props.container.isPreferredApiTable() ||
+      userContext.apiType === "Tables" ||
       !this.props.collection.partitionKeyProperty ||
       (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey)
     ) {

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

@@ -177,42 +177,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  AddTableEntityPane {
-                    "addButtonLabel": "Add Property",
-                    "attributeNameLabel": "Property Name",
-                    "attributeValueLabel": "Value",
-                    "canAdd": [Function],
-                    "canApply": [Function],
-                    "container": [Circular],
-                    "dataTypeLabel": "Type",
-                    "displayedAttributes": [Function],
-                    "editAttribute": [Function],
-                    "editButtonLabel": "Edit",
-                    "editingProperty": [Function],
-                    "edmTypes": [Function],
-                    "enterRequiredValueLabel": "Enter identifier value.",
-                    "enterValueLabel": "Enter value to keep property.",
-                    "finishEditingAttribute": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "addtableentitypane",
-                    "insertAttribute": [Function],
-                    "isEditing": [Function],
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onAddPropertyKeyDown": [Function],
-                    "onBackButtonKeyDown": [Function],
-                    "onDeletePropertyKeyDown": [Function],
-                    "onEditPropertyKeyDown": [Function],
-                    "onKeyUp": [Function],
-                    "removeAttribute": [Function],
-                    "removeButtonLabel": "Remove",
-                    "scrollId": [Function],
-                    "submitButtonText": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   EditTableEntityPane {
                     "addButtonLabel": "Add Property",
                     "attributeNameLabel": "Property Name",
@@ -247,22 +211,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  NewVertexPane {
-                    "buildString": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "newvertexpane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onMoreDetailsKeyPress": [Function],
-                    "onSubmitCreateCallback": null,
-                    "partitionKeyProperty": [Function],
-                    "tempVertexData": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   CassandraAddCollectionPane {
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
@@ -324,20 +272,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  SetupNotebooksPane {
-                    "container": [Circular],
-                    "description": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "setupnotebookspane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onCompleteSetupClick": [Function],
-                    "onCompleteSetupKeyPress": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                 ],
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
@@ -467,42 +401,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
-                "addTableEntityPane": AddTableEntityPane {
-                  "addButtonLabel": "Add Property",
-                  "attributeNameLabel": "Property Name",
-                  "attributeValueLabel": "Value",
-                  "canAdd": [Function],
-                  "canApply": [Function],
-                  "container": [Circular],
-                  "dataTypeLabel": "Type",
-                  "displayedAttributes": [Function],
-                  "editAttribute": [Function],
-                  "editButtonLabel": "Edit",
-                  "editingProperty": [Function],
-                  "edmTypes": [Function],
-                  "enterRequiredValueLabel": "Enter identifier value.",
-                  "enterValueLabel": "Enter value to keep property.",
-                  "finishEditingAttribute": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "addtableentitypane",
-                  "insertAttribute": [Function],
-                  "isEditing": [Function],
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddPropertyKeyDown": [Function],
-                  "onBackButtonKeyDown": [Function],
-                  "onDeletePropertyKeyDown": [Function],
-                  "onEditPropertyKeyDown": [Function],
-                  "onKeyUp": [Function],
-                  "removeAttribute": [Function],
-                  "removeButtonLabel": "Remove",
-                  "scrollId": [Function],
-                  "submitButtonText": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
@@ -638,7 +536,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
-                "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGitHubPaneEnabled": [Function],
@@ -647,10 +544,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isPreferredApiCassandra": [Function],
-                "isPreferredApiGraph": [Function],
                 "isPreferredApiMongoDB": [Function],
-                "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -661,22 +555,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
                 "memoryUsageInfo": [Function],
-                "newVertexPane": NewVertexPane {
-                  "buildString": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "newvertexpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "onSubmitCreateCallback": null,
-                  "partitionKeyProperty": [Function],
-                  "tempVertexData": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -724,20 +602,6 @@ exports[`SettingsComponent renders 1`] = `
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
-                "setupNotebooksPane": SetupNotebooksPane {
-                  "container": [Circular],
-                  "description": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "setupnotebookspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onCompleteSetupClick": [Function],
-                  "onCompleteSetupKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
                 "splitter": Splitter {
@@ -941,42 +805,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                AddTableEntityPane {
-                  "addButtonLabel": "Add Property",
-                  "attributeNameLabel": "Property Name",
-                  "attributeValueLabel": "Value",
-                  "canAdd": [Function],
-                  "canApply": [Function],
-                  "container": [Circular],
-                  "dataTypeLabel": "Type",
-                  "displayedAttributes": [Function],
-                  "editAttribute": [Function],
-                  "editButtonLabel": "Edit",
-                  "editingProperty": [Function],
-                  "edmTypes": [Function],
-                  "enterRequiredValueLabel": "Enter identifier value.",
-                  "enterValueLabel": "Enter value to keep property.",
-                  "finishEditingAttribute": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "addtableentitypane",
-                  "insertAttribute": [Function],
-                  "isEditing": [Function],
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddPropertyKeyDown": [Function],
-                  "onBackButtonKeyDown": [Function],
-                  "onDeletePropertyKeyDown": [Function],
-                  "onEditPropertyKeyDown": [Function],
-                  "onKeyUp": [Function],
-                  "removeAttribute": [Function],
-                  "removeButtonLabel": "Remove",
-                  "scrollId": [Function],
-                  "submitButtonText": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -1011,22 +839,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                NewVertexPane {
-                  "buildString": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "newvertexpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "onSubmitCreateCallback": null,
-                  "partitionKeyProperty": [Function],
-                  "tempVertexData": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 CassandraAddCollectionPane {
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
@@ -1088,20 +900,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                SetupNotebooksPane {
-                  "container": [Circular],
-                  "description": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "setupnotebookspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onCompleteSetupClick": [Function],
-                  "onCompleteSetupKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
               ],
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
@@ -1231,42 +1029,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
-              "addTableEntityPane": AddTableEntityPane {
-                "addButtonLabel": "Add Property",
-                "attributeNameLabel": "Property Name",
-                "attributeValueLabel": "Value",
-                "canAdd": [Function],
-                "canApply": [Function],
-                "container": [Circular],
-                "dataTypeLabel": "Type",
-                "displayedAttributes": [Function],
-                "editAttribute": [Function],
-                "editButtonLabel": "Edit",
-                "editingProperty": [Function],
-                "edmTypes": [Function],
-                "enterRequiredValueLabel": "Enter identifier value.",
-                "enterValueLabel": "Enter value to keep property.",
-                "finishEditingAttribute": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "addtableentitypane",
-                "insertAttribute": [Function],
-                "isEditing": [Function],
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onAddPropertyKeyDown": [Function],
-                "onBackButtonKeyDown": [Function],
-                "onDeletePropertyKeyDown": [Function],
-                "onEditPropertyKeyDown": [Function],
-                "onKeyUp": [Function],
-                "removeAttribute": [Function],
-                "removeButtonLabel": "Remove",
-                "scrollId": [Function],
-                "submitButtonText": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
@@ -1402,7 +1164,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
               "isAutoscaleDefaultEnabled": [Function],
-              "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGitHubPaneEnabled": [Function],
@@ -1411,10 +1172,7 @@ exports[`SettingsComponent renders 1`] = `
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isPreferredApiCassandra": [Function],
-              "isPreferredApiGraph": [Function],
               "isPreferredApiMongoDB": [Function],
-              "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -1425,22 +1183,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
               "memoryUsageInfo": [Function],
-              "newVertexPane": NewVertexPane {
-                "buildString": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "newvertexpane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "onSubmitCreateCallback": null,
-                "partitionKeyProperty": [Function],
-                "tempVertexData": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
               "onRefreshDatabasesKeyPress": [Function],
@@ -1488,20 +1230,6 @@ exports[`SettingsComponent renders 1`] = `
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,
-              "setupNotebooksPane": SetupNotebooksPane {
-                "container": [Circular],
-                "description": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "setupnotebookspane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onCompleteSetupClick": [Function],
-                "onCompleteSetupKeyPress": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
               "splitter": Splitter {
@@ -1718,42 +1446,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  AddTableEntityPane {
-                    "addButtonLabel": "Add Property",
-                    "attributeNameLabel": "Property Name",
-                    "attributeValueLabel": "Value",
-                    "canAdd": [Function],
-                    "canApply": [Function],
-                    "container": [Circular],
-                    "dataTypeLabel": "Type",
-                    "displayedAttributes": [Function],
-                    "editAttribute": [Function],
-                    "editButtonLabel": "Edit",
-                    "editingProperty": [Function],
-                    "edmTypes": [Function],
-                    "enterRequiredValueLabel": "Enter identifier value.",
-                    "enterValueLabel": "Enter value to keep property.",
-                    "finishEditingAttribute": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "addtableentitypane",
-                    "insertAttribute": [Function],
-                    "isEditing": [Function],
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onAddPropertyKeyDown": [Function],
-                    "onBackButtonKeyDown": [Function],
-                    "onDeletePropertyKeyDown": [Function],
-                    "onEditPropertyKeyDown": [Function],
-                    "onKeyUp": [Function],
-                    "removeAttribute": [Function],
-                    "removeButtonLabel": "Remove",
-                    "scrollId": [Function],
-                    "submitButtonText": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   EditTableEntityPane {
                     "addButtonLabel": "Add Property",
                     "attributeNameLabel": "Property Name",
@@ -1788,22 +1480,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  NewVertexPane {
-                    "buildString": [Function],
-                    "container": [Circular],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "newvertexpane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onMoreDetailsKeyPress": [Function],
-                    "onSubmitCreateCallback": null,
-                    "partitionKeyProperty": [Function],
-                    "tempVertexData": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                   CassandraAddCollectionPane {
                     "autoPilotUsageCost": [Function],
                     "canConfigureThroughput": [Function],
@@ -1865,20 +1541,6 @@ exports[`SettingsComponent renders 1`] = `
                     "title": [Function],
                     "visible": [Function],
                   },
-                  SetupNotebooksPane {
-                    "container": [Circular],
-                    "description": [Function],
-                    "firstFieldHasFocus": [Function],
-                    "formErrors": [Function],
-                    "formErrorsDetails": [Function],
-                    "id": "setupnotebookspane",
-                    "isExecuting": [Function],
-                    "isTemplateReady": [Function],
-                    "onCompleteSetupClick": [Function],
-                    "onCompleteSetupKeyPress": [Function],
-                    "title": [Function],
-                    "visible": [Function],
-                  },
                 ],
                 "_refreshSparkEnabledStateForAccount": [Function],
                 "_resetNotebookWorkspace": [Function],
@@ -2008,42 +1670,6 @@ exports[`SettingsComponent renders 1`] = `
                   "visible": [Function],
                 },
                 "addDatabaseText": [Function],
-                "addTableEntityPane": AddTableEntityPane {
-                  "addButtonLabel": "Add Property",
-                  "attributeNameLabel": "Property Name",
-                  "attributeValueLabel": "Value",
-                  "canAdd": [Function],
-                  "canApply": [Function],
-                  "container": [Circular],
-                  "dataTypeLabel": "Type",
-                  "displayedAttributes": [Function],
-                  "editAttribute": [Function],
-                  "editButtonLabel": "Edit",
-                  "editingProperty": [Function],
-                  "edmTypes": [Function],
-                  "enterRequiredValueLabel": "Enter identifier value.",
-                  "enterValueLabel": "Enter value to keep property.",
-                  "finishEditingAttribute": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "addtableentitypane",
-                  "insertAttribute": [Function],
-                  "isEditing": [Function],
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddPropertyKeyDown": [Function],
-                  "onBackButtonKeyDown": [Function],
-                  "onDeletePropertyKeyDown": [Function],
-                  "onEditPropertyKeyDown": [Function],
-                  "onKeyUp": [Function],
-                  "removeAttribute": [Function],
-                  "removeButtonLabel": "Remove",
-                  "scrollId": [Function],
-                  "submitButtonText": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "arcadiaToken": [Function],
                 "canExceedMaximumValue": [Function],
                 "canSaveQueries": [Function],
@@ -2179,7 +1805,6 @@ exports[`SettingsComponent renders 1`] = `
                 "hasStorageAnalyticsAfecFeature": [Function],
                 "isAccountReady": [Function],
                 "isAutoscaleDefaultEnabled": [Function],
-                "isCopyNotebookPaneEnabled": [Function],
                 "isEnableMongoCapabilityPresent": [Function],
                 "isFixedCollectionWithSharedThroughputSupported": [Function],
                 "isGitHubPaneEnabled": [Function],
@@ -2188,10 +1813,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isMongoIndexingEnabled": [Function],
                 "isNotebookEnabled": [Function],
                 "isNotebooksEnabledForAccount": [Function],
-                "isPreferredApiCassandra": [Function],
-                "isPreferredApiGraph": [Function],
                 "isPreferredApiMongoDB": [Function],
-                "isPreferredApiTable": [Function],
                 "isPublishNotebookPaneEnabled": [Function],
                 "isResourceTokenCollectionNodeSelected": [Function],
                 "isRightPanelV2Enabled": [Function],
@@ -2202,22 +1824,6 @@ exports[`SettingsComponent renders 1`] = `
                 "isSynapseLinkUpdating": [Function],
                 "isTabsContentExpanded": [Function],
                 "memoryUsageInfo": [Function],
-                "newVertexPane": NewVertexPane {
-                  "buildString": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "newvertexpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "onSubmitCreateCallback": null,
-                  "partitionKeyProperty": [Function],
-                  "tempVertexData": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "notebookBasePath": [Function],
                 "notebookServerInfo": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
@@ -2265,20 +1871,6 @@ exports[`SettingsComponent renders 1`] = `
                 "setInProgressConsoleDataIdToBeDeleted": undefined,
                 "setIsNotificationConsoleExpanded": undefined,
                 "setNotificationConsoleData": undefined,
-                "setupNotebooksPane": SetupNotebooksPane {
-                  "container": [Circular],
-                  "description": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "setupnotebookspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onCompleteSetupClick": [Function],
-                  "onCompleteSetupKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 "signInAad": [Function],
                 "sparkClusterConnectionInfo": [Function],
                 "splitter": Splitter {
@@ -2482,42 +2074,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                AddTableEntityPane {
-                  "addButtonLabel": "Add Property",
-                  "attributeNameLabel": "Property Name",
-                  "attributeValueLabel": "Value",
-                  "canAdd": [Function],
-                  "canApply": [Function],
-                  "container": [Circular],
-                  "dataTypeLabel": "Type",
-                  "displayedAttributes": [Function],
-                  "editAttribute": [Function],
-                  "editButtonLabel": "Edit",
-                  "editingProperty": [Function],
-                  "edmTypes": [Function],
-                  "enterRequiredValueLabel": "Enter identifier value.",
-                  "enterValueLabel": "Enter value to keep property.",
-                  "finishEditingAttribute": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "addtableentitypane",
-                  "insertAttribute": [Function],
-                  "isEditing": [Function],
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onAddPropertyKeyDown": [Function],
-                  "onBackButtonKeyDown": [Function],
-                  "onDeletePropertyKeyDown": [Function],
-                  "onEditPropertyKeyDown": [Function],
-                  "onKeyUp": [Function],
-                  "removeAttribute": [Function],
-                  "removeButtonLabel": "Remove",
-                  "scrollId": [Function],
-                  "submitButtonText": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 EditTableEntityPane {
                   "addButtonLabel": "Add Property",
                   "attributeNameLabel": "Property Name",
@@ -2552,22 +2108,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                NewVertexPane {
-                  "buildString": [Function],
-                  "container": [Circular],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "newvertexpane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onMoreDetailsKeyPress": [Function],
-                  "onSubmitCreateCallback": null,
-                  "partitionKeyProperty": [Function],
-                  "tempVertexData": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
                 CassandraAddCollectionPane {
                   "autoPilotUsageCost": [Function],
                   "canConfigureThroughput": [Function],
@@ -2629,20 +2169,6 @@ exports[`SettingsComponent renders 1`] = `
                   "title": [Function],
                   "visible": [Function],
                 },
-                SetupNotebooksPane {
-                  "container": [Circular],
-                  "description": [Function],
-                  "firstFieldHasFocus": [Function],
-                  "formErrors": [Function],
-                  "formErrorsDetails": [Function],
-                  "id": "setupnotebookspane",
-                  "isExecuting": [Function],
-                  "isTemplateReady": [Function],
-                  "onCompleteSetupClick": [Function],
-                  "onCompleteSetupKeyPress": [Function],
-                  "title": [Function],
-                  "visible": [Function],
-                },
               ],
               "_refreshSparkEnabledStateForAccount": [Function],
               "_resetNotebookWorkspace": [Function],
@@ -2772,42 +2298,6 @@ exports[`SettingsComponent renders 1`] = `
                 "visible": [Function],
               },
               "addDatabaseText": [Function],
-              "addTableEntityPane": AddTableEntityPane {
-                "addButtonLabel": "Add Property",
-                "attributeNameLabel": "Property Name",
-                "attributeValueLabel": "Value",
-                "canAdd": [Function],
-                "canApply": [Function],
-                "container": [Circular],
-                "dataTypeLabel": "Type",
-                "displayedAttributes": [Function],
-                "editAttribute": [Function],
-                "editButtonLabel": "Edit",
-                "editingProperty": [Function],
-                "edmTypes": [Function],
-                "enterRequiredValueLabel": "Enter identifier value.",
-                "enterValueLabel": "Enter value to keep property.",
-                "finishEditingAttribute": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "addtableentitypane",
-                "insertAttribute": [Function],
-                "isEditing": [Function],
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onAddPropertyKeyDown": [Function],
-                "onBackButtonKeyDown": [Function],
-                "onDeletePropertyKeyDown": [Function],
-                "onEditPropertyKeyDown": [Function],
-                "onKeyUp": [Function],
-                "removeAttribute": [Function],
-                "removeButtonLabel": "Remove",
-                "scrollId": [Function],
-                "submitButtonText": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "arcadiaToken": [Function],
               "canExceedMaximumValue": [Function],
               "canSaveQueries": [Function],
@@ -2943,7 +2433,6 @@ exports[`SettingsComponent renders 1`] = `
               "hasStorageAnalyticsAfecFeature": [Function],
               "isAccountReady": [Function],
               "isAutoscaleDefaultEnabled": [Function],
-              "isCopyNotebookPaneEnabled": [Function],
               "isEnableMongoCapabilityPresent": [Function],
               "isFixedCollectionWithSharedThroughputSupported": [Function],
               "isGitHubPaneEnabled": [Function],
@@ -2952,10 +2441,7 @@ exports[`SettingsComponent renders 1`] = `
               "isMongoIndexingEnabled": [Function],
               "isNotebookEnabled": [Function],
               "isNotebooksEnabledForAccount": [Function],
-              "isPreferredApiCassandra": [Function],
-              "isPreferredApiGraph": [Function],
               "isPreferredApiMongoDB": [Function],
-              "isPreferredApiTable": [Function],
               "isPublishNotebookPaneEnabled": [Function],
               "isResourceTokenCollectionNodeSelected": [Function],
               "isRightPanelV2Enabled": [Function],
@@ -2966,22 +2452,6 @@ exports[`SettingsComponent renders 1`] = `
               "isSynapseLinkUpdating": [Function],
               "isTabsContentExpanded": [Function],
               "memoryUsageInfo": [Function],
-              "newVertexPane": NewVertexPane {
-                "buildString": [Function],
-                "container": [Circular],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "newvertexpane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onMoreDetailsKeyPress": [Function],
-                "onSubmitCreateCallback": null,
-                "partitionKeyProperty": [Function],
-                "tempVertexData": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "notebookBasePath": [Function],
               "notebookServerInfo": [Function],
               "onRefreshDatabasesKeyPress": [Function],
@@ -3029,20 +2499,6 @@ exports[`SettingsComponent renders 1`] = `
               "setInProgressConsoleDataIdToBeDeleted": undefined,
               "setIsNotificationConsoleExpanded": undefined,
               "setNotificationConsoleData": undefined,
-              "setupNotebooksPane": SetupNotebooksPane {
-                "container": [Circular],
-                "description": [Function],
-                "firstFieldHasFocus": [Function],
-                "formErrors": [Function],
-                "formErrorsDetails": [Function],
-                "id": "setupnotebookspane",
-                "isExecuting": [Function],
-                "isTemplateReady": [Function],
-                "onCompleteSetupClick": [Function],
-                "onCompleteSetupKeyPress": [Function],
-                "title": [Function],
-                "visible": [Function],
-              },
               "signInAad": [Function],
               "sparkClusterConnectionInfo": [Function],
               "splitter": Splitter {

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -14,10 +14,7 @@ describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
     explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
-    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
     explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
-    explorerStub.isPreferredApiTable = ko.computed<boolean>(() => false);
-    explorerStub.isPreferredApiCassandra = ko.computed<boolean>(() => false);
     explorerStub.canExceedMaximumValue = ko.computed<boolean>(() => false);
     explorerStub.findDatabaseWithId = () => database;
     explorerStub.refreshAllDatabases = () => Q.resolve();
@@ -116,7 +113,13 @@ describe("ContainerSampleGenerator", () => {
     collection.databaseId = database.id();
 
     const explorerStub = createExplorerStub(database);
-    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => true);
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableGremlin" }],
+        },
+      } as DatabaseAccount,
+    });
 
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
@@ -156,8 +159,6 @@ describe("ContainerSampleGenerator", () => {
 
   it("should not create any sample for Cassandra API account", async () => {
     const experience = "Sample generation not supported for this API Cassandra";
-    const explorerStub = createExplorerStub(undefined);
-
     updateUserContext({
       databaseAccount: {
         properties: {
@@ -165,6 +166,7 @@ describe("ContainerSampleGenerator", () => {
         },
       } as DatabaseAccount,
     });
+    const explorerStub = createExplorerStub(undefined);
     // Rejects with error that contains experience
     await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -73,7 +73,7 @@ export class ContainerSampleGenerator {
     }
     const promises: Q.Promise<any>[] = [];
 
-    if (this.container.isPreferredApiGraph()) {
+    if (userContext.apiType === "Gremlin") {
       // For Gremlin, all queries are executed sequentially, because some queries might be dependent on other queries
       // (e.g. adding edge requires vertices to be present)
       const queries: string[] = this.sampleDataFile.data;

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,7 @@
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 export class DataSamplesUtil {
@@ -21,18 +20,16 @@ export class DataSamplesUtil {
     if (this.hasContainer(databaseName, containerName, this.container.databases())) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+      logConsoleError(msg);
       return;
     }
 
     await generator
       .createSampleContainerAsync()
-      .catch((error) =>
+      .catch((error) => logConsoleError(`Error creating sample container: ${error}`));
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Error creating sample container: ${error}`)
-      );
     const msg = `The sample ${containerName} in database ${databaseName} has been successfully created.`;
     this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
-    NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
+    logConsoleInfo(msg);
   }
 
   /**
@@ -57,6 +54,6 @@ export class DataSamplesUtil {
   }
 
   public isSampleContainerCreationSupported(): boolean {
-    return userContext.apiType === "SQL" || this.container.isPreferredApiGraph();
+    return userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
   }
 }

src/Explorer/Explorer.tsx

@@ -36,6 +36,7 @@ import { decryptJWTToken, getAuthorizationHeader } from "../Utils/AuthorizationU
 import { stringToBlob } from "../Utils/BlobUtils";
 import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import * as PricingUtils from "../Utils/PricingUtils";
 import * as ComponentRegisterer from "./ComponentRegisterer";
 import { ArcadiaWorkspaceItem } from "./Controls/Arcadia/ArcadiaMenuPicker";
@@ -43,34 +44,35 @@ import { CommandButtonComponentProps } from "./Controls/CommandButton/CommandBut
 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 { ConsoleData } from "./Menus/NotificationConsole/NotificationConsoleComponent";
 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 { BrowseQueriesPanel } from "./Panes/BrowseQueriesPanel";
+import { BrowseQueriesPane } from "./Panes/BrowseQueriesPane/BrowseQueriesPane";
 import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 import { ContextualPaneBase } from "./Panes/ContextualPaneBase";
-import { DeleteCollectionConfirmationPanel } from "./Panes/DeleteCollectionConfirmationPanel";
+import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
 import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
-import { ExecuteSprocParamsPanel } from "./Panes/ExecuteSprocParamsPanel";
+import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
 import GraphStylingPane from "./Panes/GraphStylingPane";
-import { LoadQueryPanel } from "./Panes/LoadQueryPanel";
+import { LoadQueryPane } from "./Panes/LoadQueryPane/LoadQueryPane";
-import NewVertexPane from "./Panes/NewVertexPane";
+import { SaveQueryPane } from "./Panes/SaveQueryPane/SaveQueryPane";
-import { SaveQueryPanel } from "./Panes/SaveQueryPanel";
+import { SettingsPane } from "./Panes/SettingsPane/SettingsPane";
-import { SettingsPane } from "./Panes/SettingsPane";
+import { SetupNoteBooksPanel } from "./Panes/SetupNotebooksPanel/SetupNotebooksPanel";
-import { SetupNotebooksPane } from "./Panes/SetupNotebooksPane";
 import { StringInputPane } from "./Panes/StringInputPane";
-import AddTableEntityPane from "./Panes/Tables/AddTableEntityPane";
+import { AddTableEntityPanel } from "./Panes/Tables/AddTableEntityPanel";
 import EditTableEntityPane from "./Panes/Tables/EditTableEntityPane";
 import { TableQuerySelectPanel } from "./Panes/Tables/TableQuerySelectPanel";
-import { UploadFilePane } from "./Panes/UploadFilePane";
+import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
-import { UploadItemsPane } from "./Panes/UploadItemsPane";
+import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
+import TableListViewModal from "./Tables/DataTable/TableEntityListViewModel";
 import QueryViewModel from "./Tables/QueryBuilder/QueryViewModel";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
 import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
+import QueryTablesTab from "./Tabs/QueryTablesTab";
 import TabsBase from "./Tabs/TabsBase";
 import { TabsManager } from "./Tabs/TabsManager";
 import TerminalTab from "./Tabs/TerminalTab";
@@ -116,26 +118,11 @@ export default class Explorer {
    * Use userContext.apiType instead
    * */
   public defaultExperience: ko.Observable<string>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Cassandra"
-   * */
-  public isPreferredApiCassandra: ko.Computed<boolean>;
   /**
    * @deprecated
    * Compare a string with userContext.apiType instead: userContext.apiType === "Mongo"
    * */
   public isPreferredApiMongoDB: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Gremlin"
-   * */
-  public isPreferredApiGraph: ko.Computed<boolean>;
-  /**
-   * @deprecated
-   * Compare a string with userContext.apiType instead: userContext.apiType === "Tables"
-   * */
-  public isPreferredApiTable: ko.Computed<boolean>;
   public isFixedCollectionWithSharedThroughputSupported: ko.Computed<boolean>;
   /**
    * @deprecated
@@ -186,20 +173,15 @@ export default class Explorer {
   public addDatabasePane: AddDatabasePane;
   public addCollectionPane: AddCollectionPane;
   public graphStylingPane: GraphStylingPane;
-  public addTableEntityPane: AddTableEntityPane;
   public editTableEntityPane: EditTableEntityPane;
-  public newVertexPane: NewVertexPane;
   public cassandraAddCollectionPane: CassandraAddCollectionPane;
   public stringInputPane: StringInputPane;
-  public setupNotebooksPane: SetupNotebooksPane;
   public gitHubReposPane: ContextualPaneBase;
   public publishNotebookPaneAdapter: ReactAdapter;
-  public copyNotebookPaneAdapter: ReactAdapter;
 
   // features
   public isGitHubPaneEnabled: ko.Observable<boolean>;
   public isPublishNotebookPaneEnabled: ko.Observable<boolean>;
-  public isCopyNotebookPaneEnabled: ko.Observable<boolean>;
   public isHostedDataExplorerEnabled: ko.Computed<boolean>;
   public isRightPanelV2Enabled: ko.Computed<boolean>;
   public isMongoIndexingEnabled: ko.Observable<boolean>;
@@ -297,7 +279,6 @@ export default class Explorer {
                 ((await this._containsDefaultNotebookWorkspace(this.databaseAccount())) ||
                   userContext.features.enableNotebooks)
             );
-
             TelemetryProcessor.trace(Action.NotebookEnabled, ActionModifiers.Mark, {
               isNotebookEnabled: this.isNotebookEnabled(),
               dataExplorerArea: Constants.Areas.Notebook,
@@ -350,7 +331,6 @@ export default class Explorer {
     this.isGitHubPaneEnabled = ko.observable<boolean>(false);
     this.isMongoIndexingEnabled = ko.observable<boolean>(false);
     this.isPublishNotebookPaneEnabled = ko.observable<boolean>(false);
-    this.isCopyNotebookPaneEnabled = ko.observable<boolean>(false);
 
     this.canExceedMaximumValue = ko.computed<boolean>(() => userContext.features.canExceedMaximumValue);
 
@@ -414,20 +394,6 @@ export default class Explorer {
       });
     });
 
-    this.isPreferredApiCassandra = ko.computed(() => {
-      const defaultExperience = (this.defaultExperience && this.defaultExperience()) || "";
-      return defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Cassandra.toLowerCase();
-    });
-    this.isPreferredApiGraph = ko.computed(() => {
-      const defaultExperience = (this.defaultExperience && this.defaultExperience()) || "";
-      return defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Graph.toLowerCase();
-    });
-
-    this.isPreferredApiTable = ko.computed(() => {
-      const defaultExperience = (this.defaultExperience && this.defaultExperience()) || "";
-      return defaultExperience.toLowerCase() === Constants.DefaultAccountExperience.Table.toLowerCase();
-    });
-
     this.isFixedCollectionWithSharedThroughputSupported = ko.computed(() => {
       if (userContext.features.enableFixedCollectionWithSharedThroughput) {
         return true;
@@ -486,7 +452,9 @@ export default class Explorer {
 
     this.isHostedDataExplorerEnabled = ko.computed<boolean>(
       () =>
-        configContext.platform === Platform.Portal && !this.isRunningOnNationalCloud() && !this.isPreferredApiGraph()
+        configContext.platform === Platform.Portal &&
+        !this.isRunningOnNationalCloud() &&
+        userContext.apiType !== "Gremlin"
     );
     this.isRightPanelV2Enabled = ko.computed<boolean>(() => userContext.features.enableRightPanelV2);
     this.selectedDatabaseId = ko.computed<string>(() => {
@@ -518,7 +486,7 @@ export default class Explorer {
     });
 
     this.addCollectionPane = new AddCollectionPane({
-      isPreferredApiTable: ko.computed(() => this.isPreferredApiTable()),
+      isPreferredApiTable: ko.computed(() => userContext.apiType === "Tables"),
       id: "addcollectionpane",
       visible: ko.observable<boolean>(false),
 
@@ -532,13 +500,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.addTableEntityPane = new AddTableEntityPane({
-      id: "addtableentitypane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.editTableEntityPane = new EditTableEntityPane({
       id: "edittableentitypane",
       visible: ko.observable<boolean>(false),
@@ -546,13 +507,6 @@ export default class Explorer {
       container: this,
     });
 
-    this.newVertexPane = new NewVertexPane({
-      id: "newvertexpane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.cassandraAddCollectionPane = new CassandraAddCollectionPane({
       id: "cassandraaddcollectionpane",
       visible: ko.observable<boolean>(false),
@@ -567,25 +521,21 @@ export default class Explorer {
       container: this,
     });
 
-    this.setupNotebooksPane = new SetupNotebooksPane({
-      id: "setupnotebookspane",
-      visible: ko.observable<boolean>(false),
-
-      container: this,
-    });
-
     this.tabsManager = params?.tabsManager ?? new TabsManager();
+    this.tabsManager.openedTabs.subscribe((tabs) => {
+      if (tabs.length === 0) {
+        this.selectedNode(undefined);
+        this.onUpdateTabsButtons([]);
+      }
+    });
 
     this._panes = [
       this.addDatabasePane,
       this.addCollectionPane,
       this.graphStylingPane,
-      this.addTableEntityPane,
       this.editTableEntityPane,
-      this.newVertexPane,
       this.cassandraAddCollectionPane,
       this.stringInputPane,
-      this.setupNotebooksPane,
     ];
     this.addDatabaseText.subscribe((addDatabaseText: string) => this.addDatabasePane.title(addDatabaseText));
     this.isTabsContentExpanded = ko.observable(false);
@@ -654,7 +604,6 @@ export default class Explorer {
         this.addCollectionPane.collectionIdTitle("Table id");
         this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
         this.refreshTreeTitle("Refresh tables");
-        this.addTableEntityPane.title("Add Table Entity");
         this.editTableEntityPane.title("Edit Table Entity");
         this.tableDataClient = new TablesAPIDataClient();
         break;
@@ -669,7 +618,6 @@ export default class Explorer {
         this.addCollectionPane.collectionIdTitle("Table id");
         this.addCollectionPane.collectionWithThroughputInSharedTitle("Provision dedicated throughput for this table");
         this.refreshTreeTitle("Refresh tables");
-        this.addTableEntityPane.title("Add Table Row");
         this.editTableEntityPane.title("Edit Table Row");
         this.tableDataClient = new CassandraAPIDataClient();
         break;
@@ -765,8 +713,7 @@ export default class Explorer {
 
       onPrimaryButtonClick: async () => {
         const startTime = TelemetryProcessor.traceStart(Action.EnableAzureSynapseLink);
-        const logId = NotificationConsoleUtils.logConsoleMessage(
+        const clearInProgressMessage = logConsoleProgress(
-          ConsoleDataType.InProgress,
           "Enabling Azure Synapse Link for this account. This may take a few minutes before you can enable analytical store for this account."
         );
         this.isSynapseLinkUpdating(true);
@@ -784,19 +731,13 @@ export default class Explorer {
               },
             }
           );
-          NotificationConsoleUtils.clearInProgressMessageWithId(logId);
+          clearInProgressMessage();
-          NotificationConsoleUtils.logConsoleMessage(
+          logConsoleInfo("Enabled Azure Synapse Link for this account");
-            ConsoleDataType.Info,
-            "Enabled Azure Synapse Link for this account"
-          );
           TelemetryProcessor.traceSuccess(Action.EnableAzureSynapseLink, {}, startTime);
           this.databaseAccount(databaseAccount);
         } catch (error) {
-          NotificationConsoleUtils.clearInProgressMessageWithId(logId);
+          clearInProgressMessage();
-          NotificationConsoleUtils.logConsoleMessage(
+          logConsoleError(`Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`);
-            ConsoleDataType.Error,
-            `Enabling Azure Synapse Link for this account failed. ${getErrorMessage(error)}`
-          );
           TelemetryProcessor.traceFailure(Action.EnableAzureSynapseLink, {}, startTime);
         } finally {
           this.isSynapseLinkUpdating(false);
@@ -923,10 +864,7 @@ export default class Explorer {
           },
           startKey
         );
-        NotificationConsoleUtils.logConsoleMessage(
+        logConsoleError(`Error while refreshing databases: ${errorMessage}`);
-          ConsoleDataType.Error,
-          `Error while refreshing databases: ${errorMessage}`
-        );
       }
     );
 
@@ -1147,20 +1085,20 @@ export default class Explorer {
 
   private _resetNotebookWorkspace = async () => {
     this._closeModalDialog();
-    const id = NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.InProgress, "Resetting notebook workspace");
+    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
     try {
       await this.notebookManager?.notebookClient.resetWorkspace();
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, "Successfully reset notebook workspace");
+      logConsoleInfo("Successfully reset notebook workspace");
       TelemetryProcessor.traceSuccess(Action.ResetNotebookWorkspace);
     } catch (error) {
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Failed to reset notebook workspace: ${error}`);
+      logConsoleError(`Failed to reset notebook workspace: ${error}`);
       TelemetryProcessor.traceFailure(Action.ResetNotebookWorkspace, {
         error: getErrorMessage(error),
         errorStack: getErrorStack(error),
       });
       throw error;
     } finally {
-      NotificationConsoleUtils.clearInProgressMessageWithId(id);
+      clearInProgressMessage();
     }
   };
 
@@ -1495,11 +1433,7 @@ export default class Explorer {
   }
 
   public copyNotebook(name: string, content: string): void {
-    if (this.notebookManager) {
+    this.notebookManager?.openCopyNotebookPane(name, content);
-      this.notebookManager.openCopyNotebookPane(name, content);
-      this.copyNotebookPaneAdapter = this.notebookManager.copyNotebookPaneAdapter;
-      this.isCopyNotebookPaneEnabled(true);
-    }
   }
 
   public showOkModalDialog(title: string, msg: string): void {
@@ -1586,7 +1520,6 @@ export default class Explorer {
         collection: null,
         masterKey: userContext.masterKey || "",
         hashLocation: "notebooks",
-        isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),
         onLoadStartKey: null,
         onUpdateTabsButtons: this.onUpdateTabsButtons,
@@ -1718,11 +1651,7 @@ export default class Explorer {
         clearMessage();
       },
       (error: any) => {
-        NotificationConsoleUtils.logConsoleMessage(
+        logConsoleError(`Could not download notebook ${getErrorMessage(error)}`);
-          ConsoleDataType.Error,
-          `Could not download notebook ${getErrorMessage(error)}`
-        );
-
         clearMessage();
       }
     );
@@ -1874,15 +1803,8 @@ export default class Explorer {
     }
 
     return this.notebookManager?.notebookContentClient.deleteContentItem(item).then(
-      () => {
+      () => logConsoleInfo(`Successfully deleted: ${item.path}`),
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, `Successfully deleted: ${item.path}`);
+      (reason: any) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`)
-      },
-      (reason: any) => {
-        NotificationConsoleUtils.logConsoleMessage(
-          ConsoleDataType.Error,
-          `Failed to delete "${item.path}": ${JSON.stringify(reason)}`
-        );
-      }
     );
   }
 
@@ -1898,11 +1820,7 @@ export default class Explorer {
 
     parent = parent || this.resourceTree.myNotebooksContentRoot;
 
-    const notificationProgressId = NotificationConsoleUtils.logConsoleMessage(
+    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
-      ConsoleDataType.InProgress,
-      `Creating new notebook in ${parent.path}`
-    );
-
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
       dataExplorerArea: Constants.Areas.Notebook,
     });
@@ -1910,7 +1828,7 @@ export default class Explorer {
     this.notebookManager?.notebookContentClient
       .createNewNotebookFile(parent)
       .then((newFile: NotebookContentItem) => {
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, `Successfully created: ${newFile.name}`);
+        logConsoleInfo(`Successfully created: ${newFile.name}`);
         TelemetryProcessor.traceSuccess(
           Action.CreateNewNotebook,
           {
@@ -1923,7 +1841,7 @@ export default class Explorer {
       .then(() => this.resourceTree.triggerRender())
       .catch((error: any) => {
         const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, errorMessage);
+        logConsoleError(errorMessage);
         TelemetryProcessor.traceFailure(
           Action.CreateNewNotebook,
           {
@@ -1934,7 +1852,7 @@ export default class Explorer {
           startKey
         );
       })
-      .finally(() => NotificationConsoleUtils.clearInProgressMessageWithId(notificationProgressId));
+      .finally(clearInProgressMessage);
   }
 
   public refreshContentItem(item: NotebookContentItem): Promise<void> {
@@ -1992,7 +1910,6 @@ export default class Explorer {
         tabPath: title,
         collection: null,
         hashLocation: hashLocation,
-        isActive: ko.observable(false),
         isTabsContentExpanded: ko.observable(true),
         onLoadStartKey: null,
         onUpdateTabsButtons: this.onUpdateTabsButtons,
@@ -2097,7 +2014,7 @@ export default class Explorer {
   }
 
   public onNewCollectionClicked(): void {
-    if (this.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       this.cassandraAddCollectionPane.open();
     } else if (userContext.features.enableReactPane) {
       this.openAddCollectionPanel();
@@ -2145,7 +2062,7 @@ export default class Explorer {
     const description =
       "You have not yet created a notebooks workspace for this account. To proceed and start using notebooks, we'll need to create a default notebooks workspace in this account.";
 
-    this.setupNotebooksPane.openWithTitleAndDescription(title, description);
+    this.openSetupNotebooksPanel(title, description);
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
@@ -2210,7 +2127,7 @@ export default class Explorer {
     let collectionName = PricingUtils.getCollectionName(userContext.defaultExperience);
     this.openSidePanel(
       "Delete " + collectionName,
-      <DeleteCollectionConfirmationPanel
+      <DeleteCollectionConfirmationPane
         explorer={this}
         collectionName={collectionName}
         closePanel={this.closeSidePanel}
@@ -2241,7 +2158,7 @@ export default class Explorer {
   public openExecuteSprocParamsPanel(storedProcedure: StoredProcedure): void {
     this.openSidePanel(
       "Input parameters",
-      <ExecuteSprocParamsPanel
+      <ExecuteSprocParamsPane
         explorer={this}
         storedProcedure={storedProcedure}
         closePanel={() => this.closeSidePanel()}
@@ -2262,15 +2179,15 @@ export default class Explorer {
   }
 
   public openBrowseQueriesPanel(): void {
-    this.openSidePanel("Open Saved Queries", <BrowseQueriesPanel explorer={this} closePanel={this.closeSidePanel} />);
+    this.openSidePanel("Open Saved Queries", <BrowseQueriesPane explorer={this} closePanel={this.closeSidePanel} />);
   }
 
   public openLoadQueryPanel(): void {
-    this.openSidePanel("Load Query", <LoadQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+    this.openSidePanel("Load Query", <LoadQueryPane explorer={this} closePanel={() => this.closeSidePanel()} />);
   }
 
   public openSaveQueryPanel(): void {
-    this.openSidePanel("Save Query", <SaveQueryPanel explorer={this} closePanel={() => this.closeSidePanel()} />);
+    this.openSidePanel("Save Query", <SaveQueryPane explorer={this} closePanel={() => this.closeSidePanel()} />);
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
@@ -2285,6 +2202,31 @@ export default class Explorer {
     );
   }
 
+  public openAddTableEntityPanel(queryTablesTab: QueryTablesTab, tableEntityListViewModel: TableListViewModal): void {
+    this.openSidePanel(
+      "Add Table Entity",
+      <AddTableEntityPanel
+        explorer={this}
+        closePanel={this.closeSidePanel}
+        queryTablesTab={queryTablesTab}
+        tableEntityListViewModel={tableEntityListViewModel}
+        cassandraApiClient={new CassandraAPIDataClient()}
+      />
+    );
+  }
+  public openSetupNotebooksPanel(title: string, description: string): void {
+    this.openSidePanel(
+      title,
+      <SetupNoteBooksPanel
+        explorer={this}
+        closePanel={this.closeSidePanel}
+        openNotificationConsole={() => this.expandConsole()}
+        panelTitle={title}
+        panelDescription={description}
+      />
+    );
+  }
+
   public openTableSelectQueryPanel(queryViewModal: QueryViewModel): void {
     this.openSidePanel(
       "Select Column",

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -1,24 +1,22 @@
-import * as ko from "knockout";
+import { BaseType } from "d3";
-import Q from "q";
-import { schemeCategory10 } from "d3-scale-chromatic";
-import { selectAll, select } from "d3-selection";
-import { zoom, zoomIdentity } from "d3-zoom";
-import { scaleOrdinal } from "d3-scale";
-import { forceSimulation, forceLink, forceCollide, forceManyBody } from "d3-force";
-import { interpolateNumber, interpolate } from "d3-interpolate";
 import { map as d3Map } from "d3-collection";
-import { drag, D3DragEvent } from "d3-drag";
+import { D3DragEvent, drag } from "d3-drag";
-
+import { forceCollide, forceLink, forceManyBody, forceSimulation } from "d3-force";
+import { interpolate, interpolateNumber } from "d3-interpolate";
+import { scaleOrdinal } from "d3-scale";
+import { schemeCategory10 } from "d3-scale-chromatic";
+import { select, selectAll } from "d3-selection";
+import { zoom, zoomIdentity } from "d3-zoom";
+import * as ko from "knockout";
+import Q from "q";
 import _ from "underscore";
-import { NeighborType } from "../../../Contracts/ViewModels";
-import { GraphData, D3Node, D3Link } from "./GraphData";
-import { HashMap } from "../../../Common/HashMap";
-import { BaseType } from "d3";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { GraphConfig } from "../../Tabs/GraphTab";
-import { GraphExplorer } from "./GraphExplorer";
 import * as Constants from "../../../Common/Constants";
+import { HashMap } from "../../../Common/HashMap";
+import { NeighborType } from "../../../Contracts/ViewModels";
+import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
+import { GraphConfig } from "../../Tabs/GraphTab";
+import { D3Link, D3Node, GraphData } from "./GraphData";
+import { GraphExplorer } from "./GraphExplorer";
 
 export interface D3GraphIconMap {
   [key: string]: { data: string; format: string };
@@ -1005,7 +1003,7 @@ export class D3ForceGraph implements GraphRenderer {
    */
   private loadNeighbors(v: D3Node, pageAction: PAGE_ACTION) {
     if (!this.graphDataWrapper.hasVertexId(v.id)) {
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Clicked node not in graph data. id: ${v.id}`);
+      logConsoleError(`Clicked node not in graph data. id: ${v.id}`);
       return;
     }
 

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1,37 +1,36 @@
+import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as Q from "q";
 import * as React from "react";
-import * as LeftPane from "./LeftPaneComponent";
-import { MiddlePaneComponent } from "./MiddlePaneComponent";
-import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
-import * as NodeProperties from "./NodePropertiesComponent";
-import * as D3ForceGraph from "./D3ForceGraph";
-import { GraphVizComponentProps } from "./GraphVizComponent";
-import * as GraphData from "./GraphData";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import * as GraphUtil from "./GraphUtil";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as GremlinClient from "./GremlinClient";
-import * as StorageUtility from "../../../Shared/StorageUtility";
-import { ArraysByKeyCache } from "./ArraysByKeyCache";
-import { EdgeInfoCache } from "./EdgeInfoCache";
-import * as TabComponent from "../../Controls/Tabs/TabComponent";
-import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
-import { QueryContainerComponent } from "./QueryContainerComponent";
-import { GraphConfig } from "../../Tabs/GraphTab";
-import { EditorReact } from "../../Controls/Editor/EditorReact";
 import LoadGraphIcon from "../../../../images/LoadGraph.png";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as Constants from "../../../Common/Constants";
-import { InputProperty } from "../../../Contracts/ViewModels";
-import { QueryIterator, ItemDefinition, Resource } from "@azure/cosmos";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
+import * as Constants from "../../../Common/Constants";
 import { queryDocuments } from "../../../Common/dataAccess/queryDocuments";
 import { queryDocumentsPage } from "../../../Common/dataAccess/queryDocumentsPage";
 import { getErrorMessage } from "../../../Common/ErrorHandlingUtils";
-import { FeedOptions } from "@azure/cosmos";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { InputProperty } from "../../../Contracts/ViewModels";
+import * as StorageUtility from "../../../Shared/StorageUtility";
+import { LocalStorageUtility, StorageKey } from "../../../Shared/StorageUtility";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
+import { EditorReact } from "../../Controls/Editor/EditorReact";
+import * as InputTypeaheadComponent from "../../Controls/InputTypeahead/InputTypeaheadComponent";
+import * as TabComponent from "../../Controls/Tabs/TabComponent";
+import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
+import { GraphConfig } from "../../Tabs/GraphTab";
+import { ArraysByKeyCache } from "./ArraysByKeyCache";
+import * as D3ForceGraph from "./D3ForceGraph";
+import { EdgeInfoCache } from "./EdgeInfoCache";
+import * as GraphData from "./GraphData";
+import * as GraphUtil from "./GraphUtil";
+import { GraphVizComponentProps } from "./GraphVizComponent";
+import * as GremlinClient from "./GremlinClient";
+import * as LeftPane from "./LeftPaneComponent";
+import { MiddlePaneComponent } from "./MiddlePaneComponent";
+import * as NodeProperties from "./NodePropertiesComponent";
+import { QueryContainerComponent } from "./QueryContainerComponent";
 
 export interface GraphAccessor {
   applyFilter: () => void;
@@ -697,13 +696,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param cmd
    */
   public submitToBackend(cmd: string): Q.Promise<GremlinClient.GremlinRequestResult> {
-    const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${cmd}`);
+    const clearConsoleProgress = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${cmd}`);
     this.setExecuteCounter(this.executeCounter + 1);
 
     return this.gremlinClient.execute(cmd).then(
       (result: GremlinClient.GremlinRequestResult) => {
         this.setExecuteCounter(this.executeCounter - 1);
-        GraphExplorer.clearConsoleProgress(id);
+        clearConsoleProgress();
         if (result.isIncomplete) {
           const msg = `The query results are too large and only partial results are displayed for: ${cmd}`;
           GraphExplorer.reportToConsole(ConsoleDataType.Error, msg);
@@ -718,7 +717,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       (err: string) => {
         this.setExecuteCounter(this.executeCounter - 1);
         GraphExplorer.reportToConsole(ConsoleDataType.Error, `Gremlin query failed: ${cmd}`, err);
-        GraphExplorer.clearConsoleProgress(id);
+        clearConsoleProgress();
         throw err;
       }
     );
@@ -1083,13 +1082,26 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param errorData additional errors
    * @return id
    */
-  public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): string {
+  public static reportToConsole(type: ConsoleDataType.InProgress, msg: string, ...errorData: any[]): () => void;
+  public static reportToConsole(type: ConsoleDataType.Info, msg: string, ...errorData: any[]): void;
+  public static reportToConsole(type: ConsoleDataType.Error, msg: string, ...errorData: any[]): void;
+  public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
     let errorDataStr: string = "";
     if (errorData && errorData.length > 0) {
       console.error(msg, errorData);
       errorDataStr = ": " + JSON.stringify(errorData);
     }
-    return NotificationConsoleUtils.logConsoleMessage(type, `${msg}${errorDataStr}`);
+
+    const consoleMessage = `${msg}${errorDataStr}`;
+
+    switch (type) {
+      case ConsoleDataType.Error:
+        return logConsoleError(consoleMessage);
+      case ConsoleDataType.Info:
+        return logConsoleInfo(consoleMessage);
+      case ConsoleDataType.InProgress:
+        return logConsoleProgress(consoleMessage);
+    }
   }
 
   private setNodePropertiesViewMode(viewMode: NodeProperties.Mode) {
@@ -1368,7 +1380,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     let { id } = d;
     if (typeof id !== "string") {
       const error = `Vertex id is not a string: ${JSON.stringify(id)}.`;
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, error);
+      logConsoleError(error);
       throw new Error(error);
     }
 
@@ -1380,7 +1392,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           pk = pk[0]["_value"];
         } else {
           const error = `Vertex pk is not a string nor a non-empty array: ${JSON.stringify(pk)}.`;
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, error);
+          logConsoleError(error);
           throw new Error(error);
         }
       }
@@ -1767,7 +1779,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const queryInfoStr = `${this.currentDocDBQueryInfo.query} (${this.currentDocDBQueryInfo.index + 1}-${
       this.currentDocDBQueryInfo.index + GraphExplorer.ROOT_LIST_PAGE_SIZE
     })`;
-    const id = GraphExplorer.reportToConsole(ConsoleDataType.InProgress, `Executing: ${queryInfoStr}`);
+    const clearConsoleProgress = GraphExplorer.reportToConsole(
+      ConsoleDataType.InProgress,
+      `Executing: ${queryInfoStr}`
+    );
 
     try {
       const results: ViewModels.QueryResults = await queryDocumentsPage(
@@ -1776,7 +1791,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
         this.currentDocDBQueryInfo.index
       );
 
-      GraphExplorer.clearConsoleProgress(id);
+      clearConsoleProgress();
       this.currentDocDBQueryInfo.index = results.lastItemIndex + 1;
       this.setState({ hasMoreRoots: results.hasMoreResults });
       RU = results.requestCharge.toString();
@@ -1793,7 +1808,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
       return { requestCharge: RU };
     } catch (error) {
-      GraphExplorer.clearConsoleProgress(id);
+      clearConsoleProgress();
       const errorMsg = `Failed to query: ${this.currentDocDBQueryInfo.query}. Reason:${getErrorMessage(error)}`;
       GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
       this.setState({
@@ -2003,8 +2018,4 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       </React.Fragment>
     );
   }
-
-  private static clearConsoleProgress(id: string) {
-    NotificationConsoleUtils.clearInProgressMessageWithId(id);
-  }
 }

src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts

@@ -3,11 +3,10 @@
  */
 
 import * as Q from "q";
-import { GremlinSimpleClient, Result } from "./GremlinSimpleClient";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import { HashMap } from "../../../Common/HashMap";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { HashMap } from "../../../Common/HashMap";
+import { logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
+import { GremlinSimpleClient, Result } from "./GremlinSimpleClient";
 
 export interface GremlinClientParameters {
   endpoint: string;
@@ -77,9 +76,7 @@ export class GremlinClient {
           this.abortPendingRequest(requestId, errorMessage, result.requestCharge);
         }
       },
-      infoCallback: (msg: string) => {
+      infoCallback: logConsoleInfo,
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
-      },
     });
   }
 

src/Explorer/Graph/NewVertexComponent/NewVertex.test.ts

@@ -1,75 +0,0 @@
-import * as ko from "knockout";
-import { NewVertexComponent, NewVertexViewModel } from "./NewVertexComponent";
-
-const component = NewVertexComponent;
-
-describe("New Vertex Component", () => {
-  let vm: NewVertexViewModel;
-  let partitionKeyProperty: ko.Observable<string>;
-
-  beforeEach(async () => {
-    document.body.innerHTML = component.template as any;
-    partitionKeyProperty = ko.observable(null);
-    vm = new component.viewModel({
-      newVertexData: null,
-      partitionKeyProperty,
-    });
-    ko.applyBindings(vm);
-  });
-
-  afterEach(() => {
-    ko.cleanNode(document);
-  });
-
-  describe("Rendering", () => {
-    it("should display property list with input and +Add Property", () => {
-      expect(document.querySelector(".newVertexComponent .newVertexForm")).not.toBeNull();
-      expect(document.querySelector(".newVertexComponent .edgeInput")).not.toBeNull();
-      expect(document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn")).not.toBeNull();
-    });
-
-    it("should display partition key property if set", () => {
-      partitionKeyProperty("testKey");
-      expect(
-        (document.querySelector(".newVertexComponent .newVertexForm .labelCol input") as HTMLInputElement).value
-      ).toEqual("testKey");
-    });
-
-    it("should NOT display partition key property if NOT set", () => {
-      expect(document.getElementsByClassName("valueCol").length).toBe(0);
-    });
-  });
-
-  describe("Behavior", () => {
-    let clickSpy: jasmine.Spy;
-
-    beforeEach(() => {
-      clickSpy = jasmine.createSpy("Command button click spy");
-    });
-
-    it("should add new property row when +Add property button is pressed", () => {
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-      expect(document.getElementsByClassName("valueCol").length).toBe(3);
-      expect(document.getElementsByClassName("rightPaneTrashIcon").length).toBe(3);
-    });
-
-    it("should remove property row when trash button is pressed", () => {
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-
-      // Mark this one to delete
-      const elts = document.querySelectorAll(".newVertexComponent .rightPaneTrashIconImg");
-      elts[elts.length - 1].className += " deleteme";
-
-      document.querySelector(".newVertexComponent .rightPaneAddPropertyBtn").dispatchEvent(new Event("click"));
-      document
-        .querySelector(".newVertexComponent .rightPaneTrashIconImg.deleteme")
-        .parentElement.dispatchEvent(new Event("click"));
-      expect(document.getElementsByClassName("valueCol").length).toBe(2);
-      expect(document.getElementsByClassName("rightPaneTrashIcon").length).toBe(2);
-      expect(document.querySelectorAll(".newVertexComponent .rightPaneTrashIconImg.deleteme").length).toBe(0);
-    });
-  });
-});

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.html

@@ -1,74 +0,0 @@
-<div class="newVertexComponent" data-bind="setTemplateReady: true">
-  <div class="newVertexForm">
-    <div class="newVertexFormRow">
-      <label for="VertexLabel" class="labelCol">Label</label>
-      <input
-        class="edgeInput"
-        type="text"
-        data-bind="textInput:$data.newVertexData().label, hasFocus: $data.firstFieldHasFocus"
-        aria-label="Enter vertex label"
-        role="textbox"
-        tabindex="0"
-        placeholder="Enter vertex label"
-        autocomplete="off"
-        id="VertexLabel"
-      />
-      <div class="actionCol"></div>
-    </div>
-
-    <!-- ko foreach:{ data:newVertexData().properties, as: 'property' } -->
-    <div class="newVertexFormRow">
-      <div class="labelCol">
-        <input
-          type="text"
-          id="propertyKeyNewVertexPane"
-          data-bind="textInput: property.key, attr: { 'aria-label': 'Enter key for property '+ ($index() + 1) }"
-          placeholder="Key"
-          autocomplete="off"
-        />
-      </div>
-      <div class="valueCol">
-        <input
-          class="edgeInput"
-          type="text"
-          data-bind="textInput: property.values[0].value, , attr: { 'aria-label': 'Enter value for property '+ ($index() + 1) }"
-          placeholder="Value"
-          autocomplete="off"
-        />
-      </div>
-      <div>
-        <select
-          class="typeSelect"
-          required
-          data-bind="options:$parent.propertyTypes, value:property.values[0].type, attr: { 'aria-label': property.values[0].type + ': for property '+ ($index() + 1) }"
-        ></select>
-      </div>
-      <div class="actionCol">
-        <div
-          class="rightPaneTrashIcon rightPaneBtns"
-          data-bind="click:$parent.removeNewVertexProperty.bind($parent, $index()), event: { keypress: $parent.removeNewVertexPropertyKeyPress.bind($parent, $index()) }, attr: { 'aria-label': 'Remove property '+ ($index() + 1) }"
-          tabindex="0"
-          role="button"
-        >
-          <img class="refreshcol rightPaneTrashIconImg" src="/delete.svg" alt="Remove property" />
-        </div>
-      </div>
-    </div>
-    <!-- /ko -->
-
-    <div class="newVertexFormRow">
-      <span class="rightPaneAddPropertyBtnPadding">
-        <span
-          class="rightPaneAddPropertyBtn rightPaneBtns"
-          id="addProperyNewVertexBtn"
-          data-bind="click:onAddNewProperty, event: { keypress: onAddNewPropertyKeyPress }"
-          tabindex="0"
-          role="button"
-        >
-          <img class="refreshcol rightPaneAddPropertyImg" src="/Add-property.svg" alt="Add property" /> Add
-          Property</span
-        >
-      </span>
-    </div>
-  </div>
-</div>

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.less

@@ -0,0 +1,97 @@
+@import "../../../../less/Common/Constants";
+
+.newVertexComponent {
+  padding: @LargeSpace 20px 20px 0px;
+  width: 400px;
+
+  .newVertexForm {
+    width: 100%;
+    .flex-display();
+    .flex-direction();
+
+    .newVertexFormRow {
+      .flex-display();
+      .flex-direction(@direction: row);
+      padding: 4px 5px;
+
+      label {
+        padding: 0px;
+      }
+
+      .valueCol {
+        flex-grow: 1;
+        padding-right: 5px;
+      }
+
+      .rightPaneAddPropertyBtnPadding {
+        padding-top: 14px;
+      }
+
+      .edgeLabel {
+        padding-right: 41px;
+      }
+    }
+  }
+
+  .actionCol {
+    min-width: 30px;
+    padding: 0px 4px;
+  }
+
+  .labelCol {
+    width: 72px;
+    min-width: 72px;
+
+    input {
+      max-width: 65px;
+      padding-left: 4px;
+    }
+  }
+
+  .edgeInput {
+    width: 100%;
+    padding-left: 4px;
+  }
+
+  .typeSelect {
+    height: 23px;
+    width: 70px;
+  }
+
+  .rightPaneTrashIcon {
+    padding: 4px 1px 0px 4px;
+    height: 100%;
+  }
+
+  .rightPaneTrashIconImg {
+    vertical-align: top;
+  }
+
+  .rightPaneAddPropertyBtn {
+    padding: 7px 7px 8px 8px;
+    margin-left: -8px;
+  }
+
+  .rightPaneBtns {
+    cursor: pointer;
+
+    &:hover {
+      background-color: @BaseLow;
+    }
+
+    &:active {
+      background-color: @AccentMediumLow;
+    }
+  }
+
+  .rightPaneAddPropertyImg {
+    margin-right: 5px;
+    margin-bottom: 4px;
+  }
+
+  .contentScroll {
+    overflow-y: auto;
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
+}

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.test.tsx

@@ -0,0 +1,118 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { NewVertexComponent } from "./NewVertexComponent";
+
+describe("New Vertex Component", () => {
+  beforeEach(() => {
+    const fakeNewVertexData: ViewModels.NewVertexData = {
+      label: "",
+      properties: [
+        {
+          key: "test1",
+          values: [
+            {
+              value: "",
+              type: "string",
+            },
+          ],
+        },
+      ],
+    };
+    const props = {
+      newVertexDataProp: fakeNewVertexData,
+      partitionKeyPropertyProp: "test1",
+      onChangeProp: (): void => undefined,
+    };
+
+    render(<NewVertexComponent {...props} />);
+  });
+
+  it("should render default prpoerty", () => {
+    const fakeNewVertexData: ViewModels.NewVertexData = {
+      label: "",
+      properties: [],
+    };
+    const props = {
+      newVertexDataProp: fakeNewVertexData,
+      partitionKeyPropertyProp: "",
+      onChangeProp: (): void => undefined,
+    };
+
+    const { asFragment } = render(<NewVertexComponent {...props} />);
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("should render Add property button", () => {
+    const span = screen.getByText("Add Property");
+    expect(span).toBeDefined();
+  });
+
+  it("should call onAddNewProperty method on span click", () => {
+    const onAddNewProperty = jest.fn();
+    const span = screen.getByText("Add Property");
+    span.onclick = onAddNewProperty();
+    fireEvent.click(span);
+    expect(onAddNewProperty).toHaveBeenCalled();
+  });
+
+  it("should call onAddNewPropertyKeyPress method on span keyPress", () => {
+    const onAddNewPropertyKeyPress = jest.fn();
+    const span = screen.getByText("Add Property");
+    span.onkeypress = onAddNewPropertyKeyPress();
+    fireEvent.keyPress(span, { key: "Enter", code: 13, charCode: 13 });
+    expect(onAddNewPropertyKeyPress).toHaveBeenCalled();
+  });
+
+  it("should call onLabelChange method on input change", () => {
+    const onLabelChange = jest.fn();
+    const input = screen.getByLabelText("Label");
+    input.onchange = onLabelChange();
+    fireEvent.change(input, { target: { value: "Label" } });
+    expect(onLabelChange).toHaveBeenCalled();
+  });
+
+  it("should call onKeyChange method on key input change", () => {
+    const onKeyChange = jest.fn();
+    const input = screen.queryByPlaceholderText("Key");
+    input.onchange = onKeyChange();
+    fireEvent.change(input, { target: { value: "pk1" } });
+    expect(onKeyChange).toHaveBeenCalled();
+  });
+
+  it("should call onValueChange method on value input change", () => {
+    const onValueChange = jest.fn();
+    const input = screen.queryByPlaceholderText("Value");
+    input.onchange = onValueChange();
+    fireEvent.change(input, { target: { value: "abc" } });
+    expect(onValueChange).toHaveBeenCalled();
+  });
+
+  it("should call removeNewVertexProperty method on remove button click", () => {
+    const removeNewVertexProperty = jest.fn();
+    const div = screen.getAllByRole("button");
+    div[0].onclick = removeNewVertexProperty();
+    fireEvent.click(div[0]);
+    expect(removeNewVertexProperty).toHaveBeenCalled();
+  });
+
+  it("should call removeNewVertexProperty method on remove button keyPress", () => {
+    const removeNewVertexPropertyKeyPress = jest.fn();
+    const div = screen.getAllByRole("button");
+    div[0].onkeypress = removeNewVertexPropertyKeyPress();
+    fireEvent.keyPress(div[0], { key: "Enter", code: 13, charCode: 13 });
+    expect(removeNewVertexPropertyKeyPress).toHaveBeenCalled();
+  });
+
+  it("should call onTypeChange method on type dropdown change", () => {
+    const DOWN_ARROW = { keyCode: 40 };
+    const onTypeChange = jest.fn();
+    const dropdown = screen.getByRole("listbox");
+    dropdown.onclick = onTypeChange();
+    dropdown.onkeydown = onTypeChange();
+
+    fireEvent.keyDown(screen.getByRole("listbox"), DOWN_ARROW);
+    fireEvent.click(screen.getByText(/number/));
+    expect(onTypeChange).toHaveBeenCalled();
+  });
+});

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.ts

@@ -1,99 +0,0 @@
-import * as ko from "knockout";
-import { EditorNodePropertiesComponent } from "../GraphExplorerComponent/EditorNodePropertiesComponent";
-import { NewVertexData, InputProperty } from "../../../Contracts/ViewModels";
-import { WaitsForTemplateViewModel } from "../../WaitsForTemplateViewModel";
-import * as Constants from "../../../Common/Constants";
-import template from "./NewVertexComponent.html";
-
-/**
- * Parameters for this component
- */
-export interface NewVertexParams {
-  // Data to be edited by the component
-  newVertexData: ko.Observable<NewVertexData>;
-  partitionKeyProperty: ko.Observable<string>;
-  firstFieldHasFocus?: ko.Observable<boolean>;
-
-  /**
-   * Callback triggered when the template is bound to the component (for testing purposes)
-   */
-  onTemplateReady?: () => void;
-}
-
-export class NewVertexViewModel extends WaitsForTemplateViewModel {
-  private static readonly DEFAULT_PROPERTY_TYPE = "string";
-
-  private newVertexData: ko.Observable<NewVertexData>;
-  private firstFieldHasFocus: ko.Observable<boolean>;
-  private propertyTypes: string[];
-
-  public constructor(params: NewVertexParams) {
-    super();
-    super.onTemplateReady((isTemplateReady: boolean) => {
-      if (isTemplateReady && params.onTemplateReady) {
-        params.onTemplateReady();
-      }
-    });
-
-    this.newVertexData =
-      params.newVertexData ||
-      ko.observable({
-        label: "",
-        properties: <InputProperty[]>[],
-      });
-    this.firstFieldHasFocus = params.firstFieldHasFocus || ko.observable(false);
-    this.propertyTypes = EditorNodePropertiesComponent.VERTEX_PROPERTY_TYPES;
-    if (params.partitionKeyProperty) {
-      params.partitionKeyProperty.subscribe((newKeyProp: string) => {
-        if (!newKeyProp) {
-          return;
-        }
-        this.addNewVertexProperty(newKeyProp);
-      });
-    }
-  }
-
-  public onAddNewProperty() {
-    this.addNewVertexProperty();
-    document.getElementById("propertyKeyNewVertexPane").focus();
-  }
-
-  public onAddNewPropertyKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      this.onAddNewProperty();
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-
-  public addNewVertexProperty(key?: string) {
-    let ap = this.newVertexData().properties;
-    ap.push({ key: key || "", values: [{ value: "", type: NewVertexViewModel.DEFAULT_PROPERTY_TYPE }] });
-    this.newVertexData.valueHasMutated();
-  }
-
-  public removeNewVertexProperty(index: number) {
-    let ap = this.newVertexData().properties;
-    ap.splice(index, 1);
-    this.newVertexData.valueHasMutated();
-    document.getElementById("addProperyNewVertexBtn").focus();
-  }
-
-  public removeNewVertexPropertyKeyPress = (index: number, source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
-      this.removeNewVertexProperty(index);
-      event.stopPropagation();
-      return false;
-    }
-    return true;
-  };
-}
-
-/**
- * Helper class for ko component registration
- */
-export const NewVertexComponent = {
-  viewModel: NewVertexViewModel,
-  template,
-};

src/Explorer/Graph/NewVertexComponent/NewVertexComponent.tsx

@@ -0,0 +1,213 @@
+import { Dropdown, IDropdownOption, Stack, TextField } from "office-ui-fabric-react";
+import React, { FunctionComponent, useRef, useState } from "react";
+import AddIcon from "../../../../images/Add-property.svg";
+import DeleteIcon from "../../../../images/delete.svg";
+import { NormalizedEventKey } from "../../../Common/Constants";
+import { GremlinPropertyValueType, InputPropertyValueTypeString, NewVertexData } from "../../../Contracts/ViewModels";
+import { EditorNodePropertiesComponent } from "../GraphExplorerComponent/EditorNodePropertiesComponent";
+import "./NewVertexComponent.less";
+export interface INewVertexComponentProps {
+  newVertexDataProp: NewVertexData;
+  partitionKeyPropertyProp: string;
+  onChangeProp: (labelData: NewVertexData) => void;
+}
+
+export const NewVertexComponent: FunctionComponent<INewVertexComponentProps> = ({
+  newVertexDataProp,
+  partitionKeyPropertyProp,
+  onChangeProp,
+}: INewVertexComponentProps): JSX.Element => {
+  const DEFAULT_PROPERTY_TYPE = "string";
+  const [newVertexData, setNewVertexData] = useState<NewVertexData>(
+    newVertexDataProp || {
+      label: "",
+      properties: [
+        {
+          key: partitionKeyPropertyProp,
+          values: [{ value: "", type: DEFAULT_PROPERTY_TYPE }],
+        },
+      ],
+    }
+  );
+
+  const propertyTypes: string[] = EditorNodePropertiesComponent.VERTEX_PROPERTY_TYPES;
+  const input = useRef(undefined);
+
+  const onAddNewProperty = () => {
+    addNewVertexProperty();
+    setTimeout(() => {
+      input.current.focus();
+    }, 100);
+  };
+
+  const onAddNewPropertyKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      onAddNewProperty();
+      event.stopPropagation();
+    }
+  };
+
+  const addNewVertexProperty = () => {
+    let key: string;
+    const ap = newVertexData.properties;
+    if (ap.length === 0) {
+      key = partitionKeyPropertyProp;
+    }
+    ap.push({
+      key: key || "",
+      values: [{ value: "", type: DEFAULT_PROPERTY_TYPE }],
+    });
+    setNewVertexData((prevData) => ({
+      ...prevData,
+      properties: ap,
+    }));
+    onChangeProp(newVertexData);
+  };
+
+  const removeNewVertexProperty = (event?: React.MouseEvent<HTMLDivElement>, index?: number) => {
+    const ap = newVertexData.properties;
+    ap.splice(index, 1);
+    setNewVertexData((prevData) => ({
+      ...prevData,
+      properties: ap,
+    }));
+    onChangeProp(newVertexData);
+    document.getElementById("addProperyNewVertexBtn").focus();
+  };
+
+  const removeNewVertexPropertyKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, index: number) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      removeNewVertexProperty(undefined, index);
+      event.stopPropagation();
+    }
+  };
+
+  const onLabelChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setNewVertexData((prevData) => ({
+      ...prevData,
+      label: event.target.value,
+    }));
+    onChangeProp(newVertexData);
+  };
+
+  const onKeyChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const newState = { ...newVertexData };
+    newState.properties[index].key = event.target.value;
+    setNewVertexData(newState);
+    onChangeProp(newVertexData);
+  };
+
+  const onValueChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const newState = { ...newVertexData };
+    newState.properties[index].values[0].value = event.target.value as GremlinPropertyValueType;
+    setNewVertexData(newState);
+    onChangeProp(newVertexData);
+  };
+
+  const onTypeChange = (option: string, index: number) => {
+    const newState = { ...newVertexData };
+    if (newState.properties[index]) {
+      newState.properties[index].values[0].type = option as InputPropertyValueTypeString;
+      setNewVertexData(newState);
+      onChangeProp(newVertexData);
+    }
+  };
+
+  return (
+    <Stack>
+      <div className="newVertexComponent">
+        <div className="newVertexForm">
+          <div className="newVertexFormRow">
+            <TextField
+              label="Label"
+              className="edgeInput"
+              type="text"
+              ariaLabel="Enter vertex label"
+              role="textbox"
+              tabIndex={0}
+              placeholder="Enter vertex label"
+              autoComplete="off"
+              id="VertexLabel"
+              value={newVertexData.label}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
+                onLabelChange(event);
+              }}
+            />
+            <div className="actionCol"></div>
+          </div>
+          {newVertexData.properties.map((data, index) => {
+            return (
+              <div key={index} className="newVertexFormRow">
+                <div className="labelCol">
+                  <TextField
+                    className="edgeInput"
+                    type="text"
+                    id="propertyKeyNewVertexPane"
+                    componentRef={input}
+                    placeholder="Key"
+                    autoComplete="off"
+                    aria-label={`Enter value for propery ${index + 1}`}
+                    value={data.key}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onKeyChange(event, index)}
+                  />
+                </div>
+                <div className="valueCol">
+                  <TextField
+                    className="edgeInput"
+                    type="text"
+                    placeholder="Value"
+                    autoComplete="off"
+                    aria-label={`Enter value for propery ${index + 1}`}
+                    value={data.values[0].value.toString()}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onValueChange(event, index)}
+                  />
+                </div>
+                <div>
+                  <Dropdown
+                    role="listbox"
+                    placeholder="Select an option"
+                    defaultSelectedKey={data.values[0].type}
+                    style={{ width: 100 }}
+                    options={propertyTypes.map((type) => ({
+                      key: type,
+                      text: type,
+                    }))}
+                    onChange={(_, options: IDropdownOption) => onTypeChange(options.key.toString(), index)}
+                  />
+                </div>
+                <div className="actionCol">
+                  <div
+                    className="rightPaneTrashIcon rightPaneBtns"
+                    tabIndex={0}
+                    role="button"
+                    onClick={(event: React.MouseEvent<HTMLDivElement>) => removeNewVertexProperty(event, index)}
+                    onKeyPress={(event: React.KeyboardEvent<HTMLDivElement>) =>
+                      removeNewVertexPropertyKeyPress(event, index)
+                    }
+                  >
+                    <img className="refreshcol rightPaneTrashIconImg" src={DeleteIcon} alt="Remove property" />
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+
+          <div className="newVertexFormRow">
+            <span className="rightPaneAddPropertyBtnPadding">
+              <span
+                className="rightPaneAddPropertyBtn rightPaneBtns"
+                id="addProperyNewVertexBtn"
+                tabIndex={0}
+                role="button"
+                onClick={onAddNewProperty}
+                onKeyPress={(event: React.KeyboardEvent<HTMLSpanElement>) => onAddNewPropertyKeyPress(event)}
+              >
+                <img className="refreshcol rightPaneAddPropertyImg" src={AddIcon} alt="Add property" /> Add Property
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </Stack>
+  );
+};

src/Explorer/Graph/NewVertexComponent/__snapshots__/NewVertexComponent.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`New Vertex Component should render default prpoerty 1`] = `[Function]`;

src/Explorer/Graph/NewVertexComponent/newVertexComponent.less

@@ -1,97 +0,0 @@
-@import "../../../../less/Common/Constants";
-
-.newVertexComponent {
-    padding: @LargeSpace 20px 20px 0px;
-    width: 400px;
-
-    .newVertexForm {
-        width: 100%;
-        .flex-display();
-        .flex-direction();
-
-        .newVertexFormRow {
-            .flex-display();
-            .flex-direction(@direction: row);
-            padding: 4px 5px;
-
-            label {
-                padding: 0px;
-            }
-
-            .valueCol {
-                flex-grow: 1;
-                padding-right: 5px;
-            }
-
-            .rightPaneAddPropertyBtnPadding {
-                padding-top: 14px;
-            }
-
-            .edgeLabel {
-                padding-right: 41px;
-            }
-        }
-    }
-
-    .actionCol {
-        min-width: 30px;
-        padding: 0px 4px;
-    }
-
-    .labelCol {
-        width: 72px;
-        min-width: 72px;
-
-        input {
-            max-width: 65px;
-            padding-left: 4px;
-        }
-    }
-
-    .edgeInput {
-        width: 100%;
-        padding-left: 4px;
-    }
-
-    .typeSelect {
-        height: 23px;
-        width: 70px;
-    }
-
-    .rightPaneTrashIcon {
-        padding: 4px 1px 0px 4px;
-        height: 100%;
-    }
-
-    .rightPaneTrashIconImg {
-        vertical-align: top;
-    }
-
-    .rightPaneAddPropertyBtn {
-        padding: 7px 7px 8px 8px;
-        margin-left: -8px;
-    }
-
-    .rightPaneBtns {
-        cursor: pointer;
-
-        &:hover {
-            background-color: @BaseLow ;
-        }
-
-        &:active {
-            background-color: @AccentMediumLow;
-        }
-    }
-
-    .rightPaneAddPropertyImg {
-        margin-right: 5px;
-        margin-bottom: 4px;
-    }
-
-    .contentScroll {
-        overflow-y: auto;
-        overflow-x: hidden;
-        white-space: nowrap;
-    }
-}

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -23,16 +23,13 @@ export class CommandBarComponentAdapter implements ReactAdapter {
   constructor(container: Explorer) {
     this.container = container;
     this.tabsButtons = [];
-    this.isNotebookTabActive = ko.computed(() =>
+    this.isNotebookTabActive = ko.computed(
-      container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
+      () => container.tabsManager.activeTab()?.tabKind === ViewModels.CollectionTabKind.NotebookV2
     );
 
     // These are the parameters watched by the react binding that will trigger a renderComponent() if one of the ko mutates
     const toWatch = [
-      container.isPreferredApiTable,
       container.isPreferredApiMongoDB,
-      container.isPreferredApiCassandra,
-      container.isPreferredApiGraph,
       container.deleteCollectionText,
       container.deleteDatabaseText,
       container.addCollectionText,

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

@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import { AuthType } from "../../../AuthType";
+import { DatabaseAccount } from "../../../Contracts/DataModels";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
@@ -15,9 +16,14 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
@@ -54,9 +60,14 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
@@ -118,8 +129,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      updateUserContext({
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isSparkEnabled = ko.observable(true);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
 
@@ -197,8 +213,15 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
     beforeAll(() => {
       mockExplorer = {} as Explorer;
+      mockExplorer.addDatabaseText = ko.observable("mockText");
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
       mockExplorer.isSparkEnabled = ko.observable(true);
@@ -208,15 +231,27 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     beforeEach(() => {
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => true);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableCassandra" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isNotebookEnabled = ko.observable(false);
       mockExplorer.isNotebooksEnabledForAccount = ko.observable(false);
       mockExplorer.isRunningOnNationalCloud = ko.observable(false);
     });
 
     it("Cassandra Api not available - button should be hidden", () => {
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
+      updateUserContext({
-
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableMongo" }],
+          },
+        } as DatabaseAccount,
+      });
+      console.log(mockExplorer);
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeUndefined();
@@ -279,9 +314,14 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiTable = ko.computed(() => true);
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableTable" }],
+          },
+        } as DatabaseAccount,
+      });
       mockExplorer.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
 
       mockExplorer.isSynapseLinkUpdating = ko.observable(false);
       mockExplorer.isSparkEnabled = ko.observable(true);
@@ -346,6 +386,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
     });
 
     it("should only show New SQL Query and Open Query buttons", () => {
+      updateUserContext({
+        databaseAccount: {
+          kind: "DocumentDB",
+        } as DatabaseAccount,
+      });
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer);
       expect(buttons.length).toBe(2);
       expect(buttons[0].commandButtonLabel).toBe("New SQL Query");

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -47,7 +47,7 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
     buttons.push(addSynapseLink);
   }
 
-  if (!container.isPreferredApiTable()) {
+  if (userContext.apiType !== "Tables") {
     newCollectionBtn.children = [createNewCollectionGroup(container)];
     const newDatabaseBtn = createNewDatabase(container);
     newCollectionBtn.children.push(newDatabaseBtn);
@@ -74,7 +74,7 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
       buttons.push(createOpenMongoTerminalButton(container));
     }
 
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       buttons.push(createOpenCassandraTerminalButton(container));
     }
   }
@@ -90,15 +90,15 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
       buttons.push(createDivider());
     }
 
-    const isSqlQuerySupported = userContext.apiType === "SQL" || container.isPreferredApiGraph();
+    const isSqlQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
     if (isSqlQuerySupported) {
       const newSqlQueryBtn = createNewSQLQueryButton(container);
       buttons.push(newSqlQueryBtn);
     }
 
     const isSupportedOpenQueryApi =
-      userContext.apiType === "SQL" || container.isPreferredApiMongoDB() || container.isPreferredApiGraph();
+      userContext.apiType === "SQL" || container.isPreferredApiMongoDB() || userContext.apiType === "Gremlin";
-    const isSupportedOpenQueryFromDiskApi = userContext.apiType === "SQL" || container.isPreferredApiGraph();
+    const isSupportedOpenQueryFromDiskApi = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
     if (isSupportedOpenQueryApi && container.selectedNode() && container.findSelectedCollection()) {
       const openQueryBtn = createOpenQueryButton(container);
       openQueryBtn.children = [createOpenQueryButton(container), createOpenQueryFromDiskButton(container)];
@@ -107,7 +107,7 @@ export function createStaticCommandBarButtons(container: Explorer): CommandButto
       buttons.push(createOpenQueryFromDiskButton(container));
     }
 
-    if (areScriptsSupported(container)) {
+    if (areScriptsSupported()) {
       const label = "New Stored Procedure";
       const newStoredProcedureBtn: CommandButtonComponentProps = {
         iconSrc: AddStoredProcedureIcon,
@@ -216,8 +216,8 @@ export function createDivider(): CommandButtonComponentProps {
   };
 }
 
-function areScriptsSupported(container: Explorer): boolean {
+function areScriptsSupported(): boolean {
-  return userContext.apiType === "SQL" || container.isPreferredApiGraph();
+  return userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 }
 
 function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
@@ -289,7 +289,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
 }
 
 function createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
-  if (userContext.apiType === "SQL" || container.isPreferredApiGraph()) {
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
     const label = "New SQL Query";
     return {
       iconSrc: AddSqlQueryIcon,
@@ -303,7 +303,7 @@ function createNewSQLQueryButton(container: Explorer): CommandButtonComponentPro
       hasPopup: true,
       disabled: container.isDatabaseNodeOrNoneSelected(),
     };
-  } else if (container.isPreferredApiMongoDB()) {
+  } else if (userContext.apiType === "Mongo") {
     const label = "New Query";
     return {
       iconSrc: AddSqlQueryIcon,
@@ -325,8 +325,7 @@ function createNewSQLQueryButton(container: Explorer): CommandButtonComponentPro
 export function createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [];
 
-  const shouldEnableScriptsCommands: boolean =
+  const shouldEnableScriptsCommands: boolean = !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported();
-    !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported(container);
 
   if (shouldEnableScriptsCommands) {
     const label = "New Stored Procedure";
@@ -446,7 +445,7 @@ function createEnableNotebooksButton(container: Explorer): CommandButtonComponen
   return {
     iconSrc: EnableNotebooksIcon,
     iconAlt: label,
-    onCommandClick: () => container.setupNotebooksPane.openWithTitleAndDescription(label, description),
+    onCommandClick: () => container.openSetupNotebooksPanel(label, description),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: !container.isNotebooksEnabledForAccount(),
@@ -483,7 +482,7 @@ function createOpenMongoTerminalButton(container: Explorer): CommandButtonCompon
       if (container.isNotebookEnabled()) {
         container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
       } else {
-        container.setupNotebooksPane.openWithTitleAndDescription(title, description);
+        container.openSetupNotebooksPanel(title, description);
       }
     },
     commandButtonLabel: label,
@@ -509,7 +508,7 @@ function createOpenCassandraTerminalButton(container: Explorer): CommandButtonCo
       if (container.isNotebookEnabled()) {
         container.openNotebookTerminal(ViewModels.TerminalKind.Cassandra);
       } else {
-        container.setupNotebooksPane.openWithTitleAndDescription(title, description);
+        container.openSetupNotebooksPanel(title, description);
       }
     },
     commandButtonLabel: label,

src/Explorer/Notebook/NotebookClientV2.ts

@@ -34,8 +34,6 @@ import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import configureStore from "./NotebookComponent/store";
 import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-import SandboxJavaScript from "./NotebookRenderer/outputs/SandboxJavaScript";
-import SanitizedHTML from "./NotebookRenderer/outputs/SanitizedHTML";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -125,7 +123,9 @@ export class NotebookClientV2 {
           contents: makeContentsRecord({
             byRef: Immutable.Map<string, ContentRecord>(),
           }),
-          transforms: makeTransformsRecord({
+          transforms: userContext.features.sandboxNotebookOutputs
+            ? undefined
+            : makeTransformsRecord({
                 displayOrder: Immutable.List([
                   "application/vnd.jupyter.widget-view+json",
                   "application/vnd.vega.v5+json",
@@ -168,10 +168,8 @@ export class NotebookClientV2 {
                   "application/vnd.vega.v5+json": NullTransform,
                   "application/vdom.v1+json": TransformVDOM,
                   "application/json": Media.Json,
-              "application/javascript": userContext.features.sandboxNotebookOutputs
+                  "application/javascript": Media.JavaScript,
-                ? SandboxJavaScript
+                  "text/html": Media.HTML,
-                : Media.JavaScript,
-              "text/html": userContext.features.sandboxNotebookOutputs ? SanitizedHTML : Media.HTML,
                   "text/markdown": Media.Markdown,
                   "text/latex": Media.LaTeX,
                   "image/svg+xml": Media.SVG,
@@ -202,10 +200,11 @@ export class NotebookClientV2 {
         case actions.FETCH_KERNELSPECS_FULFILLED: {
           const payload = ((action as unknown) as actions.FetchKernelspecsFulfilled).payload;
           const defaultKernelName = payload.defaultKernelName;
-          this.kernelSpecsForDisplay = Object.keys(payload.kernelspecs)
+          this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
-            .map((name) => ({
+            .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
-              name,
+            .map((spec) => ({
-              displayName: payload.kernelspecs[name].displayName,
+              name: spec.name,
+              displayName: spec.displayName,
             }))
             .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
               // Put default at the top, otherwise lexicographically compare

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -1,52 +1,49 @@
-import { EMPTY, merge, of, timer, concat, Subject, Subscriber, Observable, Observer, from } from "rxjs";
-import { webSocket } from "rxjs/webSocket";
-import { StateObservable } from "redux-observable";
-import { ofType } from "redux-observable";
 import {
-  mergeMap,
-  tap,
-  retryWhen,
-  delayWhen,
-  map,
-  switchMap,
-  take,
-  filter,
-  catchError,
-  first,
-  concatMap,
-  timeout,
-} from "rxjs/operators";
-import {
-  AppState,
-  ServerConfig as JupyterServerConfig,
-  JupyterHostRecordProps,
-  RemoteKernelProps,
-  castToSessionId,
-  createKernelRef,
-  KernelRef,
-  ContentRef,
-  KernelInfo,
   actions,
+  AppState,
+  castToSessionId,
+  ContentRef,
+  createKernelRef,
+  JupyterHostRecordProps,
+  KernelInfo,
+  KernelRef,
+  RemoteKernelProps,
   selectors,
+  ServerConfig as JupyterServerConfig,
 } from "@nteract/core";
-import { message, JupyterMessage, Channels, createMessage, childOf, ofMessageType } from "@nteract/messaging";
+import { Channels, childOf, createMessage, JupyterMessage, message, ofMessageType } from "@nteract/messaging";
-import { sessions, kernels } from "rx-jupyter";
 import { RecordOf } from "immutable";
 import { AnyAction } from "redux";
-
+import { ofType, StateObservable } from "redux-observable";
+import { kernels, sessions } from "rx-jupyter";
+import { concat, EMPTY, from, merge, Observable, Observer, of, Subject, Subscriber, timer } from "rxjs";
+import {
+  catchError,
+  concatMap,
+  delayWhen,
+  filter,
+  first,
+  map,
+  mergeMap,
+  retryWhen,
+  switchMap,
+  take,
+  tap,
+  timeout,
+} from "rxjs/operators";
+import { webSocket } from "rxjs/webSocket";
 import * as Constants from "../../../Common/Constants";
-import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import { Areas } from "../../../Common/Constants";
-import { ConsoleDataType } from "../../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as CdbActions from "./actions";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { CdbAppState } from "./types";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { decryptJWTToken } from "../../../Utils/AuthorizationUtils";
-import * as TextFile from "./contents/file/text-file";
+import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
-import { NotebookUtil } from "../NotebookUtil";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
-import { Areas } from "../../../Common/Constants";
+import { NotebookUtil } from "../NotebookUtil";
+import * as CdbActions from "./actions";
+import * as TextFile from "./contents/file/text-file";
+import { CdbAppState } from "./types";
 
 interface NotebookServiceConfig extends JupyterServerConfig {
   userPuid?: string;
@@ -311,7 +308,7 @@ export const launchWebSocketKernelEpic = (
         if (currentKernelspecs) {
           kernelSpecToLaunch = currentKernelspecs.defaultKernelName;
           const msg = `No kernelspec name specified to launch, using default kernel: ${kernelSpecToLaunch}`;
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
+          logConsoleInfo(msg);
           logFailureToTelemetry(state$.value, "Launching alternate kernel", msg);
         } else {
           return of(
@@ -337,7 +334,7 @@ export const launchWebSocketKernelEpic = (
           kernelSpecToLaunch = currentKernelspecs.defaultKernelName;
           msg += ` Using default kernel: ${kernelSpecToLaunch}`;
         }
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
+        logConsoleInfo(msg);
         logFailureToTelemetry(state$.value, "Launching alternate kernel", msg);
       }
 
@@ -634,7 +631,7 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
         case actions.RESTART_KERNEL_SUCCESSFUL: {
           const title = "Kernel restart";
           const msg = "Kernel successfully restarted";
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
+          logConsoleInfo(msg);
           logFailureToTelemetry(state$.value, title, msg);
           break;
         }
@@ -645,7 +642,7 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
         case actions.SAVE_FAILED: {
           const title = "Save failure";
           const msg = `Failed to save notebook: ${(action as actions.SaveFailed).payload.error}`;
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+          logConsoleError(msg);
           logFailureToTelemetry(state$.value, title, msg);
           break;
         }
@@ -654,7 +651,7 @@ const notificationsToUserEpic = (action$: Observable<any>, state$: StateObservab
           const filepath = selectors.filepath(state$.value, { contentRef: typedAction.payload.contentRef });
           const title = "Fetching content failure";
           const msg = `Failed to fetch notebook content: ${filepath}, error: ${typedAction.payload.error}`;
-          NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+          logConsoleError(msg);
           logFailureToTelemetry(state$.value, title, msg);
           break;
         }
@@ -679,7 +676,7 @@ const handleKernelConnectionLostEpic = (
       const state = state$.value;
 
       const msg = "Notebook was disconnected from kernel";
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+      logConsoleError(msg);
       logFailureToTelemetry(state, "Error", "Kernel connection error");
 
       const host = selectors.currentHost(state);
@@ -692,7 +689,7 @@ const handleKernelConnectionLostEpic = (
       if (delayMs > Constants.Notebook.kernelRestartMaxDelayMs) {
         const msg =
           "Restarted kernel too many times. Please reload the page to enable Data Explorer to restart the kernel automatically.";
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+        logConsoleError(msg);
         logFailureToTelemetry(state, "Kernel restart error", msg);
 
         const explorer = window.dataExplorer;
@@ -810,7 +807,7 @@ const closeUnsupportedMimetypesEpic = (
         );
         const msg = `${filepath} cannot be rendered. Please download the file, in order to view it outside of Data Explorer.`;
         explorer.showOkModalDialog("File cannot be rendered", msg);
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+        logConsoleError(msg);
       }
       return EMPTY;
     })
@@ -838,7 +835,7 @@ const closeContentFailedToFetchEpic = (
         );
         const msg = `Failed to load file: ${filepath}.`;
         explorer.showOkModalDialog("Failure to load", msg);
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+        logConsoleError(msg);
       }
       return EMPTY;
     })

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -1,15 +1,14 @@
 /**
  * Notebook container related stuff
  */
-import * as DataModels from "../../Contracts/DataModels";
 import * as Constants from "../../Common/Constants";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import * as Logger from "../../Common/Logger";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import * as DataModels from "../../Contracts/DataModels";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 
 export class NotebookContainerClient {
-  private reconnectingNotificationId: string;
+  private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
 
   constructor(
@@ -61,9 +60,9 @@ export class NotebookContainerClient {
         },
       });
       if (response.ok) {
-        if (this.reconnectingNotificationId) {
+        if (this.clearReconnectionAttemptMessage) {
-          NotificationConsoleUtils.clearInProgressMessageWithId(this.reconnectingNotificationId);
+          this.clearReconnectionAttemptMessage();
-          this.reconnectingNotificationId = "";
+          this.clearReconnectionAttemptMessage = undefined;
         }
         const memoryUsageInfo = await response.json();
         if (memoryUsageInfo) {
@@ -76,9 +75,8 @@ export class NotebookContainerClient {
       return undefined;
     } catch (error) {
       Logger.logError(getErrorMessage(error), "NotebookContainerClient/getMemoryUsage");
-      if (!this.reconnectingNotificationId) {
+      if (!this.clearReconnectionAttemptMessage) {
-        this.reconnectingNotificationId = NotificationConsoleUtils.logConsoleMessage(
+        this.clearReconnectionAttemptMessage = logConsoleProgress(
-          ConsoleDataType.InProgress,
           "Connection lost with Notebook server. Attempting to reconnect..."
         );
       }

src/Explorer/Notebook/NotebookManager.tsx

@@ -2,30 +2,31 @@
  * Contains all notebook related stuff meant to be dynamically loaded by explorer
  */
 
-import { JunoClient } from "../../Juno/JunoClient";
-import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
-import { GitHubClient } from "../../GitHub/GitHubClient";
-import * as Logger from "../../Common/Logger";
-import { HttpStatusCodes, Areas } from "../../Common/Constants";
-import { GitHubReposPane } from "../Panes/GitHubReposPane";
-import ko from "knockout";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
-import { IContentProvider } from "@nteract/core";
-import { NotebookContentProvider } from "./NotebookComponent/NotebookContentProvider";
-import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
-import { contents } from "rx-jupyter";
-import { NotebookContainerClient } from "./NotebookContainerClient";
-import { MemoryUsageInfo } from "../../Contracts/DataModels";
-import { NotebookContentClient } from "./NotebookContentClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
-import { getFullName } from "../../Utils/UserUtils";
 import { ImmutableNotebook } from "@nteract/commutable";
+import { IContentProvider } from "@nteract/core";
+import ko from "knockout";
+import React from "react";
+import { contents } from "rx-jupyter";
+import { Areas, HttpStatusCodes } from "../../Common/Constants";
+import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import * as Logger from "../../Common/Logger";
+import { MemoryUsageInfo } from "../../Contracts/DataModels";
+import { GitHubClient } from "../../GitHub/GitHubClient";
+import { GitHubContentProvider } from "../../GitHub/GitHubContentProvider";
+import { GitHubOAuthService } from "../../GitHub/GitHubOAuthService";
+import { JunoClient } from "../../Juno/JunoClient";
+import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { getFullName } from "../../Utils/UserUtils";
 import Explorer from "../Explorer";
 import { ContextualPaneBase } from "../Panes/ContextualPaneBase";
-import { CopyNotebookPaneAdapter } from "../Panes/CopyNotebookPane";
+import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
-import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
+import { GitHubReposPane } from "../Panes/GitHubReposPane";
+import { PublishNotebookPaneAdapter } from "../Panes/PublishNotebookPaneAdapter";
+import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
+import { NotebookContentProvider } from "./NotebookComponent/NotebookContentProvider";
+import { NotebookContainerClient } from "./NotebookContainerClient";
+import { NotebookContentClient } from "./NotebookContentClient";
 
 export interface NotebookManagerOptions {
   container: Explorer;
@@ -49,7 +50,6 @@ export default class NotebookManager {
 
   public gitHubReposPane: ContextualPaneBase;
   public publishNotebookPaneAdapter: PublishNotebookPaneAdapter;
-  public copyNotebookPaneAdapter: CopyNotebookPaneAdapter;
 
   public initialize(params: NotebookManagerOptions): void {
     this.params = params;
@@ -89,12 +89,6 @@ export default class NotebookManager {
 
     this.publishNotebookPaneAdapter = new PublishNotebookPaneAdapter(this.params.container, this.junoClient);
 
-    this.copyNotebookPaneAdapter = new CopyNotebookPaneAdapter(
-      this.params.container,
-      this.junoClient,
-      this.gitHubOAuthService
-    );
-
     this.gitHubOAuthService.getTokenObservable().subscribe((token) => {
       this.gitHubClient.setToken(token?.access_token);
 
@@ -129,7 +123,18 @@ export default class NotebookManager {
   }
 
   public openCopyNotebookPane(name: string, content: string): void {
-    this.copyNotebookPaneAdapter.open(name, content);
+    const { container } = this.params;
+    container.openSidePanel(
+      "Copy Notebook",
+      <CopyNotebookPane
+        container={container}
+        closePanel={container.closeSidePanel}
+        junoClient={this.junoClient}
+        gitHubOAuthService={this.gitHubOAuthService}
+        name={name}
+        content={content}
+      />
+    );
   }
 
   // Octokit's error handler uses any

src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx

@@ -1,10 +1,8 @@
 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, { 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";
@@ -14,7 +12,7 @@ import { AzureTheme } from "./AzureTheme";
 import "./base.css";
 import "./default.css";
 import "./NotebookReadOnlyRenderer.less";
-import IFrameOutputs from "./outputs/IFrameOutputs";
+import SandboxOutputs from "./outputs/SandboxOutputs";
 
 export interface NotebookRendererProps {
   contentRef: any;
@@ -27,8 +25,10 @@ export interface NotebookRendererProps {
  */
 class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
   componentDidMount() {
+    if (!userContext.features.sandboxNotebookOutputs) {
       loadTransform(this.props as any);
     }
+  }
 
   private renderPrompt(id: string, contentRef: string): JSX.Element {
     if (this.props.hidePrompts) {
@@ -63,14 +63,7 @@ class NotebookReadOnlyRenderer extends React.Component<NotebookRendererProps> {
                 {{
                   prompt: (props: { id: string; contentRef: string }) => this.renderPrompt(props.id, props.contentRef),
                   outputs: userContext.features.sandboxNotebookOutputs
-                    ? (props: any) => (
+                    ? () => <SandboxOutputs id={id} contentRef={contentRef} />
-                        <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) =>

src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx

@@ -1,11 +1,9 @@
 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, 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 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";
@@ -23,7 +21,7 @@ import KeyboardShortcuts from "./decorators/kbd-shortcuts";
 import "./default.css";
 import MarkdownCell from "./markdown-cell";
 import "./NotebookRenderer.less";
-import IFrameOutputs from "./outputs/IFrameOutputs";
+import SandboxOutputs from "./outputs/SandboxOutputs";
 import Prompt from "./Prompt";
 import { promptContent } from "./PromptContent";
 import StatusBar from "./StatusBar";
@@ -71,7 +69,9 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
   }
 
   componentDidMount() {
+    if (!userContext.features.sandboxNotebookOutputs) {
       loadTransform(this.props as any);
+    }
     this.props.updateNotebookParentDomElt(this.props.contentRef, this.notebookRendererRef.current);
   }
 
@@ -109,14 +109,7 @@ class BaseNotebookRenderer extends React.Component<NotebookRendererProps> {
                             ),
                             toolbar: () => <CellToolbar id={id} contentRef={contentRef} />,
                             outputs: userContext.features.sandboxNotebookOutputs
-                              ? (props: any) => (
+                              ? () => <SandboxOutputs id={id} contentRef={contentRef} />
-                                  <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

@@ -1,70 +0,0 @@
-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-same-origin allow-scripts"
-      >
-        <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

@@ -1,69 +0,0 @@
-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;
-  private mutationObserver: MutationObserver;
-
-  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(): void {
-    this.resizeObserver?.disconnect();
-    this.mutationObserver?.disconnect();
-  }
-
-  onFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
-    const doc = (event.target as HTMLIFrameElement).contentDocument;
-    copyStyles(document, doc);
-
-    this.setState({ frameBody: doc.body });
-
-    this.mutationObserver = new MutationObserver(() => {
-      const bodyFirstElementChild = this.state.frameBody?.firstElementChild;
-      if (!this.resizeObserver && bodyFirstElementChild) {
-        this.resizeObserver = new ResizeObserver(() =>
-          this.setState({
-            frameHeight: this.state.frameBody?.firstElementChild.scrollHeight,
-          })
-        );
-        this.resizeObserver.observe(bodyFirstElementChild);
-      }
-    });
-    this.mutationObserver.observe(doc.body, { childList: true });
-  }
-}

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

@@ -1,26 +0,0 @@
-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 SandboxJavaScript extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "application/javascript",
-  };
-
-  render(): JSX.Element {
-    return <Media.HTML data={`<script>${this.props.data}</script>`} />;
-  }
-}
-
-export default SandboxJavaScript;

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

@@ -0,0 +1,132 @@
+import { JSONObject } from "@nteract/commutable";
+import { outputToJS } from "@nteract/commutable/lib/v4";
+import { actions, AppState, ContentRef, selectors } from "@nteract/core";
+import IframeResizer from "iframe-resizer-react";
+import Immutable from "immutable";
+import postRobot from "post-robot";
+import React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import { CellOutputViewerProps } from "../../../../CellOutputViewer/CellOutputViewer";
+
+// 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;
+}
+
+interface StateProps {
+  hidden: boolean;
+  expanded: boolean;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  outputs: Immutable.List<any>;
+}
+
+interface DispatchProps {
+  onMetadataChange?: (metadata: JSONObject, mediaType: string, index?: number) => void;
+}
+
+export class SandboxOutputs extends React.PureComponent<ComponentProps & StateProps & DispatchProps> {
+  private childWindow: Window;
+
+  render(): JSX.Element {
+    // Using min-width to set the width of the iFrame, works around an issue in iOS that can prevent the iFrame from sizing correctly.
+    return (
+      <IframeResizer
+        checkOrigin={false}
+        loading="lazy"
+        heightCalculationMethod="taggedElement"
+        onLoad={(event) => this.handleFrameLoad(event)}
+        src="./cellOutputViewer.html"
+        style={{ height: "1px", width: "1px", minWidth: "100%", border: "none" }}
+        sandbox="allow-downloads allow-popups allow-forms allow-pointer-lock allow-scripts allow-popups-to-escape-sandbox"
+      />
+    );
+  }
+
+  handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
+    this.childWindow = (event.target as HTMLIFrameElement).contentWindow;
+    this.sendPropsToFrame();
+  }
+
+  sendPropsToFrame(): void {
+    if (!this.childWindow) {
+      return;
+    }
+
+    const props: CellOutputViewerProps = {
+      id: this.props.id,
+      contentRef: this.props.contentRef,
+      hidden: this.props.hidden,
+      expanded: this.props.expanded,
+      outputs: this.props.outputs.toArray().map((output) => outputToJS(output)),
+      onMetadataChange: this.props.onMetadataChange,
+    };
+
+    postRobot.send(this.childWindow, "props", props);
+  }
+
+  componentDidMount(): void {
+    this.sendPropsToFrame();
+  }
+
+  componentDidUpdate(): void {
+    this.sendPropsToFrame();
+  }
+}
+
+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 const makeMapDispatchToProps = (
+  initialDispath: Dispatch,
+  ownProps: ComponentProps
+): ((dispatch: Dispatch) => DispatchProps) => {
+  const { id, contentRef } = ownProps;
+  const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+      onMetadataChange: (metadata: JSONObject, mediaType: string, index?: number) => {
+        dispatch(
+          actions.updateOutputMetadata({
+            id,
+            contentRef,
+            metadata,
+            index: index || 0,
+            mediaType,
+          })
+        );
+      },
+    };
+  };
+  return mapDispatchToProps;
+};
+
+export default connect<StateProps, DispatchProps, ComponentProps, AppState>(
+  makeMapStateToProps,
+  makeMapDispatchToProps
+)(SandboxOutputs);

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

@@ -1,38 +0,0 @@
-import { Media } from "@nteract/outputs";
-import React from "react";
-import sanitizeHtml from "sanitize-html";
-
-interface Props {
-  /**
-   * The HTML string that will be rendered.
-   */
-  data: string;
-  /**
-   * The media type associated with the HTML
-   * string. This defaults to text/html.
-   */
-  mediaType: "text/html";
-}
-
-export class SanitizedHTML extends React.PureComponent<Props> {
-  static defaultProps = {
-    data: "",
-    mediaType: "text/html",
-  };
-
-  render(): JSX.Element {
-    return <Media.HTML data={sanitize(this.props.data)} />;
-  }
-}
-
-function sanitize(html: string): string {
-  return sanitizeHtml(html, {
-    allowedTags: false, // allow all tags
-    allowedAttributes: false, // allow all attrs
-    transformTags: {
-      iframe: "iframe-disabled", // disable iframes
-    },
-  });
-}
-
-export default SanitizedHTML;

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.less

@@ -0,0 +1,10 @@
+.shemaAnalyzerComponent {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.schemaAnalyzerCard {
+  max-width: 4096px;
+  width: 100%;
+}

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponent.tsx

@@ -0,0 +1,238 @@
+import { ImmutableOutput } from "@nteract/commutable";
+import { actions, AppState, ContentRef, KernelRef, selectors } from "@nteract/core";
+import { KernelOutputError, Output, StreamText } from "@nteract/outputs";
+import TransformMedia from "@nteract/stateful-components/lib/outputs/transform-media";
+import { Card } from "@uifabric/react-cards";
+import Immutable from "immutable";
+import { FontIcon, PrimaryButton, Spinner, SpinnerSize, Stack, Text, TextField } from "office-ui-fabric-react";
+import * as React from "react";
+import { connect } from "react-redux";
+import { Dispatch } from "redux";
+import loadTransform from "../NotebookComponent/loadTransform";
+import "./SchemaAnalyzerComponent.less";
+
+interface SchemaAnalyzerComponentPureProps {
+  contentRef: ContentRef;
+  kernelRef: KernelRef;
+  databaseId: string;
+  collectionId: string;
+}
+
+interface SchemaAnalyzerComponentDispatchProps {
+  runCell: (contentRef: ContentRef, cellId: string) => void;
+  addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => void;
+  updateCell: (text: string, id: string, contentRef: ContentRef) => void;
+}
+
+type OutputType = "rich" | "json";
+
+interface SchemaAnalyzerComponentState {
+  outputType: OutputType;
+  filter?: string;
+  isFiltering: boolean;
+}
+
+type SchemaAnalyzerComponentProps = SchemaAnalyzerComponentPureProps &
+  StateProps &
+  SchemaAnalyzerComponentDispatchProps;
+
+export class SchemaAnalyzerComponent extends React.Component<
+  SchemaAnalyzerComponentProps,
+  SchemaAnalyzerComponentState
+> {
+  constructor(props: SchemaAnalyzerComponentProps) {
+    super(props);
+    this.state = {
+      outputType: "rich",
+      isFiltering: false,
+    };
+  }
+
+  componentDidMount(): void {
+    loadTransform(this.props);
+  }
+
+  private onFilterTextFieldChange = (
+    event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,
+    newValue?: string
+  ): void => {
+    this.setState({
+      filter: newValue,
+    });
+  };
+
+  private onAnalyzeButtonClick = () => {
+    const query = {
+      command: "listSchema",
+      database: this.props.databaseId,
+      collection: this.props.collectionId,
+      outputType: this.state.outputType,
+      filter: this.state.filter,
+    };
+
+    if (this.state.filter) {
+      this.setState({
+        isFiltering: true,
+      });
+    }
+
+    this.props.updateCell(JSON.stringify(query), this.props.firstCellId, this.props.contentRef);
+    this.props.runCell(this.props.contentRef, this.props.firstCellId);
+  };
+
+  render(): JSX.Element {
+    const { firstCellId: id, contentRef, kernelStatus, outputs } = this.props;
+    if (!id) {
+      return <></>;
+    }
+
+    const isKernelBusy = kernelStatus === "busy";
+    const isKernelIdle = kernelStatus === "idle";
+    const showSchemaOutput = isKernelIdle && outputs.size > 0;
+
+    return (
+      <Stack className="schemaAnalyzerComponent" horizontalAlign="center" tokens={{ childrenGap: 20, padding: 20 }}>
+        <Stack.Item grow styles={{ root: { display: "contents" } }}>
+          <Stack horizontal tokens={{ childrenGap: 20 }} styles={{ root: { width: "100%" } }}>
+            <Stack.Item grow align="end">
+              <TextField
+                value={this.state.filter}
+                onChange={this.onFilterTextFieldChange}
+                label="Filter"
+                placeholder="{ field: 'value' }"
+                disabled={!isKernelIdle}
+              />
+            </Stack.Item>
+            <Stack.Item align="end">
+              <PrimaryButton
+                text={isKernelBusy ? "Analyzing..." : "Analyze"}
+                onClick={this.onAnalyzeButtonClick}
+                disabled={!isKernelIdle}
+              />
+            </Stack.Item>
+          </Stack>
+        </Stack.Item>
+
+        {showSchemaOutput ? (
+          outputs.map((output, index) => (
+            <Card className="schemaAnalyzerCard" key={index}>
+              <Card.Item tokens={{ padding: 10 }}>
+                <Output output={output}>
+                  <TransformMedia output_type={"display_data"} id={id} contentRef={contentRef} />
+                  <TransformMedia output_type={"execute_result"} id={id} contentRef={contentRef} />
+                  <KernelOutputError />
+                  <StreamText />
+                </Output>
+              </Card.Item>
+            </Card>
+          ))
+        ) : this.state.isFiltering ? (
+          <Stack.Item>
+            {isKernelBusy && <Spinner styles={{ root: { marginTop: 40 } }} size={SpinnerSize.large} />}
+          </Stack.Item>
+        ) : (
+          <>
+            <Stack.Item>
+              <FontIcon iconName="Chart" style={{ fontSize: 100, color: "#43B1E5", marginTop: 40 }} />
+            </Stack.Item>
+            <Stack.Item>
+              <Text variant="xxLarge">Explore your schema</Text>
+            </Stack.Item>
+            <Stack.Item>
+              <Text variant="large">
+                Quickly visualize your schema to infer the frequency, types and ranges of fields in your data set.
+              </Text>
+            </Stack.Item>
+            <Stack.Item>
+              <PrimaryButton
+                styles={{ root: { fontSize: 18, padding: 30 } }}
+                text={isKernelBusy ? "Analyzing..." : "Analyze Schema"}
+                onClick={this.onAnalyzeButtonClick}
+                disabled={kernelStatus !== "idle"}
+              />
+            </Stack.Item>
+            <Stack.Item>{isKernelBusy && <Spinner size={SpinnerSize.large} />}</Stack.Item>
+          </>
+        )}
+      </Stack>
+    );
+  }
+}
+
+interface StateProps {
+  firstCellId: string;
+  kernelStatus: string;
+  outputs: Immutable.List<ImmutableOutput>;
+}
+
+interface InitialProps {
+  kernelRef: string;
+  contentRef: string;
+}
+
+// Redux
+const makeMapStateToProps = (state: AppState, initialProps: InitialProps) => {
+  const { kernelRef, contentRef } = initialProps;
+  const mapStateToProps = (state: AppState) => {
+    let kernelStatus;
+    let firstCellId;
+    let outputs;
+
+    const kernel = selectors.kernel(state, { kernelRef });
+    if (kernel) {
+      kernelStatus = kernel.status;
+    }
+
+    const content = selectors.content(state, { contentRef });
+    if (content?.type === "notebook") {
+      const cellOrder = selectors.notebook.cellOrder(content.model);
+      if (cellOrder.size > 0) {
+        firstCellId = cellOrder.first() as string;
+
+        const model = selectors.model(state, { contentRef });
+        if (model && model.type === "notebook") {
+          const cell = selectors.notebook.cellById(model, { id: firstCellId });
+          if (cell) {
+            outputs = cell.get("outputs", Immutable.List());
+          }
+        }
+      }
+    }
+
+    return {
+      firstCellId,
+      kernelStatus,
+      outputs,
+    };
+  };
+  return mapStateToProps;
+};
+
+const makeMapDispatchToProps = () => {
+  const mapDispatchToProps = (dispatch: Dispatch) => {
+    return {
+      addTransform: (transform: React.ComponentType & { MIMETYPE: string }) => {
+        return dispatch(
+          actions.addTransform({
+            mediaType: transform.MIMETYPE,
+            component: transform,
+          })
+        );
+      },
+      runCell: (contentRef: ContentRef, cellId: string) => {
+        return dispatch(
+          actions.executeCell({
+            contentRef,
+            id: cellId,
+          })
+        );
+      },
+      updateCell: (text: string, id: string, contentRef: ContentRef) => {
+        dispatch(actions.updateCellSource({ id, contentRef, value: text }));
+      },
+    };
+  };
+  return mapDispatchToProps;
+};
+
+export default connect(makeMapStateToProps, makeMapDispatchToProps)(SchemaAnalyzerComponent);

src/Explorer/Notebook/SchemaAnalyzerComponent/SchemaAnalyzerComponentAdapter.tsx

@@ -0,0 +1,88 @@
+import { Notebook } from "@nteract/commutable";
+import { actions, createContentRef, createKernelRef, IContent, KernelRef } from "@nteract/core";
+import * as React from "react";
+import { Provider } from "react-redux";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import {
+  NotebookComponentBootstrapper,
+  NotebookComponentBootstrapperOptions,
+} from "../NotebookComponent/NotebookComponentBootstrapper";
+import SchemaAnalyzerComponent from "./SchemaAnalyzerComponent";
+
+export class SchemaAnalyzerComponentAdapter extends NotebookComponentBootstrapper implements ReactAdapter {
+  public parameters: unknown;
+  private kernelRef: KernelRef;
+
+  constructor(options: NotebookComponentBootstrapperOptions, private databaseId: string, private collectionId: string) {
+    super(options);
+
+    if (!this.contentRef) {
+      this.contentRef = createContentRef();
+      this.kernelRef = createKernelRef();
+
+      const notebook: Notebook = {
+        cells: [
+          {
+            cell_type: "code",
+            metadata: {},
+            execution_count: 0,
+            outputs: [],
+            source: "",
+          },
+        ],
+        metadata: {
+          kernelspec: {
+            displayName: "Mongo",
+            language: "mongocli",
+            name: "mongo",
+          },
+          language_info: {
+            file_extension: "ipynb",
+            mimetype: "application/json",
+            name: "mongo",
+            version: "1.0",
+          },
+        },
+        nbformat: 4,
+        nbformat_minor: 4,
+      };
+
+      const model: IContent<"notebook"> = {
+        name: "schema-analyzer-component-notebook.ipynb",
+        path: "schema-analyzer-component-notebook.ipynb",
+        type: "notebook",
+        writable: true,
+        created: "",
+        last_modified: "",
+        mimetype: "application/x-ipynb+json",
+        content: notebook,
+        format: "json",
+      };
+
+      // Request fetching notebook content
+      this.getStore().dispatch(
+        actions.fetchContentFulfilled({
+          filepath: model.path,
+          model,
+          kernelRef: this.kernelRef,
+          contentRef: this.contentRef,
+        })
+      );
+    }
+  }
+
+  public renderComponent(): JSX.Element {
+    const props = {
+      contentRef: this.contentRef,
+      kernelRef: this.kernelRef,
+      databaseId: this.databaseId,
+      collectionId: this.collectionId,
+    };
+
+    return (
+      <Provider store={this.getStore()}>
+        <SchemaAnalyzerComponent {...props} />;
+      </Provider>
+    );
+  }
+}

src/Explorer/OpenActions.test.ts

@@ -1,10 +1,10 @@
 import * as ko from "knockout";
-import { handleOpenAction } from "./OpenActions";
-import * as ViewModels from "../Contracts/ViewModels";
 import { ActionContracts } from "../Contracts/ExplorerContracts";
+import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "./Explorer";
-import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
+import { handleOpenAction } from "./OpenActions";
 import AddCollectionPane from "./Panes/AddCollectionPane";
+import CassandraAddCollectionPane from "./Panes/CassandraAddCollectionPane";
 
 describe("OpenActions", () => {
   describe("handleOpenAction", () => {
@@ -33,6 +33,7 @@ describe("OpenActions", () => {
       collection.expandCollection = jest.fn();
       collection.onDocumentDBDocumentsClick = jest.fn();
       collection.onMongoDBDocumentsClick = jest.fn();
+      collection.onSchemaAnalyzerClick = jest.fn();
       collection.onTableEntitiesClick = jest.fn();
       collection.onGraphDocumentsClick = jest.fn();
       collection.onNewQueryClick = jest.fn();

src/Explorer/OpenActions.ts

@@ -79,6 +79,14 @@ function openCollectionTab(
           break;
         }
 
+        if (
+          action.tabKind === ActionContracts.TabKind.SchemaAnalyzer ||
+          (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.SchemaAnalyzer]
+        ) {
+          collection.onSchemaAnalyzerClick();
+          break;
+        }
+
         if (
           action.tabKind === ActionContracts.TabKind.TableEntities ||
           (<any>action).tabKind === ActionContracts.TabKind[ActionContracts.TabKind.TableEntities]

src/Explorer/Panes/AddCollectionPane.test.ts

@@ -1,7 +1,8 @@
 import * as Constants from "../../Common/Constants";
-import AddCollectionPane from "./AddCollectionPane";
-import Explorer from "../Explorer";
 import { DatabaseAccount } from "../../Contracts/DataModels";
+import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import AddCollectionPane from "./AddCollectionPane";
 
 describe("Add Collection Pane", () => {
   describe("isValid()", () => {
@@ -50,7 +51,14 @@ describe("Add Collection Pane", () => {
     });
 
     it("should be false if graph API and partition key is /id or /label", () => {
-      explorer.defaultExperience(Constants.DefaultAccountExperience.Graph.toLowerCase());
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableGremlin" }],
+          },
+        } as DatabaseAccount,
+      });
+
       const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
       addCollectionPane.partitionKey("/id");
       expect(addCollectionPane.isValid()).toBe(false);
@@ -60,7 +68,13 @@ describe("Add Collection Pane", () => {
     });
 
     it("should be true for any non-graph API with /id or /label partition key", () => {
-      explorer.defaultExperience(Constants.DefaultAccountExperience.DocumentDB.toLowerCase());
+      updateUserContext({
+        databaseAccount: {
+          properties: {
+            capabilities: [{ name: "EnableCassandra" }],
+          },
+        } as DatabaseAccount,
+      });
       const addCollectionPane = explorer.addCollectionPane as AddCollectionPane;
 
       addCollectionPane.partitionKey("/id");

src/Explorer/Panes/AddCollectionPane.ts

@@ -127,13 +127,13 @@ export default class AddCollectionPane extends ContextualPaneBase {
     });
     this.partitionKey.extend({ rateLimit: 100 });
     this.partitionKeyPattern = ko.pureComputed(() => {
-      if (this.container && this.container.isPreferredApiGraph()) {
+      if (userContext.apiType === "Gremlin") {
         return "^/[^/]*";
       }
       return ".*";
     });
     this.partitionKeyTitle = ko.pureComputed(() => {
-      if (this.container && this.container.isPreferredApiGraph()) {
+      if (userContext.apiType === "Gremlin") {
         return "May not use composite partition key";
       }
       return "";
@@ -331,7 +331,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
       if (currentCollections >= maxCollections) {
         let typeOfContainer = "collection";
-        if (this.container.isPreferredApiGraph() || this.container.isPreferredApiTable()) {
+        if (userContext.apiType === "Gremlin" || userContext.apiType === "Tables") {
           typeOfContainer = "container";
         }
 
@@ -368,7 +368,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return "e.g., address.zipCode";
       }
 
-      if (this.container && !!this.container.isPreferredApiGraph()) {
+      if (userContext.apiType === "Gremlin") {
         return "e.g., /address";
       }
 
@@ -384,21 +384,15 @@ export default class AddCollectionPane extends ContextualPaneBase {
     });
 
     this.uniqueKeysVisible = ko.pureComputed<boolean>(() => {
-      if (
+      if (userContext.apiType === "SQL") {
-        this.container == null ||
+        return true;
-        !!this.container.isPreferredApiMongoDB() ||
-        !!this.container.isPreferredApiTable() ||
-        !!this.container.isPreferredApiCassandra() ||
-        !!this.container.isPreferredApiGraph()
-      ) {
-        return false;
       }
 
-      return true;
+      return false;
     });
 
     this.partitionKeyVisible = ko.computed<boolean>(() => {
-      if (this.container == null || !!this.container.isPreferredApiTable()) {
+      if (this.container == null || userContext.apiType === "Tables") {
         return false;
       }
 
@@ -599,7 +593,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
         return true;
       }
 
-      if (this.container.isPreferredApiCassandra() && this.container.hasStorageAnalyticsAfecFeature()) {
+      if (userContext.apiType === "Cassandra" && this.container.hasStorageAnalyticsAfecFeature()) {
         return true;
       }
 
@@ -763,7 +757,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return;
     }
 
-    if (!!this.container.isPreferredApiTable()) {
+    if (userContext.apiType === "Tables") {
       // Table require fixed Database: TablesDB, and fixed Partition Key: /'$pk'
       this.databaseId(SharedConstants.CollectionCreation.TablesAPIDefaultDatabase);
       this.partitionKey("/'$pk'");
@@ -923,8 +917,10 @@ export default class AddCollectionPane extends ContextualPaneBase {
     this.databaseId("");
     this.partitionKey("");
     this.throughputSpendAck(false);
+    if (!this.container.isServerlessEnabled()) {
       this.isAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
       this.isSharedAutoPilotSelected(this.container.isAutoscaleDefaultEnabled());
+    }
     this.autoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
     this.sharedAutoPilotThroughput(AutoPilotUtils.minAutoPilotThroughput);
 
@@ -958,7 +954,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
   }
 
   public isNonTableApi = (): boolean => {
-    return !this.container.isPreferredApiTable();
+    return userContext.apiType !== "Tables";
   };
 
   public isUnlimitedStorageSelected = (): boolean => {
@@ -1011,7 +1007,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
       return false;
     }
 
-    if (this.container.isPreferredApiGraph() && (this.partitionKey() === "/id" || this.partitionKey() === "/label")) {
+    if (userContext.apiType === "Gremlin" && (this.partitionKey() === "/id" || this.partitionKey() === "/label")) {
       this.formErrors("/id and /label as partition keys are not allowed for graph.");
       return false;
     }
@@ -1032,7 +1028,7 @@ export default class AddCollectionPane extends ContextualPaneBase {
 
   private _setFocus() {
     // Autofocus is enabled on AddCollectionPane based on the preferred API
-    if (this.container.isPreferredApiTable()) {
+    if (userContext.apiType === "Tables") {
       const focusTableId = document.getElementById("containerId");
       focusTableId && focusTableId.focus();
       return;

src/Explorer/Panes/AddDatabasePane.ts

@@ -62,21 +62,21 @@ export default class AddDatabasePane extends ContextualPaneBase {
     this.databaseCreateNewShared = ko.observable<boolean>(this.getSharedThroughputDefault());
 
     this.databaseIdLabel = ko.computed<string>(() =>
-      this.container.isPreferredApiCassandra() ? "Keyspace id" : "Database id"
+      userContext.apiType === "Cassandra" ? "Keyspace id" : "Database id"
     );
 
     this.databaseIdPlaceHolder = ko.computed<string>(() =>
-      this.container.isPreferredApiCassandra() ? "Type a new keyspace id" : "Type a new database id"
+      userContext.apiType === "Cassandra" ? "Type a new keyspace id" : "Type a new database id"
     );
 
     this.databaseIdTooltipText = ko.computed<string>(() => {
-      const isCassandraAccount: boolean = this.container.isPreferredApiCassandra();
+      const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
       return `A ${isCassandraAccount ? "keyspace" : "database"} is a logical container of one or more ${
         isCassandraAccount ? "tables" : "collections"
       }`;
     });
     this.databaseLevelThroughputTooltipText = ko.computed<string>(() => {
-      const isCassandraAccount: boolean = this.container.isPreferredApiCassandra();
+      const isCassandraAccount: boolean = userContext.apiType === "Cassandra";
       const databaseLabel: string = isCassandraAccount ? "keyspace" : "database";
       const collectionsLabel: string = isCassandraAccount ? "tables" : "collections";
       return `Provisioned throughput at the ${databaseLabel} level will be shared across all ${collectionsLabel} within the ${databaseLabel}.`;

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.test.tsx

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

src/Explorer/Panes/BrowseQueriesPane/BrowseQueriesPane.tsx

@@ -13,15 +13,15 @@ import {
 import Explorer from "../../Explorer";
 import QueryTab from "../../Tabs/QueryTab";
 
-interface BrowseQueriesPanelProps {
+interface BrowseQueriesPaneProps {
   explorer: Explorer;
   closePanel: () => void;
 }
 
-export const BrowseQueriesPanel: FunctionComponent<BrowseQueriesPanelProps> = ({
+export const BrowseQueriesPane: FunctionComponent<BrowseQueriesPaneProps> = ({
   explorer,
   closePanel,
-}: BrowseQueriesPanelProps): JSX.Element => {
+}: BrowseQueriesPaneProps): JSX.Element => {
   const loadSavedQuery = (savedQuery: Query): void => {
     const selectedCollection: Collection = explorer && explorer.findSelectedCollection();
     if (!selectedCollection) {

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Browse queries panel Should render Default properly 1`] = `
-<BrowseQueriesPanel
+<BrowseQueriesPane
   closePanel={[Function]}
   explorer={
     Object {
@@ -54,5 +54,5 @@ exports[`Browse queries panel Should render Default properly 1`] = `
       </QueriesGridComponent>
     </div>
   </div>
-</BrowseQueriesPanel>
+</BrowseQueriesPane>
 `;

src/Explorer/Panes/CopyNotebookPane.tsx

@@ -11,7 +11,7 @@ import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils"
 import Explorer from "../Explorer";
 import { NotebookContentItem, NotebookContentItemType } from "../Notebook/NotebookContentItem";
 import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
-import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPane/CopyNotebookPaneComponent";
 import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
 
 interface Location {

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -0,0 +1,156 @@
+import { IDropdownOption } from "office-ui-fabric-react";
+import React, { FormEvent, FunctionComponent, useEffect, useState } from "react";
+import { HttpStatusCodes } from "../../../Common/Constants";
+import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
+import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
+import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
+import Explorer from "../../Explorer";
+import { NotebookContentItem, NotebookContentItemType } from "../../Notebook/NotebookContentItem";
+import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
+import {
+  GenericRightPaneComponent,
+  GenericRightPaneProps,
+} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+import { CopyNotebookPaneComponent, CopyNotebookPaneProps } from "./CopyNotebookPaneComponent";
+
+interface Location {
+  type: "MyNotebooks" | "GitHub";
+
+  // GitHub
+  owner?: string;
+  repo?: string;
+  branch?: string;
+}
+export interface CopyNotebookPanelProps {
+  name: string;
+  content: string;
+  container: Explorer;
+  junoClient: JunoClient;
+  gitHubOAuthService: GitHubOAuthService;
+  closePanel: () => void;
+}
+
+export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
+  name,
+  content,
+  container,
+  junoClient,
+  gitHubOAuthService,
+  closePanel,
+}: CopyNotebookPanelProps) => {
+  const [isExecuting, setIsExecuting] = useState<boolean>();
+  const [formError, setFormError] = useState<string>("");
+  const [formErrorDetail, setFormErrorDetail] = useState<string>("");
+  const [pinnedRepos, setPinnedRepos] = useState<IPinnedRepo[]>();
+  const [selectedLocation, setSelectedLocation] = useState<Location>();
+
+  useEffect(() => {
+    open();
+  }, []);
+
+  const open = async (): Promise<void> => {
+    if (gitHubOAuthService.isLoggedIn()) {
+      const response = await junoClient.getPinnedRepos(gitHubOAuthService.getTokenObservable()()?.scope);
+      if (response.status !== HttpStatusCodes.OK && response.status !== HttpStatusCodes.NoContent) {
+        handleError(`Received HTTP ${response.status} when fetching pinned repos`, "CopyNotebookPaneAdapter/submit");
+      }
+
+      if (response.data?.length > 0) {
+        setPinnedRepos(response.data);
+      }
+    }
+  };
+
+  const submit = async (): Promise<void> => {
+    let destination: string = selectedLocation?.type;
+    let clearMessage: () => void;
+    setIsExecuting(true);
+
+    try {
+      if (!selectedLocation) {
+        throw new Error(`No location selected`);
+      }
+
+      if (selectedLocation.type === "GitHub") {
+        destination = `${destination} - ${GitHubUtils.toRepoFullName(
+          selectedLocation.owner,
+          selectedLocation.repo
+        )} - ${selectedLocation.branch}`;
+      }
+
+      clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);
+
+      const notebookContentItem = await copyNotebook(selectedLocation);
+      if (!notebookContentItem) {
+        throw new Error(`Failed to upload ${name}`);
+      }
+
+      NotificationConsoleUtils.logConsoleInfo(`Successfully copied ${name} to ${destination}`);
+      closePanel();
+    } catch (error) {
+      const errorMessage = getErrorMessage(error);
+      setFormError(`Failed to copy ${name} to ${destination}`);
+      setFormErrorDetail(`${errorMessage}`);
+      handleError(errorMessage, "CopyNotebookPaneAdapter/submit", formError);
+    } finally {
+      clearMessage && clearMessage();
+      setIsExecuting(false);
+    }
+  };
+
+  const copyNotebook = async (location: Location): Promise<NotebookContentItem> => {
+    let parent: NotebookContentItem;
+    switch (location.type) {
+      case "MyNotebooks":
+        parent = {
+          name: ResourceTreeAdapter.MyNotebooksTitle,
+          path: container.getNotebookBasePath(),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      case "GitHub":
+        parent = {
+          name: ResourceTreeAdapter.GitHubReposTitle,
+          path: GitHubUtils.toContentUri(selectedLocation.owner, selectedLocation.repo, selectedLocation.branch, ""),
+          type: NotebookContentItemType.Directory,
+        };
+        break;
+
+      default:
+        throw new Error(`Unsupported location type ${location.type}`);
+    }
+
+    return container.uploadFile(name, content, parent);
+  };
+
+  const onDropDownChange = (_: FormEvent<HTMLDivElement>, option?: IDropdownOption): void => {
+    setSelectedLocation(option?.data);
+  };
+
+  const genericPaneProps: GenericRightPaneProps = {
+    container,
+    formError,
+    formErrorDetail,
+    id: "copynotebookpane",
+    isExecuting: isExecuting,
+    title: "Copy notebook",
+    submitButtonText: "OK",
+    onClose: closePanel,
+    onSubmit: () => submit(),
+  };
+
+  const copyNotebookPaneProps: CopyNotebookPaneProps = {
+    name,
+    pinnedRepos,
+    onDropDownChange: onDropDownChange,
+  };
+
+  return (
+    <GenericRightPaneComponent {...genericPaneProps}>
+      <CopyNotebookPaneComponent {...copyNotebookPaneProps} />
+    </GenericRightPaneComponent>
+  );
+};

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -1,18 +1,18 @@
-import * as GitHubUtils from "../../Utils/GitHubUtils";
-import * as React from "react";
-import { IPinnedRepo } from "../../Juno/JunoClient";
-import { ResourceTreeAdapter } from "../Tree/ResourceTreeAdapter";
 import {
-  Stack,
-  Label,
-  Text,
   Dropdown,
-  IDropdownProps,
   IDropdownOption,
-  SelectableOptionMenuItemType,
+  IDropdownProps,
   IRenderFunction,
   ISelectableOption,
+  Label,
+  SelectableOptionMenuItemType,
+  Stack,
+  Text,
 } from "office-ui-fabric-react";
+import React, { FormEvent, FunctionComponent } from "react";
+import { IPinnedRepo } from "../../../Juno/JunoClient";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
   type: "MyNotebooks" | "GitHub";
@@ -26,46 +26,25 @@ interface Location {
 export interface CopyNotebookPaneProps {
   name: string;
   pinnedRepos: IPinnedRepo[];
-  onDropDownChange: (_: React.FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
+  onDropDownChange: (_: FormEvent<HTMLDivElement>, option?: IDropdownOption) => void;
 }
 
-export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneProps> {
+export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps> = ({
-  private static readonly BranchNameWhiteSpace = "   ";
+  name,
+  pinnedRepos,
+  onDropDownChange,
+}: CopyNotebookPaneProps) => {
+  const BranchNameWhiteSpace = "   ";
 
-  public render(): JSX.Element {
+  const onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
-    const dropDownProps: IDropdownProps = {
-      label: "Location",
-      ariaLabel: "Location",
-      placeholder: "Select an option",
-      onRenderTitle: this.onRenderDropDownTitle,
-      onRenderOption: this.onRenderDropDownOption,
-      options: this.getDropDownOptions(),
-      onChange: this.props.onDropDownChange,
-    };
-
-    return (
-      <div className="paneMainContent">
-        <Stack tokens={{ childrenGap: 10 }}>
-          <Stack.Item>
-            <Label htmlFor="notebookName">Name</Label>
-            <Text id="notebookName">{this.props.name}</Text>
-          </Stack.Item>
-
-          <Dropdown {...dropDownProps} />
-        </Stack>
-      </div>
-    );
-  }
-
-  private onRenderDropDownTitle: IRenderFunction<IDropdownOption[]> = (options: IDropdownOption[]): JSX.Element => {
     return <span>{options.length && options[0].title}</span>;
   };
 
-  private onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
+  const onRenderDropDownOption: IRenderFunction<ISelectableOption> = (option: ISelectableOption): JSX.Element => {
     return <span style={{ whiteSpace: "pre-wrap" }}>{option.text}</span>;
   };
 
-  private getDropDownOptions = (): IDropdownOption[] => {
+  const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
 
     options.push({
@@ -77,7 +56,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
       } as Location,
     });
 
-    if (this.props.pinnedRepos && this.props.pinnedRepos.length > 0) {
+    if (pinnedRepos && pinnedRepos.length > 0) {
       options.push({
         key: "GitHub-Header-Divider",
         text: undefined,
@@ -90,7 +69,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
         itemType: SelectableOptionMenuItemType.Header,
       });
 
-      this.props.pinnedRepos.forEach((pinnedRepo) => {
+      pinnedRepos.forEach((pinnedRepo) => {
         const repoFullName = GitHubUtils.toRepoFullName(pinnedRepo.owner, pinnedRepo.name);
         options.push({
           key: `GitHub-Repo-${repoFullName}`,
@@ -101,7 +80,7 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
         pinnedRepo.branches.forEach((branch) =>
           options.push({
             key: `GitHub-Repo-${repoFullName}-${branch.name}`,
-            text: `${CopyNotebookPaneComponent.BranchNameWhiteSpace}${branch.name}`,
+            text: `${BranchNameWhiteSpace}${branch.name}`,
             title: `${repoFullName} - ${branch.name}`,
             data: {
               type: "GitHub",
@@ -116,4 +95,26 @@ export class CopyNotebookPaneComponent extends React.Component<CopyNotebookPaneP
 
     return options;
   };
-}
+  const dropDownProps: IDropdownProps = {
+    label: "Location",
+    ariaLabel: "Location",
+    placeholder: "Select an option",
+    onRenderTitle: onRenderDropDownTitle,
+    onRenderOption: onRenderDropDownOption,
+    options: getDropDownOptions(),
+    onChange: onDropDownChange,
+  };
+
+  return (
+    <div className="paneMainContent">
+      <Stack tokens={{ childrenGap: 10 }}>
+        <Stack.Item>
+          <Label htmlFor="notebookName">Name</Label>
+          <Text id="notebookName">{name}</Text>
+        </Stack.Item>
+
+        <Dropdown {...dropDownProps} />
+      </Stack>
+    </div>
+  );
+};

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

@@ -3,7 +3,6 @@ jest.mock("../../../Shared/Telemetry/TelemetryProcessor");
 import { mount, ReactWrapper, shallow } from "enzyme";
 import * as ko from "knockout";
 import React from "react";
-import { DeleteCollectionConfirmationPanel } from ".";
 import { deleteCollection } from "../../../Common/dataAccess/deleteCollection";
 import DeleteFeedback from "../../../Common/DeleteFeedback";
 import { ApiKind, DatabaseAccount } from "../../../Contracts/DataModels";
@@ -13,6 +12,7 @@ import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryCons
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { updateUserContext } from "../../../UserContext";
 import Explorer from "../../Explorer";
+import { DeleteCollectionConfirmationPane } from "./DeleteCollectionConfirmationPane";
 
 describe("Delete Collection Confirmation Pane", () => {
   describe("Explorer.isLastCollection()", () => {
@@ -65,7 +65,7 @@ describe("Delete Collection Confirmation Pane", () => {
         closePanel: (): void => undefined,
         collectionName: "container",
       };
-      const wrapper = shallow(<DeleteCollectionConfirmationPanel {...props} />);
+      const wrapper = shallow(<DeleteCollectionConfirmationPane {...props} />);
       expect(wrapper.exists(".deleteCollectionFeedback")).toBe(true);
 
       props.explorer.isLastCollection = () => true;
@@ -119,7 +119,7 @@ describe("Delete Collection Confirmation Pane", () => {
         closePanel: (): void => undefined,
         collectionName: "container",
       };
-      wrapper = mount(<DeleteCollectionConfirmationPanel {...props} />);
+      wrapper = mount(<DeleteCollectionConfirmationPane {...props} />);
     });
 
     it("should call delete collection", () => {

src/Explorer/Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane.tsx

@@ -11,18 +11,21 @@ import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcesso
 import { userContext } from "../../../UserContext";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
-import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";
+import {
-export interface DeleteCollectionConfirmationPanelProps {
+  GenericRightPaneComponent,
+  GenericRightPaneProps,
+} from "../GenericRightPaneComponent/GenericRightPaneComponent";
+export interface DeleteCollectionConfirmationPaneProps {
   explorer: Explorer;
   collectionName: string;
   closePanel: () => void;
 }
 
-export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollectionConfirmationPanelProps> = ({
+export const DeleteCollectionConfirmationPane: FunctionComponent<DeleteCollectionConfirmationPaneProps> = ({
   explorer,
   closePanel,
   collectionName,
-}: DeleteCollectionConfirmationPanelProps) => {
+}: DeleteCollectionConfirmationPaneProps) => {
   const [deleteCollectionFeedback, setDeleteCollectionFeedback] = useState<string>("");
   const [inputCollectionName, setInputCollectionName] = useState<string>("");
   const [formError, setFormError] = useState<string>("");
@@ -97,7 +100,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
       );
     }
   };
-  const genericPaneProps: RightPaneFormProps = {
+  const genericPaneProps: GenericRightPaneProps = {
     container: explorer,
     formError: formError,
     formErrorDetail: formError,
@@ -109,7 +112,7 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
     onSubmit: submit,
   };
   return (
-    <RightPaneForm {...genericPaneProps}>
+    <GenericRightPaneComponent {...genericPaneProps}>
       <div className="panelFormWrapper">
         <div className="panelMainContent">
           <div className="confirmDeleteInput">
@@ -147,6 +150,6 @@ export const DeleteCollectionConfirmationPanel: FunctionComponent<DeleteCollecti
           )}
         </div>
       </div>
-    </RightPaneForm>
+    </GenericRightPaneComponent>
   );
 };

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Delete Collection Confirmation Pane submit() should call delete collection 1`] = `
-<DeleteCollectionConfirmationPanel
+<DeleteCollectionConfirmationPane
   closePanel={[Function]}
   collectionName="container"
   explorer={
@@ -15,7 +15,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
     }
   }
 >
-  <RightPaneForm
+  <GenericRightPaneComponent
     container={
       Object {
         "findSelectedCollection": [Function],
@@ -69,7 +69,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
             <CustomizedIconButton
               ariaLabel="Close pane"
               className="closePaneBtn"
-              data-testid="closePaneBtn"
               iconProps={
                 Object {
                   "iconName": "Cancel",
@@ -82,7 +81,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               <IconButton
                 ariaLabel="Close pane"
                 className="closePaneBtn"
-                data-testid="closePaneBtn"
                 iconProps={
                   Object {
                     "iconName": "Cancel",
@@ -369,7 +367,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                   ariaLabel="Close pane"
                   baseClassName="ms-Button"
                   className="closePaneBtn"
-                  data-testid="closePaneBtn"
                   iconProps={
                     Object {
                       "iconName": "Cancel",
@@ -1085,7 +1082,6 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                     aria-label="Close pane"
                     className="ms-Button ms-Button--icon closePaneBtn root-140"
                     data-is-focusable={true}
-                    data-testid="closePaneBtn"
                     onClick={[Function]}
                     onKeyDown={[Function]}
                     onKeyPress={[Function]}
@@ -1125,17 +1121,39 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </IconButton>
             </CustomizedIconButton>
           </div>
-          <PanelInfoErrorComponent
+          <div
-            formError={false}
+            aria-live="assertive"
-            message=""
+            className="warningErrorContainer"
-            messageType="error"
+            hidden={true}
-            openNotificationConsole={[Function]}
-            showErrorDetails={false}
-          />
-          <form
-            className="panelFormWrapper"
-            onSubmit={[Function]}
           >
+            <div
+              className="warningErrorContent"
+            >
+              <span>
+                <img
+                  alt="Error"
+                  className="paneErrorIcon"
+                  src=""
+                />
+              </span>
+              <span
+                className="warningErrorDetailsLinkContainer"
+              >
+                <span
+                  className="formErrors"
+                  title=""
+                />
+                <a
+                  className="errorLink"
+                  hidden={true}
+                  onClick={[Function]}
+                  role="link"
+                >
+                  More details
+                </a>
+              </span>
+            </div>
+          </div>
           <div
             className="panelFormWrapper"
           >
@@ -1837,23 +1855,35 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
               </div>
             </div>
           </div>
-            <PanelFooterComponent
+          <div
-              buttonLabel="OK"
+            className="paneFooter"
           >
             <div
-                className="panelFooter"
+              className="leftpanel-okbut"
             >
               <CustomizedPrimaryButton
-                  ariaLabel="OK"
+                ariaLabel="Submit"
-                  data-testid="submit"
+                className="genericPaneSubmitBtn"
-                  id="sidePanelOkButton"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "visibility": "visible",
+                  }
+                }
+                tabIndex={0}
                 text="OK"
-                  type="submit"
+                title="Submit"
               >
                 <PrimaryButton
-                    ariaLabel="OK"
+                  ariaLabel="Submit"
-                    data-testid="submit"
+                  className="genericPaneSubmitBtn"
-                    id="sidePanelOkButton"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "visibility": "visible",
+                    }
+                  }
+                  tabIndex={0}
                   text="OK"
                   theme={
                     Object {
@@ -2128,14 +2158,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                       },
                     }
                   }
-                    type="submit"
+                  title="Submit"
                 >
                   <CustomizedDefaultButton
-                      ariaLabel="OK"
+                    ariaLabel="Submit"
-                      data-testid="submit"
+                    className="genericPaneSubmitBtn"
-                      id="sidePanelOkButton"
+                    onClick={[Function]}
                     onRenderDescription={[Function]}
                     primary={true}
+                    style={
+                      Object {
+                        "visibility": "visible",
+                      }
+                    }
+                    tabIndex={0}
                     text="OK"
                     theme={
                       Object {
@@ -2410,14 +2446,20 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                         },
                       }
                     }
-                      type="submit"
+                    title="Submit"
                   >
                     <DefaultButton
-                        ariaLabel="OK"
+                      ariaLabel="Submit"
-                        data-testid="submit"
+                      className="genericPaneSubmitBtn"
-                        id="sidePanelOkButton"
+                      onClick={[Function]}
                       onRenderDescription={[Function]}
                       primary={true}
+                      style={
+                        Object {
+                          "visibility": "visible",
+                        }
+                      }
+                      tabIndex={0}
                       text="OK"
                       theme={
                         Object {
@@ -2692,16 +2734,21 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                           },
                         }
                       }
-                        type="submit"
+                      title="Submit"
                     >
                       <BaseButton
-                          ariaLabel="OK"
+                        ariaLabel="Submit"
                         baseClassName="ms-Button"
-                          data-testid="submit"
+                        className="genericPaneSubmitBtn"
-                          id="sidePanelOkButton"
+                        onClick={[Function]}
                         onRenderDescription={[Function]}
                         primary={true}
                         split={false}
+                        style={
+                          Object {
+                            "visibility": "visible",
+                          }
+                        }
                         styles={
                           Object {
                             "description": Object {
@@ -3245,6 +3292,7 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             },
                           }
                         }
+                        tabIndex={0}
                         text="OK"
                         theme={
                           Object {
@@ -3519,22 +3567,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                             },
                           }
                         }
-                          type="submit"
+                        title="Submit"
                         variantClassName="ms-Button--primary"
                       >
                         <button
-                            aria-label="OK"
+                          aria-label="Submit"
-                            className="ms-Button ms-Button--primary root-166"
+                          className="ms-Button ms-Button--primary genericPaneSubmitBtn root-166"
                           data-is-focusable={true}
-                            data-testid="submit"
-                            id="sidePanelOkButton"
                           onClick={[Function]}
                           onKeyDown={[Function]}
                           onKeyPress={[Function]}
                           onKeyUp={[Function]}
                           onMouseDown={[Function]}
                           onMouseUp={[Function]}
-                            type="submit"
+                          style={
+                            Object {
+                              "visibility": "visible",
+                            }
+                          }
+                          tabIndex={0}
+                          title="Submit"
+                          type="button"
                         >
                           <span
                             className="ms-Button-flexContainer flexContainer-141"
@@ -3560,11 +3613,19 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
                 </PrimaryButton>
               </CustomizedPrimaryButton>
             </div>
-            </PanelFooterComponent>
+          </div>
-          </form>
+        </div>
+        <div
+          className="dataExplorerLoaderContainer dataExplorerPaneLoaderContainer"
+          hidden={true}
+        >
+          <img
+            className="dataExplorerLoader"
+            src=""
+          />
         </div>
       </div>
     </div>
-  </RightPaneForm>
+  </GenericRightPaneComponent>
-</DeleteCollectionConfirmationPanel>
+</DeleteCollectionConfirmationPane>
 `;

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.test.tsx

@@ -2,7 +2,7 @@ import { mount } from "enzyme";
 import React from "react";
 import Explorer from "../../Explorer";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import { ExecuteSprocParamsPanel } from "./index";
+import { ExecuteSprocParamsPane } from "./ExecuteSprocParamsPane";
 
 describe("Excute Sproc Param Pane", () => {
   const fakeExplorer = {} as Explorer;
@@ -14,23 +14,23 @@ describe("Excute Sproc Param Pane", () => {
   };
 
   it("should render Default properly", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    const wrapper = mount(<ExecuteSprocParamsPane {...props} />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it("initially display 2 input field, 1 partition and 1 parameter", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    const wrapper = mount(<ExecuteSprocParamsPane {...props} />);
     expect(wrapper.find("input[type='text']")).toHaveLength(2);
   });
 
   it("add a new parameter field", () => {
-    const wrapper = mount(<ExecuteSprocParamsPanel {...props} />);
+    const wrapper = mount(<ExecuteSprocParamsPane {...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} />);
+    const wrapper = mount(<ExecuteSprocParamsPane {...props} />);
     wrapper.find("#deleteparam").last().simulate("click");
     expect(wrapper.find("input[type='text']")).toHaveLength(1);
   });

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -4,7 +4,10 @@ import React, { FunctionComponent, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import Explorer from "../../Explorer";
 import StoredProcedure from "../../Tree/StoredProcedure";
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+import {
+  GenericRightPaneComponent,
+  GenericRightPaneProps,
+} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 import { InputParameter } from "./InputParameter";
 
 interface ExecuteSprocParamsPaneProps {
@@ -23,7 +26,7 @@ interface UnwrappedExecuteSprocParam {
   text: string;
 }
 
-export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
+export const ExecuteSprocParamsPane: FunctionComponent<ExecuteSprocParamsPaneProps> = ({
   explorer,
   storedProcedure,
   closePanel,
@@ -79,8 +82,15 @@ export const ExecuteSprocParamsPanel: FunctionComponent<ExecuteSprocParamsPanePr
       return;
     }
     setLoadingTrue();
-    const sprocParams = wrappedSprocParams && wrappedSprocParams.map((sprocParam) => sprocParam.text);
+    const sprocParams =
-    storedProcedure.execute(sprocParams, partitionValue);
+      wrappedSprocParams &&
+      wrappedSprocParams.map((sprocParam) => {
+        if (sprocParam.key === "custom") {
+          return JSON.parse(sprocParam.text);
+        }
+        return sprocParam.text;
+      });
+    storedProcedure.execute(sprocParams, partitionKey === "custom" ? JSON.parse(partitionValue) : partitionValue);
     setLoadingFalse();
     closePanel();
   };

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Excute Sproc Param Pane should render Default properly 1`] = `
-<ExecuteSprocParamsPanel
+<ExecuteSprocParamsPane
   closePanel={[Function]}
   explorer={Object {}}
   storedProcedure={Object {}}
@@ -8176,5 +8176,5 @@ exports[`Excute Sproc Param Pane should render Default properly 1`] = `
       </div>
     </div>
   </GenericRightPaneComponent>
-</ExecuteSprocParamsPanel>
+</ExecuteSprocParamsPane>
 `;

src/Explorer/Panes/GenericRightPaneComponent/GenericRightPaneComponent.tsx

@@ -19,10 +19,6 @@ export interface GenericRightPaneProps {
   children?: ReactNode;
 }
 
-export interface GenericRightPaneState {
-  panelHeight: number;
-}
-
 export const GenericRightPaneComponent: FunctionComponent<GenericRightPaneProps> = ({
   container,
   formError,

src/Explorer/Panes/GraphNewVertexPane.html

@@ -1,60 +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" data-bind="attr: { id: id }">
-    <!-- New Vertex form - Start -->
-    <div class="contextual-pane-in">
-      <form class="paneContentContainer" data-bind="submit: submit">
-        <!-- New Vertex header - Start -->
-        <div class="firstdivbg headerline">
-          <span role="heading" aria-level="2">New Vertex</span>
-          <div
-            class="closeImg"
-            role="button"
-            aria-label="Close pane"
-            data-bind="click: cancel, event: { keypress: onCloseKeyPress }"
-            tabindex="0"
-          >
-            <img src="../../../images/close-black.svg" title="Close" alt="Close" />
-          </div>
-        </div>
-        <!-- New Vertex header - End -->
-
-        <!-- New Vertex errors - Start -->
-        <div
-          aria-live="assertive"
-          class="warningErrorContainer"
-          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, event: { keypress: onMoreDetailsKeyPress }"
-                tabindex="0"
-              >
-                More details
-              </a>
-            </span>
-          </div>
-        </div>
-        <!-- New Vertex errors - End -->
-
-        <!-- New Vertex inputs - Start -->
-        <div class="paneMainContent">
-          <new-vertex-form
-            class="newvertexContainer"
-            params="{ newVertexData: tempVertexData, firstFieldHasFocus: firstFieldHasFocus, partitionKeyProperty: partitionKeyProperty }"
-          ></new-vertex-form>
-        </div>
-        <div class="paneFooter">
-          <div class="leftpanel-okbut"><input type="submit" value="OK" class="btncreatecoll1" /></div>
-        </div>
-        <!-- New Vertex inputs - End -->
-      </form>
-    </div>
-    <!-- New Vertex form - End -->
-  </div>
-</div>

src/Explorer/Panes/GraphNewVertexPane.less

@@ -1,10 +0,0 @@
-@import "../../../less/Common/Constants";
-
-.newvertexContainer {
-    height:100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    white-space: nowrap;
-    .flex-display();
-    .flex-direction();
-}

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.test.tsx

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

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -3,22 +3,25 @@ import { IImageProps, Image, ImageFit, Stack, TextField } from "office-ui-fabric
 import React, { FunctionComponent, useState } from "react";
 import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";
+import { Collection } from "../../../Contracts/ViewModels";
 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 {
-import { GenericRightPaneComponent, GenericRightPaneProps } from "../GenericRightPaneComponent";
+  GenericRightPaneComponent,
+  GenericRightPaneProps,
+} from "../GenericRightPaneComponent/GenericRightPaneComponent";
 
-interface LoadQueryPanelProps {
+interface LoadQueryPaneProps {
   explorer: Explorer;
   closePanel: () => void;
 }
 
-export const LoadQueryPanel: FunctionComponent<LoadQueryPanelProps> = ({
+export const LoadQueryPane: FunctionComponent<LoadQueryPaneProps> = ({
   explorer,
   closePanel,
-}: LoadQueryPanelProps): JSX.Element => {
+}: LoadQueryPaneProps): JSX.Element => {
   const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false);
   const [formError, setFormError] = useState<string>("");
   const [formErrorsDetails, setFormErrorsDetails] = useState<string>("");

src/Explorer/Panes/NewVertexPane.ts

@@ -1,65 +0,0 @@
-import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
-import { ContextualPaneBase } from "./ContextualPaneBase";
-import { KeyCodes } from "../../Common/Constants";
-import Explorer from "../Explorer";
-
-export default class NewVertexPane extends ContextualPaneBase {
-  public container: Explorer;
-  public visible: ko.Observable<boolean>;
-  public formErrors: ko.Observable<string>;
-  public formErrorsDetails: ko.Observable<string>;
-
-  // Graph style stuff
-  public tempVertexData: ko.Observable<ViewModels.NewVertexData>; // vertex data being edited
-  private onSubmitCreateCallback: (newVertexData: ViewModels.NewVertexData) => void;
-  private partitionKeyProperty: ko.Observable<string>;
-
-  constructor(options: ViewModels.PaneOptions) {
-    super(options);
-    this.tempVertexData = ko.observable<ViewModels.NewVertexData>(null);
-    this.partitionKeyProperty = ko.observable(null);
-    this.resetData();
-  }
-
-  public submit() {
-    // Commit edited changes
-    if (this.onSubmitCreateCallback != null) {
-      this.onSubmitCreateCallback(this.tempVertexData());
-    }
-
-    // this.close();
-  }
-
-  public resetData() {
-    super.resetData();
-
-    this.onSubmitCreateCallback = null;
-
-    this.tempVertexData({
-      label: "",
-      properties: <ViewModels.InputProperty[]>[],
-    });
-    this.partitionKeyProperty(null);
-  }
-
-  public subscribeOnSubmitCreate(callback: (newVertexData: ViewModels.NewVertexData) => void): void {
-    this.onSubmitCreateCallback = callback;
-  }
-
-  public setPartitionKeyProperty(pKeyProp: string): void {
-    this.partitionKeyProperty(pKeyProp);
-  }
-
-  public onMoreDetailsKeyPress = (source: any, event: KeyboardEvent): boolean => {
-    if (event.keyCode === KeyCodes.Space || event.keyCode === KeyCodes.Enter) {
-      this.showErrorDetails();
-      return false;
-    }
-    return true;
-  };
-
-  public buildString = (prefix: string, index: number): string => {
-    return `${prefix}${index}`;
-  };
-}