Add support for Schema Analyzer (#411)

* New MongoSchemaTab

* Address feedback and updates

* Build fixes

* Rename to SchemaAnalyzer

* Format

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>

.eslintignore

@@ -45,7 +45,6 @@ src/Definitions/jquery.d.ts
 src/Definitions/plotly.js-cartesian-dist.d-min.ts
 src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
-src/Definitions/worker.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
 src/Explorer/ContextMenuButtonFactory.ts
@@ -91,13 +90,11 @@ 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
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -122,33 +119,20 @@ src/Explorer/Panes/AddDatabasePane.ts
 src/Explorer/Panes/BrowseQueriesPane.ts
 src/Explorer/Panes/CassandraAddCollectionPane.ts
 src/Explorer/Panes/ContextualPaneBase.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
-src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
-src/Explorer/Panes/LoadQueryPane.ts
-src/Explorer/Panes/NewVertexPane.ts
+# src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
-src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
-src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
-src/Explorer/Panes/Tables/QuerySelectPane.ts
-src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
-src/Explorer/Panes/UploadFilePane.ts
-src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -255,15 +239,11 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
-src/Utils/DatabaseAccountUtils.test.ts
-src/Utils/DatabaseAccountUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
-src/Utils/QueryUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
-src/workers/upload/index.ts
 src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
 src/Explorer/Controls/Accordion/AccordionComponent.tsx
 src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
@@ -311,8 +291,6 @@ src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.t
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
 src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

.eslintrc.js

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

.github/PULL_REQUEST_TEMPLATE.md

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

.github/dependabot.yml

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

.github/workflows/ci.yml

@@ -70,7 +70,6 @@ jobs:
       - run: npm run test
   build:
     runs-on: ubuntu-latest
-    needs: [lint, format, compile, unittest]
     name: "Build"
     steps:
       - uses: actions/checkout@v2
@@ -92,9 +91,18 @@ jobs:
         with:
           name: dist
           path: dist/
+      - name: Upload build to preview blob storage
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
+      - name: Upload preview config to blob storage
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        env:
+          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
   endtoendemulator:
     name: "End To End Emulator Tests"
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
+    # Temporarily disabled. This test needs to be rewritten in playwright
+    if: false
     runs-on: windows-latest
     steps:
       - uses: actions/checkout@v2
@@ -119,58 +127,21 @@ jobs:
         with:
           name: screenshots
           path: failed-*
-  accessibility:
-    name: "Accessibility | Hosted"
-    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]
+  endtoend:
+    name: "E2E"
     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:
@@ -181,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-*
-  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
+          path: screenshots/
   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

@@ -14,4 +14,6 @@ Contracts/*
 .DS_Store
 .cache/
 .env
-failure.png
+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.
 

README.md

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

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

@@ -67,8 +67,8 @@ module.exports = {
 
   // A map from regular expressions to module names that allow to stub out resources with a single module
   moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
-    "worker-loader": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
     "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
     "^dnd-core$": "dnd-core/dist/cjs",
     "^react-dnd$": "react-dnd/dist/cjs",

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"],
+};

less/documentDB.less

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

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.9.0",
+    "@azure/cosmos": "3.10.5",
     "@azure/cosmos-language-service": "0.0.5",
     "@azure/identity": "1.2.1",
     "@azure/ms-rest-nodeauth": "3.0.7",
@@ -13,7 +13,7 @@
     "@babel/plugin-proposal-decorators": "7.12.12",
     "@jupyterlab/services": "6.0.2",
     "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.5.9",
+    "@microsoft/applicationinsights-web": "2.6.1",
     "@nteract/commutable": "7.4.2",
     "@nteract/connected-components": "6.8.2",
     "@nteract/core": "15.1.0",
@@ -25,7 +25,7 @@
     "@nteract/iron-icons": "1.0.0",
     "@nteract/jupyter-widgets": "2.0.0",
     "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.4.0",
+    "@nteract/markdown": "4.6.0",
     "@nteract/monaco-editor": "3.2.2",
     "@nteract/octicons": "2.0.0",
     "@nteract/outputs": "3.0.9",
@@ -44,9 +44,7 @@
     "@types/node-fetch": "2.5.7",
     "@uifabric/react-cards": "0.109.110",
     "@uifabric/styling": "7.13.7",
-    "abort-controller": "3.0.0",
     "applicationinsights": "1.8.0",
-    "babel-polyfill": "6.26.0",
     "bootstrap": "3.4.1",
     "canvas": "file:./canvas",
     "clean-webpack-plugin": "0.1.19",
@@ -60,8 +58,6 @@
     "date-fns": "1.29.0",
     "dayjs": "1.8.19",
     "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
     "eslint-plugin-jest": "23.13.2",
     "eslint-plugin-react": "7.20.0",
     "hasher": "1.2.0",
@@ -69,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",
@@ -79,12 +76,10 @@
     "monaco-editor": "0.18.1",
     "ms": "2.1.3",
     "msal": "1.4.4",
-    "object.entries": "1.1.0",
     "office-ui-fabric-react": "7.164.2",
     "p-retry": "4.2.0",
     "plotly.js-cartesian-dist-min": "1.52.3",
-    "promise-polyfill": "8.1.0",
-    "promise.prototype.finally": "3.1.0",
+    "post-robot": "10.0.42",
     "q": "1.5.1",
     "react": "16.13.1",
     "react-animate-height": "2.0.8",
@@ -99,15 +94,12 @@
     "reflect-metadata": "0.1.13",
     "rx-jupyter": "5.5.12",
     "rxjs": "6.6.3",
+    "sanitize-html": "2.3.3",
     "styled-components": "4.3.2",
     "swr": "0.4.0",
-    "text-encoding": "0.7.0",
+    "terser-webpack-plugin": "3.1.0",
     "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
-    "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
+    "utility-types": "3.10.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.0",
@@ -121,28 +113,23 @@
     "@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.0",
-    "@types/react-dom": "17.0.0",
+    "@types/react": "17.0.3",
+    "@types/react-dom": "17.0.3",
     "@types/react-notification-system": "0.2.39",
     "@types/react-redux": "7.1.7",
+    "@types/sanitize-html": "1.27.2",
     "@types/sinon": "2.3.3",
     "@types/styled-components": "5.1.1",
-    "@types/text-encoding": "0.0.33",
     "@types/underscore": "1.7.36",
-    "@types/webfontloader": "1.6.29",
     "@typescript-eslint/eslint-plugin": "4.0.1",
     "@typescript-eslint/parser": "4.0.1",
-    "axe-puppeteer": "1.1.0",
     "babel-jest": "24.9.0",
     "babel-loader": "8.1.0",
     "buffer": "5.1.0",
@@ -157,17 +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",
-    "inline-css": "2.2.5",
+    "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",
@@ -175,24 +163,23 @@
     "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",
-    "terser-webpack-plugin": "3.0.5",
     "ts-loader": "6.2.2",
     "tslint": "5.11.0",
     "tslint-microsoft-contrib": "6.0.0",
-    "typescript": "4.0.2",
+    "typescript": "4.2.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
     "webpack": "4.43.0",
     "webpack-bundle-analyzer": "3.6.1",
     "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0",
-    "worker-loader": "2.0.0"
+    "webpack-dev-server": "3.11.0"
   },
   "scripts": {
     "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
@@ -215,8 +202,8 @@
     "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
     "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
     "build:contracts": "npm run compile:contracts",
-    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
-    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
+    "strict:find": "node ./strict-null-checks/find.js",
+    "strict:add": "node ./strict-null-checks/auto-add.js",
     "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
     "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
   },
@@ -238,4 +225,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

preview/.azure/config

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

preview/README.md

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

preview/config.json

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

preview/index.js

@@ -0,0 +1,68 @@
+const express = require("express");
+const { createProxyMiddleware } = require("http-proxy-middleware");
+const port = process.env.PORT || 3000;
+const fetch = require("node-fetch");
+
+const api = createProxyMiddleware("/api", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  logLevel: "debug",
+  bypass: (req, res) => {
+    if (req.method === "OPTIONS") {
+      res.statusCode = 200;
+      res.send();
+    }
+  },
+});
+
+const proxy = createProxyMiddleware("/proxy", {
+  target: "https://main.documentdb.ext.azure.com",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/proxy": "" },
+  router: (req) => {
+    let newTarget = req.headers["x-ms-proxy-target"];
+    return newTarget;
+  },
+});
+
+const commit = createProxyMiddleware("/commit", {
+  target: "https://cosmosexplorerpreview.blob.core.windows.net",
+  changeOrigin: true,
+  secure: false,
+  logLevel: "debug",
+  pathRewrite: { "^/commit": "$web/" },
+});
+
+const app = express();
+
+app.use(api);
+app.use(proxy);
+app.use(commit);
+app.get("/pull/:pr(\\d+)", (req, res) => {
+  const pr = req.params.pr;
+  const [, query] = req.originalUrl.split("?");
+  const search = new URLSearchParams(query);
+
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/pulls/" + pr)
+    .then((response) => response.json())
+    .then(({ head: { ref, sha } }) => {
+      const prUrl = new URL("https://github.com/Azure/cosmos-explorer/pull/" + pr);
+      prUrl.hash = ref;
+      search.set("feature.pr", prUrl.href);
+
+      const explorer = new URL("https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/explorer.html");
+      explorer.search = search.toString();
+
+      const portal = new URL("https://ms.portal.azure.com/");
+      portal.searchParams.set("dataExplorerSource", explorer.href);
+
+      return res.redirect(portal.href);
+    })
+    .catch(() => res.sendStatus(500));
+});
+
+app.listen(port, () => {
+  console.log(`Example app listening on port: ${port}`);
+});

preview/package.json

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

src/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/Constants.ts

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

src/Common/CosmosClient.ts

@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };
 
 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = configContext.PROXY_PATH;
+  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
   requestContext.headers["x-ms-proxy-target"] = endpoint();
   return next(requestContext);
 };
@@ -75,7 +75,10 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
   }
 }
 
+let _client: Cosmos.CosmosClient;
+
 export function client(): Cosmos.CosmosClient {
+  if (_client) return _client;
   const options: Cosmos.CosmosClientOptions = {
     endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
     key: userContext.masterKey,
@@ -89,5 +92,6 @@ export function client(): Cosmos.CosmosClient {
   if (configContext.PROXY_PATH !== undefined) {
     (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
   }
-  return new Cosmos.CosmosClient(options);
+  _client = new Cosmos.CosmosClient(options);
+  return _client;
 }

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/Logger.ts

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

src/Common/MessageHandler.ts

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

src/Common/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(
-    ConsoleDataType.Error,
-    `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
-  );
+  logConsoleError(`Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`);
   if (response.status === HttpStatusCodes.Forbidden) {
     sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
     return;

src/Common/QueriesClient.ts

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

src/Common/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/Tooltip/Tooltip.tsx

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

src/Common/Upload/Upload.tsx

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

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

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

src/Common/dataAccess/bulkCreateDocument.ts

@@ -0,0 +1,39 @@
+import { JSONObject, OperationResponse } from "@azure/cosmos";
+import { CollectionBase } from "../../Contracts/ViewModels";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { client } from "../CosmosClient";
+import { handleError } from "../ErrorHandlingUtils";
+
+export const bulkCreateDocument = async (
+  collection: CollectionBase,
+  documents: JSONObject[]
+): Promise<OperationResponse[]> => {
+  const clearMessage = logConsoleProgress(
+    `Executing ${documents.length} bulk operations for container ${collection.id()}`
+  );
+
+  try {
+    const response = await client()
+      .database(collection.databaseId)
+      .container(collection.id())
+      .items.bulk(
+        documents.map((doc) => ({ operationType: "Create", resourceBody: doc })),
+        { continueOnError: true }
+      );
+
+    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. ${throttledCount} operations throttled`
+    );
+    return response;
+  } catch (error) {
+    handleError(error, "BulkCreateDocument", `Error bulk creating items for container ${collection.id()}`);
+    throw error;
+  } finally {
+    clearMessage();
+  }
+};

src/Common/dataAccess/readCollections.ts

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

src/Common/dataAccess/updateCollection.ts

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

src/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/DataModels.ts

@@ -121,6 +121,10 @@ export interface ISchemaRequest {
 }
 
 export interface Collection extends Resource {
+  // Only in Mongo collections loaded via ARM
+  shardKey?: {
+    [key: string]: string;
+  };
   defaultTtl?: number;
   indexingPolicy?: IndexingPolicy;
   partitionKey?: PartitionKey;

src/Contracts/ViewModels.ts

@@ -15,7 +15,6 @@ import StoredProcedure from "../Explorer/Tree/StoredProcedure";
 import Trigger from "../Explorer/Tree/Trigger";
 import UserDefinedFunction from "../Explorer/Tree/UserDefinedFunction";
 import { SelfServeType } from "../SelfServe/SelfServeUtils";
-import { UploadDetails } from "../workers/upload/definitions";
 import * as DataModels from "./DataModels";
 import { SubscriptionType } from "./SubscriptionType";
 
@@ -23,6 +22,14 @@ export interface TokenProvider {
   getAuthHeader(): Promise<Headers>;
 }
 
+export interface UploadDetailsRecord {
+  fileName: string;
+  numSucceeded: number;
+  numFailed: number;
+  numThrottled: number;
+  errors: string[];
+}
+
 export interface QueryResultsMetadata {
   hasMoreResults: boolean;
   firstItemIndex: number;
@@ -88,7 +95,6 @@ export interface Database extends TreeNode {
   loadCollections(): Promise<void>;
   findCollectionWithId(collectionId: string): Collection;
   openAddCollection(database: Database, event: MouseEvent): void;
-  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
   onSettingsClick: () => void;
   loadOffer(): Promise<void>;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -135,6 +141,7 @@ export interface Collection extends CollectionBase {
   onTableEntitiesClick(): void;
   onGraphDocumentsClick(): void;
   onMongoDBDocumentsClick(): void;
+  onSchemaAnalyzerClick(): void;
   openTab(): void;
 
   onSettingsClick: () => Promise<void>;
@@ -175,7 +182,7 @@ export interface Collection extends CollectionBase {
 
   onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
   onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
-  uploadFiles(fileList: FileList): Promise<UploadDetails>;
+  uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
 
   getLabel(): string;
   getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -270,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>;
@@ -361,6 +367,7 @@ export enum CollectionTabKind {
   Schema = 19,
   CollectionSettingsV2 = 20,
   DatabaseSettingsV2 = 21,
+  SchemaAnalyzer = 22,
 }
 
 export enum TerminalKind {
@@ -376,7 +383,6 @@ export interface DataExplorerInputsFrame {
   masterKey?: string;
   hasWriteAccess?: boolean;
   authorizationToken?: string;
-  features: { [key: string]: string };
   csmEndpoint?: string;
   dnsSuffix?: string;
   serverId?: string;
@@ -392,6 +398,9 @@ export interface DataExplorerInputsFrame {
   dataExplorerVersion?: string;
   defaultCollectionThroughput?: CollectionCreationDefaults;
   flights?: readonly string[];
+  features?: {
+    [key: string]: string;
+  };
 }
 
 export interface SelfServeFrameInputs {

src/Definitions/worker.d.ts

@@ -1,7 +0,0 @@
-declare module "worker-loader!*" {
-  class WebpackWorker extends Worker {
-    constructor();
-  }
-
-  export default WebpackWorker;
-}

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,42 +69,14 @@ describe("Component Registerer", () => {
     expect(ko.components.isRegistered("add-collection-pane")).toBe(true);
   });
 
-  it("should register delete-collection-confirmation-pane component", () => {
-    expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
-  });
-
-  it("should register delete-database-confirmation-pane component", () => {
-    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
-  });
-
-  it("should register save-query-pane component", () => {
-    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
-  });
-
-  it("should register browse-queries-pane component", () => {
-    expect(ko.components.isRegistered("browse-queries-pane")).toBe(true);
-  });
-
-  it("should register graph-new-vertex-pane component", () => {
-    expect(ko.components.isRegistered("graph-new-vertex-pane")).toBe(true);
-  });
-
   it("should register graph-styling-pane component", () => {
     expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
   });
 
-  it("should register upload-file-pane component", () => {
-    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
-  });
-
   it("should register string-input-pane component", () => {
     expect(ko.components.isRegistered("string-input-pane")).toBe(true);
   });
 
-  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

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

src/Explorer/ContextMenuButtonFactory.ts

@@ -1,23 +1,22 @@
-import * as ko from "knockout";
-import * as ViewModels from "../Contracts/ViewModels";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import * as ViewModels from "../Contracts/ViewModels";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import { userContext } from "../UserContext";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import Explorer from "./Explorer";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import { userContext } from "../UserContext";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 
 export interface CollectionContextMenuButtonParams {
   databaseId: string;
@@ -43,7 +42,7 @@ export class ResourceTreeContextMenuButtonFactory {
     if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
       items.push({
         iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.deleteDatabaseConfirmationPane.open(),
+        onClick: () => container.openDeleteDatabaseConfirmationPane(),
         label: container.deleteDatabaseText(),
         styleClass: "deleteDatabaseMenuItem",
       });
@@ -56,7 +55,7 @@ export class ResourceTreeContextMenuButtonFactory {
     selectedCollection: ViewModels.Collection
   ): TreeNodeMenuItem[] {
     const items: TreeNodeMenuItem[] = [];
-    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
       items.push({
         iconSrc: AddSqlQueryIcon,
         onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
@@ -81,7 +80,7 @@ export class ResourceTreeContextMenuButtonFactory {
       });
     }
 
-    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
       items.push({
         iconSrc: AddStoredProcedureIcon,
         onClick: () => {
@@ -124,7 +123,7 @@ export class ResourceTreeContextMenuButtonFactory {
     container: Explorer,
     storedProcedure: StoredProcedure
   ): TreeNodeMenuItem[] {
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       return [];
     }
 
@@ -138,7 +137,7 @@ export class ResourceTreeContextMenuButtonFactory {
   }
 
   public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
-    if (container.isPreferredApiCassandra()) {
+    if (userContext.apiType === "Cassandra") {
       return [];
     }
 
@@ -155,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,61 +50,69 @@ 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> {
-  constructor(props: DialogProps) {
-    super(props);
-  }
-
-  public render(): JSX.Element {
-    const dialogProps: IDialogProps = {
-      hidden: !this.props.visible,
-      dialogContentProps: {
-        type: this.props.type || DialogType.normal,
-        title: this.props.title,
-        subText: this.props.subText,
-        styles: {
-          title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
-          subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
-        },
-        showCloseButton: this.props.showCloseButton || false,
-        onDismiss: this.props.onDismiss,
+export const Dialog: FunctionComponent<DialogProps> = ({
+  title,
+  subText,
+  isModal,
+  visible,
+  choiceGroupProps,
+  textFieldProps,
+  linkProps,
+  progressIndicatorProps,
+  primaryButtonText,
+  secondaryButtonText,
+  onPrimaryButtonClick,
+  onSecondaryButtonClick,
+  primaryButtonDisabled,
+  type,
+  showCloseButton,
+  onDismiss,
+}: DialogProps) => {
+  const dialogProps: IDialogProps = {
+    hidden: !visible,
+    dialogContentProps: {
+      type: type || DialogType.normal,
+      title,
+      subText,
+      styles: {
+        title: { fontSize: DIALOG_TITLE_FONT_SIZE, fontWeight: DIALOG_TITLE_FONT_WEIGHT },
+        subText: { fontSize: DIALOG_SUBTEXT_FONT_SIZE },
       },
-      modalProps: { isBlocking: this.props.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,
-      disabled: this.props.primaryButtonDisabled || false,
-      onClick: this.props.onPrimaryButtonClick,
-    };
-    const secondaryButtonProps: IButtonProps =
-      this.props.secondaryButtonText && this.props.onSecondaryButtonClick
-        ? {
-            text: this.props.secondaryButtonText,
-            onClick: this.props.onSecondaryButtonClick,
-          }
-        : undefined;
+      showCloseButton: showCloseButton || false,
+      onDismiss,
+    },
+    modalProps: { isBlocking: isModal, isDarkOverlay: false },
+    minWidth: DIALOG_MIN_WIDTH,
+    maxWidth: DIALOG_MAX_WIDTH,
+  };
 
-    return (
-      <FluentDialog {...dialogProps}>
-        {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
-        {textFieldProps && <TextField {...textFieldProps} />}
-        {linkProps && (
-          <Link href={linkProps.linkUrl} target="_blank">
-            {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
-          </Link>
-        )}
-        {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
-        <DialogFooter>
-          <PrimaryButton {...primaryButtonProps} />
-          {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
-        </DialogFooter>
-      </FluentDialog>
-    );
-  }
-}
+  const primaryButtonProps: IButtonProps = {
+    text: primaryButtonText,
+    disabled: primaryButtonDisabled || false,
+    onClick: onPrimaryButtonClick,
+  };
+  const secondaryButtonProps: IButtonProps =
+    secondaryButtonText && onSecondaryButtonClick
+      ? {
+          text: secondaryButtonText,
+          onClick: onSecondaryButtonClick,
+        }
+      : undefined;
+
+  return (
+    <FluentDialog {...dialogProps}>
+      {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
+      {textFieldProps && <TextField {...textFieldProps} />}
+      {linkProps && (
+        <Link href={linkProps.linkUrl} target="_blank">
+          {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
+        </Link>
+      )}
+      {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
+      <DialogFooter>
+        <PrimaryButton {...primaryButtonProps} />
+        {secondaryButtonProps && <DefaultButton {...secondaryButtonProps} />}
+      </DialogFooter>
+    </FluentDialog>
+  );
+};

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

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

src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx

@@ -21,18 +21,18 @@ import {
   Text,
 } from "office-ui-fabric-react";
 import * as React from "react";
+import { HttpStatusCodes } from "../../../Common/Constants";
+import { handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
+import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
+import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as GalleryUtils from "../../../Utils/GalleryUtils";
+import Explorer from "../../Explorer";
 import { Dialog, DialogProps } from "../Dialog";
 import { GalleryCardComponent, GalleryCardComponentProps } from "./Cards/GalleryCardComponent";
-import "./GalleryViewerComponent.less";
-import { HttpStatusCodes } from "../../../Common/Constants";
-import Explorer from "../../Explorer";
 import { CodeOfConductComponent } from "./CodeOfConductComponent";
+import "./GalleryViewerComponent.less";
 import { InfoComponent } from "./InfoComponent/InfoComponent";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
-import { trace } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 
 export interface GalleryViewerComponentProps {
   container?: Explorer;
@@ -138,11 +138,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
         key: SortBy.MostRecent,
         text: GalleryViewerComponent.mostRecentText,
       },
+      {
+        key: SortBy.MostFavorited,
+        text: GalleryViewerComponent.mostFavoritedText,
+      },
     ];
-    this.sortingOptions.push({
-      key: SortBy.MostFavorited,
-      text: GalleryViewerComponent.mostFavoritedText,
-    });
 
     this.loadTabContent(this.state.selectedTab, this.state.searchText, this.state.sortBy, false);
     this.loadFavoriteNotebooks(this.state.searchText, this.state.sortBy, false); // Need this to show correct favorite button state
@@ -654,7 +654,8 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
   };
 
   private onRenderCell = (data?: IGalleryItem): JSX.Element => {
-    const isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
+    const isFavorite =
+      this.props.container && this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
     const props: GalleryCardComponentProps = {
       data,
       isFavorite,

src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

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

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx

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

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

@@ -1,17 +1,19 @@
 import { shallow } from "enzyme";
-import React from "react";
-import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import { CollectionSettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import { collection } from "./TestUtils";
-import * as DataModels from "../../../Contracts/DataModels";
 import ko from "knockout";
-import { TtlType, isDirty } from "./SettingsUtils";
+import React from "react";
+import { updateCollection } 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";
+import { isDirty, TtlType } from "./SettingsUtils";
+import { collection } from "./TestUtils";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
   getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
   updateCollection: jest.fn().mockReturnValue({
     id: undefined,
@@ -21,16 +23,9 @@ jest.mock("../../../Common/dataAccess/updateCollection", () => ({
     changeFeedPolicy: undefined,
     analyticalStorageTtl: undefined,
     geospatialConfig: undefined,
-  } as DataModels.Collection),
-  updateMongoDBCollectionThroughRP: jest.fn().mockReturnValue({
-    id: undefined,
-    shardKey: undefined,
     indexes: [],
-    analyticalStorageTtl: undefined,
-  } as MongoDBCollectionResource),
+  }),
 }));
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { MongoDBCollectionResource } from "../../../Utils/arm/generatedClients/2020-04-01/types";
 jest.mock("../../../Common/dataAccess/updateOffer", () => ({
   updateOffer: jest.fn().mockReturnValue({} as DataModels.Offer),
 }));
@@ -44,7 +39,6 @@ describe("SettingsComponent", () => {
       tabPath: "",
       node: undefined,
       hashLocation: "settings",
-      isActive: ko.observable(false),
       onUpdateTabsButtons: undefined,
     }),
   };
@@ -113,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;
@@ -134,7 +134,6 @@ describe("SettingsComponent", () => {
       loadCollections: undefined,
       findCollectionWithId: undefined,
       openAddCollection: undefined,
-      onDeleteDatabaseContextMenuClick: undefined,
       readSettings: undefined,
       onSettingsClick: undefined,
       loadOffer: undefined,
@@ -194,7 +193,6 @@ describe("SettingsComponent", () => {
     };
     await settingsComponentInstance.onSaveClick();
     expect(updateCollection).toBeCalled();
-    expect(updateMongoDBCollectionThroughRP).toBeCalled();
     expect(updateOffer).toBeCalled();
   });
 

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -6,7 +6,7 @@ import { AuthType } from "../../../AuthType";
 import * as Constants from "../../../Common/Constants";
 import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
 import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { updateCollection } from "../../../Common/dataAccess/updateCollection";
 import { updateOffer } from "../../../Common/dataAccess/updateOffer";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
@@ -137,11 +137,9 @@ 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 = this.collection?.container.isFeatureEnabled(
-        Constants.Features.enableChangeFeedPolicy
-      );
+      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
 
       // Mongo container with system partition key still treat as "Fixed"
       this.isFixedContainer =
@@ -301,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 &&
@@ -784,12 +782,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
     if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
       try {
         const newMongoIndexes = this.getMongoIndexesToSave();
-        const newMongoCollection: MongoDBCollectionResource = {
+        const newMongoCollection = {
           ...this.mongoDBCollectionResource,
           indexes: newMongoIndexes,
         };
 
-        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
+        this.mongoDBCollectionResource = await updateCollection(
           this.collection.databaseId,
           this.collection.id(),
           newMongoCollection

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

@@ -1,14 +1,13 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
-import { container, collection } from "../TestUtils";
-import { TtlType, GeospatialConfigType, ChangeFeedPolicyState, TtlOnNoDefault, TtlOn, TtlOff } from "../SettingsUtils";
-import ko from "knockout";
+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";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
 
 describe("SubSettingsComponent", () => {
-  container.isPreferredApiDocumentDB = ko.computed(() => true);
-
   const baseProps: SubSettingsComponentProps = {
     collection: collection,
     container: container,
@@ -106,8 +105,13 @@ describe("SubSettingsComponent", () => {
 
   it("partitionKey not visible", () => {
     const newContainer = new Explorer();
-
-    newContainer.isPreferredApiCassandra = ko.computed(() => true);
+    updateUserContext({
+      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

@@ -1,28 +1,38 @@
+import {
+  ChoiceGroup,
+  IChoiceGroupOption,
+  Label,
+  Link,
+  MessageBar,
+  Stack,
+  Text,
+  TextField,
+} from "office-ui-fabric-react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import {
-  GeospatialConfigType,
-  TtlType,
-  ChangeFeedPolicyState,
-  isDirty,
-  IsComponentDirtyResult,
-  TtlOn,
-  TtlOff,
-  TtlOnNoDefault,
-  getSanitizedInputValue,
-} from "../SettingsUtils";
+import { userContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import { Label, Text, TextField, Stack, IChoiceGroupOption, ChoiceGroup, MessageBar } from "office-ui-fabric-react";
 import {
-  getTextFieldStyles,
   changeFeedPolicyToolTip,
+  getChoiceGroupStyles,
+  getTextFieldStyles,
+  messageBarStyles,
   subComponentStackProps,
   titleAndInputStackProps,
-  getChoiceGroupStyles,
   ttlWarning,
-  messageBarStyles,
 } from "../SettingsRenderUtils";
+import {
+  ChangeFeedPolicyState,
+  GeospatialConfigType,
+  getSanitizedInputValue,
+  IsComponentDirtyResult,
+  isDirty,
+  TtlOff,
+  TtlOn,
+  TtlOnNoDefault,
+  TtlType,
+} from "../SettingsUtils";
 import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 
 export interface SubSettingsComponentProps {
@@ -60,17 +70,15 @@ export interface SubSettingsComponentProps {
 
 export class SubSettingsComponent extends React.Component<SubSettingsComponentProps> {
   private shouldCheckComponentIsDirty = true;
-  private ttlVisible: boolean;
   private geospatialVisible: boolean;
   private partitionKeyValue: string;
   private partitionKeyName: string;
 
   constructor(props: SubSettingsComponentProps) {
     super(props);
-    this.ttlVisible = (this.props.container && !this.props.container.isPreferredApiCassandra()) || false;
-    this.geospatialVisible = this.props.container.isPreferredApiDocumentDB();
+    this.geospatialVisible = userContext.apiType === "SQL";
     this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
-    this.partitionKeyName = this.props.container.isPreferredApiMongoDB() ? "Shard key" : "Partition key";
+    this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
   }
 
   componentDidMount(): void {
@@ -170,39 +178,51 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   ): void =>
     this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);
 
-  private getTtlComponent = (): JSX.Element => (
-    <Stack {...titleAndInputStackProps}>
-      <ChoiceGroup
-        id="timeToLive"
-        label="Time to Live"
-        selectedKey={this.props.timeToLive}
-        options={this.ttlChoiceGroupOptions}
-        onChange={this.onTtlChange}
-        styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
-      />
-      {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
-        <MessageBar
-          messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
-          styles={messageBarStyles}
-        >
-          {ttlWarning}
-        </MessageBar>
-      )}
-      {this.props.timeToLive === TtlType.On && (
-        <TextField
-          id="timeToLiveSeconds"
-          styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
-          type="number"
-          required
-          min={1}
-          max={Int32.Max}
-          value={this.props.timeToLiveSeconds?.toString()}
-          onChange={this.onTimeToLiveSecondsChange}
-          suffix="second(s)"
+  private getTtlComponent = (): JSX.Element =>
+    userContext.apiType === "Mongo" ? (
+      <MessageBar
+        messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+        styles={{ text: { fontSize: 14 } }}
+      >
+        To enable time-to-live (TTL) for your collection/documents,
+        <Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
+          create a TTL index
+        </Link>
+        .
+      </MessageBar>
+    ) : (
+      <Stack {...titleAndInputStackProps}>
+        <ChoiceGroup
+          id="timeToLive"
+          label="Time to Live"
+          selectedKey={this.props.timeToLive}
+          options={this.ttlChoiceGroupOptions}
+          onChange={this.onTtlChange}
+          styles={getChoiceGroupStyles(this.props.timeToLive, this.props.timeToLiveBaseline)}
         />
-      )}
-    </Stack>
-  );
+        {isDirty(this.props.timeToLive, this.props.timeToLiveBaseline) && this.props.timeToLive === TtlType.On && (
+          <MessageBar
+            messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
+            styles={messageBarStyles}
+          >
+            {ttlWarning}
+          </MessageBar>
+        )}
+        {this.props.timeToLive === TtlType.On && (
+          <TextField
+            id="timeToLiveSeconds"
+            styles={getTextFieldStyles(this.props.timeToLiveSeconds, this.props.timeToLiveSecondsBaseline)}
+            type="number"
+            required
+            min={1}
+            max={Int32.Max}
+            value={this.props.timeToLiveSeconds?.toString()}
+            onChange={this.onTimeToLiveSecondsChange}
+            suffix="second(s)"
+          />
+        )}
+      </Stack>
+    );
 
   private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [
     { key: TtlType.Off, text: "Off", disabled: true },
@@ -300,8 +320,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
 
   public getPartitionKeyVisible = (): boolean => {
     if (
-      this.props.container.isPreferredApiCassandra() ||
-      this.props.container.isPreferredApiTable() ||
+      userContext.apiType === "Cassandra" ||
+      userContext.apiType === "Tables" ||
       !this.props.collection.partitionKeyProperty ||
       (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey)
     ) {
@@ -315,7 +335,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   public render(): JSX.Element {
     return (
       <Stack {...subComponentStackProps}>
-        {this.ttlVisible && this.getTtlComponent()}
+        {userContext.apiType !== "Cassandra" && this.getTtlComponent()}
 
         {this.geospatialVisible && this.getGeoSpatialComponent()}
 

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

@@ -12,7 +12,6 @@ import {
   TextField,
 } from "office-ui-fabric-react";
 import React from "react";
-import { Features } from "../../../../../Common/Constants";
 import * as DataModels from "../../../../../Contracts/DataModels";
 import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
 import * as SharedConstants from "../../../../../Shared/Constants";
@@ -465,7 +464,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
     const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
     const oneTBinKB = 1000000000;
     const minRUperGB = 10;
-    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
+    const featureFlagEnabled = userContext.features.showMinRUSurvey;
     const collectionIsEligible =
       userContext.subscriptionType !== SubscriptionType.Internal &&
       this.props.usageSizeInKB > oneTBinKB &&

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

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

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

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

src/Explorer/Controls/SmartUi/SmartUiComponent.tsx

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

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

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

src/Explorer/DataSamples/ContainerSampleGenerator.test.ts

@@ -2,22 +2,19 @@ jest.mock("../Graph/GraphExplorerComponent/GremlinClient");
 jest.mock("../../Common/dataAccess/createCollection");
 jest.mock("../../Common/dataAccess/createDocument");
 import * as ko from "knockout";
-import * as ViewModels from "../../Contracts/ViewModels";
 import Q from "q";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 import { createDocument } from "../../Common/dataAccess/createDocument";
-import Explorer from "../Explorer";
+import { DatabaseAccount } from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { updateUserContext } from "../../UserContext";
+import Explorer from "../Explorer";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 describe("ContainerSampleGenerator", () => {
   const createExplorerStub = (database: ViewModels.Database): Explorer => {
     const explorerStub = {} as Explorer;
-    explorerStub.nonSystemDatabases = ko.computed(() => [database]);
-    explorerStub.isPreferredApiGraph = ko.computed<boolean>(() => false);
+    explorerStub.databases = ko.observableArray<ViewModels.Database>([database]);
     explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => false);
-    explorerStub.isPreferredApiDocumentDB = 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();
@@ -31,7 +28,7 @@ describe("ContainerSampleGenerator", () => {
   it("should insert documents for sql API account", async () => {
     const sampleCollectionId = "SampleCollection";
     const sampleDatabaseId = "SampleDB";
-
+    updateUserContext({});
     const sampleData = {
       databaseId: sampleDatabaseId,
       offerThroughput: 400,
@@ -66,7 +63,7 @@ describe("ContainerSampleGenerator", () => {
     database.findCollectionWithId = () => collection;
 
     const explorerStub = createExplorerStub(database);
-    explorerStub.isPreferredApiDocumentDB = ko.computed<boolean>(() => true);
+
     const generator = await ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub);
     generator.setData(sampleData);
 
@@ -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);
@@ -125,31 +128,45 @@ describe("ContainerSampleGenerator", () => {
   });
 
   it("should not create any sample for Mongo API account", async () => {
-    const experience = "not supported api";
+    const experience = "Sample generation not supported for this API Mongo";
     const explorerStub = createExplorerStub(undefined);
-    explorerStub.isPreferredApiMongoDB = ko.computed<boolean>(() => true);
-    explorerStub.defaultExperience = ko.observable<string>(experience);
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableMongo" }],
+        },
+      } as DatabaseAccount,
+    });
 
     // Rejects with error that contains experience
     expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });
 
   it("should not create any sample for Table API account", async () => {
-    const experience = "not supported api";
+    const experience = "Sample generation not supported for this API Tables";
     const explorerStub = createExplorerStub(undefined);
-    explorerStub.isPreferredApiTable = ko.computed<boolean>(() => true);
-    explorerStub.defaultExperience = ko.observable<string>(experience);
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableTable" }],
+        },
+      } as DatabaseAccount,
+    });
 
     // Rejects with error that contains experience
     await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });
 
   it("should not create any sample for Cassandra API account", async () => {
-    const experience = "not supported api";
+    const experience = "Sample generation not supported for this API Cassandra";
+    updateUserContext({
+      databaseAccount: {
+        properties: {
+          capabilities: [{ name: "EnableCassandra" }],
+        },
+      } as DatabaseAccount,
+    });
     const explorerStub = createExplorerStub(undefined);
-    explorerStub.isPreferredApiCassandra = ko.computed<boolean>(() => true);
-    explorerStub.defaultExperience = ko.observable<string>(experience);
-
     // Rejects with error that contains experience
     await expect(ContainerSampleGenerator.createSampleGeneratorAsync(explorerStub)).rejects.toMatch(experience);
   });

src/Explorer/DataSamples/ContainerSampleGenerator.ts

@@ -1,12 +1,12 @@
-import * as DataModels from "../../Contracts/DataModels";
-import * as ViewModels from "../../Contracts/ViewModels";
-import GraphTab from ".././Tabs/GraphTab";
-import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import Explorer from "../Explorer";
 import { createCollection } from "../../Common/dataAccess/createCollection";
 import { createDocument } from "../../Common/dataAccess/createDocument";
+import * as DataModels from "../../Contracts/DataModels";
+import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
+import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
+import GraphTab from ".././Tabs/GraphTab";
+import Explorer from "../Explorer";
+import { GremlinClient } from "../Graph/GraphExplorerComponent/GremlinClient";
 
 interface SampleDataFile extends DataModels.CreateCollectionParams {
   data: any[];
@@ -23,16 +23,16 @@ export class ContainerSampleGenerator {
   public static async createSampleGeneratorAsync(container: Explorer): Promise<ContainerSampleGenerator> {
     const generator = new ContainerSampleGenerator(container);
     let dataFileContent: any;
-    if (container.isPreferredApiGraph()) {
+    if (userContext.apiType === "Gremlin") {
       dataFileContent = await import(
         /* webpackChunkName: "gremlinSampleJsonData" */ "../../../sampleData/gremlinSampleData.json"
       );
-    } else if (container.isPreferredApiDocumentDB()) {
+    } else if (userContext.apiType === "SQL") {
       dataFileContent = await import(
         /* webpackChunkName: "sqlSampleJsonData" */ "../../../sampleData/sqlSampleData.json"
       );
     } else {
-      return Promise.reject(`Sample generation not supported for this API ${container.defaultExperience()}`);
+      return Promise.reject(`Sample generation not supported for this API ${userContext.apiType}`);
     }
 
     generator.setData(dataFileContent);
@@ -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.test.ts

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

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,8 +1,8 @@
 import * as ViewModels from "../../Contracts/ViewModels";
-import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
-import * as NotificationConsoleUtils from "../../Utils/NotificationConsoleUtils";
-import { ConsoleDataType } from "../Menus/NotificationConsole/NotificationConsoleComponent";
+import { userContext } from "../../UserContext";
+import { logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
 import Explorer from "../Explorer";
+import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
 
 export class DataSamplesUtil {
   private static readonly DialogTitle = "Create Sample Container";
@@ -17,21 +17,19 @@ export class DataSamplesUtil {
 
     const databaseName = generator.getDatabaseId();
     const containerName = generator.getCollectionId();
-    if (this.hasContainer(databaseName, containerName, this.container.nonSystemDatabases())) {
+    if (this.hasContainer(databaseName, containerName, this.container.databases())) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
       this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
-      NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, msg);
+      logConsoleError(msg);
       return;
     }
 
     await generator
       .createSampleContainerAsync()
-      .catch((error) =>
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Error, `Error creating sample container: ${error}`)
-      );
+      .catch((error) => logConsoleError(`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);
   }
 
   /**
@@ -56,6 +54,6 @@ export class DataSamplesUtil {
   }
 
   public isSampleContainerCreationSupported(): boolean {
-    return this.container.isPreferredApiDocumentDB() || this.container.isPreferredApiGraph();
+    return userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
   }
 }

src/Explorer/Explorer.test.tsx

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

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts

@@ -1,24 +1,22 @@
-import * as ko from "knockout";
-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 { BaseType } from "d3";
 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/GraphUtil.ts

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

src/Explorer/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) => {
-        NotificationConsoleUtils.logConsoleMessage(ConsoleDataType.Info, msg);
-      },
+      infoCallback: logConsoleInfo,
     });
   }
 

src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts

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

src/Explorer/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

@@ -4,15 +4,15 @@
  * and update any knockout observables passed from the parent.
  */
 import * as ko from "knockout";
+import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import * as React from "react";
 import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import * as ViewModels from "../../../Contracts/ViewModels";
-import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
-import { CommandBar, ICommandBarItemProps } from "office-ui-fabric-react/lib/CommandBar";
 import { StyleConstants } from "../../../Common/Constants";
-import * as CommandBarUtil from "./CommandBarUtil";
-import Explorer from "../../Explorer";
+import * as ViewModels from "../../../Contracts/ViewModels";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
+import * as CommandBarUtil from "./CommandBarUtil";
 
 export class CommandBarComponentAdapter implements ReactAdapter {
   public parameters: ko.Observable<number>;
@@ -23,17 +23,13 @@ export class CommandBarComponentAdapter implements ReactAdapter {
   constructor(container: Explorer) {
     this.container = container;
     this.tabsButtons = [];
-    this.isNotebookTabActive = ko.computed(() =>
-      container.tabsManager.isTabActive(ViewModels.CollectionTabKind.NotebookV2)
+    this.isNotebookTabActive = ko.computed(
+      () => 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.isPreferredApiDocumentDB,
-      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);
-      mockExplorer.isPreferredApiCassandra = ko.computed<boolean>(() => false);
+      updateUserContext({
+        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);
@@ -337,7 +377,6 @@ describe("CommandBarComponentButtonFactory tests", () => {
     beforeAll(() => {
       mockExplorer = {} as Explorer;
       mockExplorer.addCollectionText = ko.observable("mockText");
-      mockExplorer.isPreferredApiDocumentDB = ko.computed(() => true);
       mockExplorer.isDatabaseNodeOrNoneSelected = () => true;
       mockExplorer.isResourceTokenCollectionNodeSelected = ko.computed(() => true);
       mockExplorer.isServerlessEnabled = ko.computed<boolean>(() => false);
@@ -347,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 = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+    const isSqlQuerySupported = userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
     if (isSqlQuerySupported) {
       const newSqlQueryBtn = createNewSQLQueryButton(container);
       buttons.push(newSqlQueryBtn);
     }
 
     const isSupportedOpenQueryApi =
-      container.isPreferredApiDocumentDB() || container.isPreferredApiMongoDB() || container.isPreferredApiGraph();
-    const isSupportedOpenQueryFromDiskApi = container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+      userContext.apiType === "SQL" || container.isPreferredApiMongoDB() || userContext.apiType === "Gremlin";
+    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,
@@ -154,25 +154,18 @@ export function createContextCommandBarButtons(container: Explorer): CommandButt
 }
 
 export function createControlCommandBarButtons(container: Explorer): CommandButtonComponentProps[] {
-  const buttons: CommandButtonComponentProps[] = [];
-  if (configContext.platform === Platform.Hosted) {
-    return buttons;
-  }
-
-  if (!container.isPreferredApiCassandra()) {
-    const label = "Settings";
-    const settingsPaneButton: CommandButtonComponentProps = {
+  const buttons: CommandButtonComponentProps[] = [
+    {
       iconSrc: SettingsIcon,
-      iconAlt: label,
-      onCommandClick: () => container.settingsPane.open(),
+      iconAlt: "Settings",
+      onCommandClick: () => container.openSettingPane(),
       commandButtonLabel: undefined,
-      ariaLabel: label,
-      tooltipText: label,
+      ariaLabel: "Settings",
+      tooltipText: "Settings",
       hasPopup: true,
       disabled: false,
-    };
-    buttons.push(settingsPaneButton);
-  }
+    },
+  ];
 
   if (container.isHostedDataExplorerEnabled()) {
     const label = "Open Full Screen";
@@ -223,8 +216,8 @@ export function createDivider(): CommandButtonComponentProps {
   };
 }
 
-function areScriptsSupported(container: Explorer): boolean {
-  return container.isPreferredApiDocumentDB() || container.isPreferredApiGraph();
+function areScriptsSupported(): boolean {
+  return userContext.apiType === "SQL" || userContext.apiType === "Gremlin";
 }
 
 function createNewCollectionGroup(container: Explorer): CommandButtonComponentProps {
@@ -296,7 +289,7 @@ function createNewDatabase(container: Explorer): CommandButtonComponentProps {
 }
 
 function createNewSQLQueryButton(container: Explorer): CommandButtonComponentProps {
-  if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
     const label = "New SQL Query";
     return {
       iconSrc: AddSqlQueryIcon,
@@ -310,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,
@@ -332,8 +325,7 @@ function createNewSQLQueryButton(container: Explorer): CommandButtonComponentPro
 export function createScriptCommandButtons(container: Explorer): CommandButtonComponentProps[] {
   const buttons: CommandButtonComponentProps[] = [];
 
-  const shouldEnableScriptsCommands: boolean =
-    !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported(container);
+  const shouldEnableScriptsCommands: boolean = !container.isDatabaseNodeOrNoneSelected() && areScriptsSupported();
 
   if (shouldEnableScriptsCommands) {
     const label = "New Stored Procedure";
@@ -407,7 +399,7 @@ function createuploadNotebookButton(container: Explorer): CommandButtonComponent
   return {
     iconSrc: NewNotebookIcon,
     iconAlt: label,
-    onCommandClick: () => container.onUploadToNotebookServerClicked(),
+    onCommandClick: () => container.openUploadFilePanel(),
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,
@@ -420,7 +412,7 @@ function createOpenQueryButton(container: Explorer): CommandButtonComponentProps
   return {
     iconSrc: BrowseQueriesIcon,
     iconAlt: label,
-    onCommandClick: () => container.browseQueriesPane.open(),
+    onCommandClick: () => container.openBrowseQueriesPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -433,7 +425,7 @@ function createOpenQueryFromDiskButton(container: Explorer): CommandButtonCompon
   return {
     iconSrc: OpenQueryFromDiskIcon,
     iconAlt: label,
-    onCommandClick: () => container.loadQueryPane.open(),
+    onCommandClick: () => container.openLoadQueryPanel(),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -453,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(),
@@ -490,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,
@@ -516,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/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx

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

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

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

src/Explorer/Notebook/FileSystemUtil.ts

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

src/Explorer/Notebook/NotebookClientV2.ts

@@ -1,15 +1,16 @@
 // Manages all the redux logic for the notebook nteract code
 // TODO: Merge with NotebookClient?
-import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
-import * as Constants from "../../Common/Constants";
-import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
-
 // Vendor modules
 import {
   actions,
   AppState,
+  ContentRecord,
   createHostRef,
   createKernelspecsRef,
+  HostRecord,
+  HostRef,
+  IContentProvider,
+  KernelspecsRef,
   makeAppRecord,
   makeCommsRecord,
   makeContentsRecord,
@@ -19,23 +20,20 @@ import {
   makeJupyterHostRecord,
   makeStateRecord,
   makeTransformsRecord,
-  ContentRecord,
-  HostRecord,
-  HostRef,
-  KernelspecsRef,
-  IContentProvider,
 } from "@nteract/core";
+import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
 import { Media } from "@nteract/outputs";
 import TransformVDOM from "@nteract/transform-vdom";
 import * as Immutable from "immutable";
-import { Store, AnyAction, MiddlewareAPI, Middleware, Dispatch } from "redux";
-
-import configureStore from "./NotebookComponent/store";
-
 import { Notification } from "react-notification-system";
-import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { AnyAction, Dispatch, Middleware, MiddlewareAPI, Store } from "redux";
+import * as Constants from "../../Common/Constants";
+import { NotebookWorkspaceConnectionInfo } from "../../Contracts/DataModels";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
-import { configOption, createConfigCollection, defineConfigOption } from "@nteract/mythic-configuration";
+import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
+import { userContext } from "../../UserContext";
+import configureStore from "./NotebookComponent/store";
+import { CdbAppState, makeCdbRecord } from "./NotebookComponent/types";
 
 export type KernelSpecsDisplay = { name: string; displayName: string };
 
@@ -125,60 +123,62 @@ export class NotebookClientV2 {
           contents: makeContentsRecord({
             byRef: Immutable.Map<string, ContentRecord>(),
           }),
-          transforms: makeTransformsRecord({
-            displayOrder: Immutable.List([
-              "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.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",
-            ]),
-            byId: Immutable.Map({
-              "text/vnd.plotly.v1+html": NullTransform,
-              "application/vnd.plotly.v1+json": NullTransform,
-              "application/geo+json": NullTransform,
-              "application/x-nteract-model-debug+json": NullTransform,
-              "application/vnd.dataresource+json": NullTransform,
-              "application/vnd.jupyter.widget-view+json": NullTransform,
-              "application/vnd.vegalite.v1+json": NullTransform,
-              "application/vnd.vegalite.v2+json": NullTransform,
-              "application/vnd.vegalite.v3+json": NullTransform,
-              "application/vnd.vega.v2+json": NullTransform,
-              "application/vnd.vega.v3+json": NullTransform,
-              "application/vnd.vega.v4+json": NullTransform,
-              "application/vnd.vega.v5+json": NullTransform,
-              "application/vdom.v1+json": TransformVDOM,
-              "application/json": Media.Json,
-              "application/javascript": Media.JavaScript,
-              "text/html": Media.HTML,
-              "text/markdown": Media.Markdown,
-              "text/latex": Media.LaTeX,
-              "image/svg+xml": Media.SVG,
-              "image/gif": Media.Image,
-              "image/png": Media.Image,
-              "image/jpeg": Media.Image,
-              "text/plain": Media.Plain,
-            }),
-          }),
+          transforms: userContext.features.sandboxNotebookOutputs
+            ? undefined
+            : makeTransformsRecord({
+                displayOrder: Immutable.List([
+                  "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.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",
+                ]),
+                byId: Immutable.Map({
+                  "text/vnd.plotly.v1+html": NullTransform,
+                  "application/vnd.plotly.v1+json": NullTransform,
+                  "application/geo+json": NullTransform,
+                  "application/x-nteract-model-debug+json": NullTransform,
+                  "application/vnd.dataresource+json": NullTransform,
+                  "application/vnd.jupyter.widget-view+json": NullTransform,
+                  "application/vnd.vegalite.v1+json": NullTransform,
+                  "application/vnd.vegalite.v2+json": NullTransform,
+                  "application/vnd.vegalite.v3+json": NullTransform,
+                  "application/vnd.vega.v2+json": NullTransform,
+                  "application/vnd.vega.v3+json": NullTransform,
+                  "application/vnd.vega.v4+json": NullTransform,
+                  "application/vnd.vega.v5+json": NullTransform,
+                  "application/vdom.v1+json": TransformVDOM,
+                  "application/json": Media.Json,
+                  "application/javascript": Media.JavaScript,
+                  "text/html": Media.HTML,
+                  "text/markdown": Media.Markdown,
+                  "text/latex": Media.LaTeX,
+                  "image/svg+xml": Media.SVG,
+                  "image/gif": Media.Image,
+                  "image/png": Media.Image,
+                  "image/jpeg": Media.Image,
+                  "text/plain": Media.Plain,
+                }),
+              }),
         }),
       }),
       cdb: makeCdbRecord({
@@ -200,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)
-            .map((name) => ({
-              name,
-              displayName: payload.kernelspecs[name].displayName,
+          this.kernelSpecsForDisplay = Object.values(payload.kernelspecs)
+            .filter((spec) => !spec.metadata?.hasOwnProperty("hidden"))
+            .map((spec) => ({
+              name: spec.name,
+              displayName: spec.displayName,
             }))
             .sort((a: KernelSpecsDisplay, b: KernelSpecsDisplay) => {
               // Put default at the top, otherwise lexicographically compare