Add command

WIP
2025-12-24 19:31:36 +00:00 · 2021-02-28 23:19:51 -06:00 · 2021-02-26 17:12:12 -06:00
426 changed files with 19119 additions and 46116 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,9 +11,15 @@ src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
 src/Common/DataAccessUtilityBase.ts
+src/Common/DeleteFeedback.ts
+src/Common/DocumentClientUtilityBase.ts
 src/Common/EditableUtility.ts
 src/Common/HashMap.test.ts
 src/Common/HashMap.ts
+src/Common/HeadersUtility.test.ts
+src/Common/HeadersUtility.ts
+src/Common/IteratorUtilities.test.ts
+src/Common/IteratorUtilities.ts
 src/Common/Logger.test.ts
 src/Common/MessageHandler.test.ts
 src/Common/MessageHandler.ts
@@ -24,6 +30,8 @@ src/Common/ObjectCache.test.ts
 src/Common/ObjectCache.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
+src/Common/ThemeUtility.ts
+src/Common/UrlUtility.ts
 src/Config.ts
 src/Contracts/ActionContracts.ts
 src/Contracts/DataModels.ts
@@ -45,10 +53,13 @@ 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
 src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
+src/Explorer/Controls/CommandButton/CommandButton.test.ts
+src/Explorer/Controls/CommandButton/CommandButton.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
 src/Explorer/Controls/DynamicList/DynamicList.test.ts
 src/Explorer/Controls/DynamicList/DynamicListComponent.ts
@@ -84,17 +95,22 @@ src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.ts
 src/Explorer/Graph/GraphExplorerComponent/EdgeInfoCache.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GraphData.ts
+src/Explorer/Graph/GraphExplorerComponent/GraphUtil.test.ts
+src/Explorer/Graph/GraphExplorerComponent/GraphUtil.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 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/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -119,20 +135,33 @@ 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/NewVertexPane.ts
+src/Explorer/Panes/LoadQueryPane.ts
+src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
+src/Explorer/Panes/SaveQueryPane.ts
+src/Explorer/Panes/SettingsPane.test.ts
+src/Explorer/Panes/SettingsPane.ts
+src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
+src/Explorer/Panes/Tables/AddTableEntityPane.ts
 src/Explorer/Panes/Tables/EditTableEntityPane.ts
 src/Explorer/Panes/Tables/EntityPropertyViewModel.ts
+src/Explorer/Panes/Tables/QuerySelectPane.ts
+src/Explorer/Panes/Tables/TableColumnOptionsPane.ts
 src/Explorer/Panes/Tables/TableEntityPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
+src/Explorer/Panes/UploadFilePane.ts
+src/Explorer/Panes/UploadItemsPane.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
@@ -141,6 +170,7 @@ src/Explorer/Tables/DataTable/DataTableBuilder.ts
 src/Explorer/Tables/DataTable/DataTableContextMenu.ts
 src/Explorer/Tables/DataTable/DataTableOperationManager.ts
 src/Explorer/Tables/DataTable/DataTableOperations.ts
+src/Explorer/Tables/DataTable/DataTableUtilities.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
 src/Explorer/Tables/DataTable/TableCommands.ts
 src/Explorer/Tables/DataTable/TableEntityCache.ts
@@ -149,6 +179,8 @@ src/Explorer/Tables/Entities.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroup.ts
 src/Explorer/Tables/QueryBuilder/ClauseGroupViewModel.ts
 src/Explorer/Tables/QueryBuilder/CustomTimestampHelper.ts
+src/Explorer/Tables/QueryBuilder/DateTimeUtilities.test.ts
+src/Explorer/Tables/QueryBuilder/DateTimeUtilities.ts
 src/Explorer/Tables/QueryBuilder/QueryBuilderViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
 src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
@@ -231,6 +263,8 @@ src/Shared/ExplorerSettings.ts
 src/Shared/PriceEstimateCalculator.ts
 src/Shared/StorageUtility.test.ts
 src/Shared/StorageUtility.ts
+src/Shared/StringUtility.test.ts
+src/Shared/StringUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
@@ -239,11 +273,26 @@ src/Terminal/NotebookAppContracts.d.ts
 src/Terminal/index.ts
 src/TokenProviders/PortalTokenProvider.ts
 src/TokenProviders/TokenProviderFactory.ts
+src/Utils/AuthorizationUtils.test.ts
+src/Utils/AuthorizationUtils.ts
+src/Utils/AutoPilotUtils.test.ts
+src/Utils/AutoPilotUtils.ts
+src/Utils/DatabaseAccountUtils.test.ts
+src/Utils/DatabaseAccountUtils.ts
+src/Utils/JunoUtils.ts
+src/Utils/MessageValidation.ts
+src/Utils/NotebookConfigurationUtils.ts
 src/Utils/PricingUtils.test.ts
 src/Utils/QueryUtils.test.ts
+src/Utils/QueryUtils.ts
+src/Utils/StringUtils.test.ts
+src/Utils/StringUtils.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
+src/quickstart.ts
 src/setupTests.ts
+src/workers/upload/definitions.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
@@ -289,8 +338,18 @@ src/Explorer/Graph/GraphExplorerComponent/QueryContainerComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNeighborsComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
+src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx
+src/Explorer/Menus/CommandBar/CommandBarUtil.test.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
+src/Explorer/Menus/CommandBar/MemoryTrackerComponent.tsx
+src/Explorer/Menus/NavBar/ControlBarComponent.tsx
+src/Explorer/Menus/NavBar/ControlBarComponentAdapter.tsx
+src/Explorer/Menus/NavBar/MeControlComponent.test.tsx
+src/Explorer/Menus/NavBar/MeControlComponent.tsx
+src/Explorer/Menus/NavBar/MeControlComponentAdapter.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
--- a/.eslintrc.allFiles.js
+++ b/.eslintrc.allFiles.js
@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+  },
+  plugins: ["@typescript-eslint"],
+  globals: {
+    Atomics: "readonly",
+    SharedArrayBuffer: "readonly",
+  },
+  overrides: [
+    {
+      files: ["**/*.tsx"],
+      plugins: ["react"],
+    },
+    {
+      files: ["**/*.{test,spec}.{ts,tsx}"],
+      env: {
+        jest: true,
+      },
+      plugins: ["jest"],
+    },
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: "module",
+  },
+  rules: {
+    "@typescript-eslint/no-unused-vars-experimental": "error",
+  },
+};
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
    browser: true,
    es6: true,
  },
-  plugins: ["@typescript-eslint", "no-null", "prefer-arrow", "react-hooks"],
+  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  globals: {
    Atomics: "readonly",
@@ -20,7 +20,7 @@ module.exports = {
  overrides: [
    {
      files: ["**/*.tsx"],
-      extends: ["plugin:react/recommended"],
+      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
      plugins: ["react"],
    },
    {
@@ -42,8 +42,6 @@ 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",
      {
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1 +0,0 @@
-[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,9 +0,0 @@
-# Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "daily"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -15,10 +15,10 @@ jobs:
    if: github.ref == 'refs/heads/master'
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: node utils/codeMetrics.js
        env:
@@ -28,10 +28,10 @@ jobs:
    name: "Compile TypeScript"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: npm run compile
      - run: npm run compile:strict
@@ -40,10 +40,10 @@ jobs:
    name: "Check Format"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: npm run format:check
  lint:
@@ -51,10 +51,10 @@ jobs:
    name: "Lint"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: npm run lint
  unittest:
@@ -62,21 +62,22 @@ jobs:
    name: "Unit Tests"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: npm run test
  build:
    runs-on: ubuntu-latest
+    needs: [lint, format, compile, unittest]
    name: "Build"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - run: npm ci
      - run: npm run build:contracts
      - name: Restore Build Cache
@@ -91,25 +92,16 @@ 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"
-    # Temporarily disabled. This test needs to be rewritten in playwright
-    if: false
+    needs: [lint, format, compile, unittest]
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
+          node-version: 12.x
      - uses: southpolesteve/cosmos-emulator-github-action@v1
      - name: End to End Tests
        run: |
@@ -127,46 +119,72 @@ jobs:
        with:
          name: screenshots
          path: failed-*
-  endtoend:
-    name: "E2E"
+  accessibility:
+    name: "Accessibility | Hosted"
+    needs: [lint, format, compile, unittest]
    runs-on: ubuntu-latest
-    env:
-      NODE_TLS_REJECT_UNAUTHORIZED: 0
-      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
-    strategy:
-      fail-fast: false
-      matrix:
-        test-file:
-          - ./test/cassandra/container.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:
      - uses: actions/checkout@v2
-      - name: Use Node.js 14.x
+      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
-          node-version: 14.x
-      - run: npm ci
-      - run: npm start &
-      - run: npm run wait-for-server
-      - name: ${{ matrix['test-file'] }}
+          node-version: 12.x
+      - name: Accessibility Check
        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)
+          # 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 Hosted Tests"
+    needs: [lint, format, compile, unittest]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: End to End Hosted Tests
+        run: |
+          npm ci
+          npm start &
+          node utils/cleanupDBs.js
+          npm run wait-for-server
+          npm run test:e2e
+        shell: bash
+        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"
      - uses: actions/upload-artifact@v2
        if: failure()
        with:
          name: screenshots
-          path: screenshots/
+          path: failed-*
  nuget:
    name: Publish Nuget
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -182,7 +200,7 @@ jobs:
      - run: cp ./configs/prod.json config.json
      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
        name: packages
        with:
@@ -190,7 +208,7 @@ jobs:
  nugetmpac:
    name: Publish Nuget MPAC
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [build]
+    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -207,7 +225,7 @@ jobs:
      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.MPAC/g' DataExplorer.nuspec
      - run: nuget sources add -Name "ADO" -Source "$NUGET_SOURCE" -UserName "GitHub" -Password "$AZURE_DEVOPS_PAT"
      - run: nuget pack -Version "2.0.0-github-${GITHUB_SHA}"
-      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
        name: packages
        with:
--- a/.github/workflows/cleanup.yml
+++ b/.github/workflows/cleanup.yml
@@ -1,28 +0,0 @@
-# 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
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,4 @@ Contracts/*
 .DS_Store
 .cache/
 .env
-failure.png
-screenshots/*
-GettingStarted-ignore*.ipynb
+failure.png
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,26 +1,21 @@
 // Place your settings in this file to overwrite default and user settings.
 {
-  "files.exclude": {
-    ".vs": true,
-    ".vscode/**": true,
-    "*.trx": true,
-    "**/.DS_Store": true,
-    "**/.git": true,
-    "**/.hg": true,
-    "**/.svn": true,
-    "built/**": true,
-    "coverage/**": true,
-    "libs/**": true,
-    "node_modules/**": true,
-    "package-lock.json": true,
-    "quickstart/**": true,
-    "test/out/**": true,
-    "workers/libs/**": true
-  },
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.formatOnSave": true,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.organizeImports": true
-  }
-}
+    "files.exclude": {
+        ".vs": true,
+        ".vscode/**": true,
+        "*.trx": true,
+        "**/.DS_Store": true,
+        "**/.git": true,
+        "**/.hg": true,
+        "**/.svn": true,
+        "built/**": true,
+        "coverage/**": true,
+        "libs/**": true,
+        "node_modules/**": true,
+        "package-lock.json": true,
+        "quickstart/**": true,
+        "test/out/**": true,
+        "workers/libs/**": true
+    },
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
--- a/CODING_GUIDELINES.md
+++ b/CODING_GUIDELINES.md
@@ -153,7 +153,7 @@ Cosmos Explorer has been under constant development for over 5 years. As a resul

 ✅ DO

- Use [Playwright](https://github.com/microsoft/playwright) and [Jest](https://jestjs.io/)
+- Use [Puppeteer](https://developers.google.com/web/tools/puppeteer) 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.

--- a/README.md
+++ b/README.md
@@ -18,6 +18,7 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)

 - Visit: `https://localhost:1234/hostedExplorer.html`
+- Local sign in via AAD will NOT work. Connection string only in dev mode. Use the Portal if you need AAD auth.
 - The default webpack dev server configuration will proxy requests to the production portal backend: `https://main.documentdb.ext.azure.com`. This will allow you to use production connection strings on your local machine.

 ### Emulator Development
@@ -68,7 +69,7 @@ Jest and Puppeteer are used for end to end browser based tests and are contained

 We generally adhere to the release strategy [documented by the Azure SDK Guidelines](https://azure.github.io/azure-sdk/policies_repobranching.html#release-branches). Most releases should happen from the master branch. If master contains commits that cannot be released, you may create a release from a `release/` or `hotfix/` branch. See linked documentation for more details.

-### Architecture
+### Architechture

 [![](https://mermaid.ink/img/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)](https://mermaid-js.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggTFJcbiAgaG9zdGVkKGh0dHBzOi8vY29zbW9zLmF6dXJlLmNvbSlcbiAgcG9ydGFsKFBvcnRhbClcbiAgZW11bGF0b3IoRW11bGF0b3IpXG4gIGFhZFtBQURdXG4gIHJlc291cmNlVG9rZW5bUmVzb3VyY2UgVG9rZW5dXG4gIGNvbm5lY3Rpb25TdHJpbmdbQ29ubmVjdGlvbiBTdHJpbmddXG4gIHBvcnRhbFRva2VuW0VuY3J5cHRlZCBQb3J0YWwgVG9rZW5dXG4gIG1hc3RlcktleVtNYXN0ZXIgS2V5XVxuICBhcm1bQVJNIFJlc291cmNlIFByb3ZpZGVyXVxuICBkYXRhcGxhbmVbRGF0YSBQbGFuZV1cbiAgcHJveHlbUG9ydGFsIEFQSSBQcm94eV1cbiAgc3FsW1NRTF1cbiAgbW9uZ29bTW9uZ29dXG4gIHRhYmxlc1tUYWJsZXNdXG4gIGNhc3NhbmRyYVtDYXNzYW5kcmFdXG4gIGdyYWZbR3JhcGhdXG5cblxuICBlbXVsYXRvciAtLT4gbWFzdGVyS2V5IC0tLS0-IGRhdGFwbGFuZVxuICBwb3J0YWwgLS0-IGFhZFxuICBob3N0ZWQgLS0-IHBvcnRhbFRva2VuICYgcmVzb3VyY2VUb2tlbiAmIGNvbm5lY3Rpb25TdHJpbmcgJiBhYWRcbiAgYWFkIC0tLT4gYXJtXG4gIGFhZCAtLS0-IGRhdGFwbGFuZVxuICBhYWQgLS0tPiBwcm94eVxuICByZXNvdXJjZVRva2VuIC0tLT4gc3FsIC0tPiBkYXRhcGxhbmVcbiAgcG9ydGFsVG9rZW4gLS0tPiBwcm94eVxuICBwcm94eSAtLT4gZGF0YXBsYW5lXG4gIGNvbm5lY3Rpb25TdHJpbmcgLS0-IHNxbCAmIG1vbmdvICYgY2Fzc2FuZHJhICYgZ3JhZiAmIHRhYmxlc1xuICBzcWwgLS0-IGRhdGFwbGFuZVxuICB0YWJsZXMgLS0-IGRhdGFwbGFuZVxuICBtb25nbyAtLT4gcHJveHlcbiAgY2Fzc2FuZHJhIC0tPiBwcm94eVxuICBncmFmIC0tPiBwcm94eVxuXG5cdFx0IiwibWVybWFpZCI6eyJ0aGVtZSI6ImRlZmF1bHQifSwidXBkYXRlRWRpdG9yIjpmYWxzZX0)

--- a/externals/iframeResizer.contentWindow.min.js
+++ b/externals/iframeResizer.contentWindow.min.js
--- a/jest-playwright.config.js
+++ b/jest-playwright.config.js
@@ -1,13 +1,11 @@
 const isCI = require("is-ci");

 module.exports = {
-  exitOnPageError: false,
-  launchOptions: {
+  launch: {
    headless: isCI,
-    slowMo: 10,
-    timeout: 60000,
-  },
-  contextOptions: {
+    slowMo: 55,
+    defaultViewport: null,
    ignoreHTTPSErrors: true,
+    args: ["--disable-web-security"],
  },
 };
--- a/jest.config.e2e.js
+++ b/jest.config.e2e.js
@@ -0,0 +1,5 @@
+module.exports = {
+  preset: "jest-puppeteer",
+  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
+  setupFiles: ["dotenv/config"],
+};
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,13 +21,17 @@ module.exports = {
  collectCoverage: true,

  // An array of glob patterns indicating a set of files for which coverage information should be collected
-  collectCoverageFrom: ["src/**/*.{js,jsx,ts,tsx}"],
+  // collectCoverageFrom: [
+  //   "src/Common/Headers*"
+  // ],

  // The directory where Jest should output its coverage files
  coverageDirectory: "coverage",

  // An array of regexp pattern strings used to skip coverage collection
-  coveragePathIgnorePatterns: ["/node_modules/"],
+  // coveragePathIgnorePatterns: [
+  //   "/node_modules/"
+  // ],

  // A list of reporter names that Jest uses when writing coverage reports
  coverageReporters: ["json", "text", "cobertura"],
@@ -35,10 +39,10 @@ module.exports = {
  // An object that configures minimum threshold enforcement for coverage results
  coverageThreshold: {
    global: {
-      branches: 25,
-      functions: 25,
-      lines: 30,
-      statements: 30,
+      branches: 22,
+      functions: 28,
+      lines: 33,
+      statements: 31,
    },
  },

@@ -67,8 +71,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|css)$": "<rootDir>/mockModule",
-    "@nteract/stateful-components/(.*)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "worker-loader": "<rootDir>/mockModule",
    "office-ui-fabric-react/lib/(.*)$": "office-ui-fabric-react/lib-commonjs/$1", // https://github.com/OfficeDev/office-ui-fabric-react/wiki/Fabric-6-Release-Notes
    "^dnd-core$": "dnd-core/dist/cjs",
    "^react-dnd$": "react-dnd/dist/cjs",
--- a/jest.config.playwright.js
+++ b/jest.config.playwright.js
@@ -1,7 +0,0 @@
-module.exports = {
-  preset: "jest-playwright-preset",
-  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"],
-  testEnvironment: "./test/playwrightEnv.js",
-  setupFilesAfterEnv: ["expect-playwright"],
-};
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -718,7 +718,7 @@ execute-sproc-params-pane {
  }
 }

-.stored-procedure-tab {
+stored-procedure-tab {
  @ToggleHeight: 30px;
  @ToggleWidth: 180px;

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,15 +5,14 @@
  "main": "index.js",
  "dependencies": {
    "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.10.5",
+    "@azure/cosmos": "3.9.0",
    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.2.1",
-    "@azure/ms-rest-nodeauth": "3.0.7",
    "@babel/plugin-proposal-class-properties": "7.12.1",
    "@babel/plugin-proposal-decorators": "7.12.12",
    "@jupyterlab/services": "6.0.2",
    "@jupyterlab/terminal": "3.0.3",
-    "@microsoft/applicationinsights-web": "2.6.1",
+    "@microsoft/applicationinsights-web": "2.5.9",
    "@nteract/commutable": "7.4.2",
    "@nteract/connected-components": "6.8.2",
    "@nteract/core": "15.1.0",
@@ -25,7 +24,7 @@
    "@nteract/iron-icons": "1.0.0",
    "@nteract/jupyter-widgets": "2.0.0",
    "@nteract/logos": "1.0.0",
-    "@nteract/markdown": "4.6.0",
+    "@nteract/markdown": "4.4.0",
    "@nteract/monaco-editor": "3.2.2",
    "@nteract/octicons": "2.0.0",
    "@nteract/outputs": "3.0.9",
@@ -44,7 +43,9 @@
    "@types/node-fetch": "2.5.7",
    "@uifabric/react-cards": "0.109.110",
    "@uifabric/styling": "7.13.7",
+    "abort-controller": "3.0.0",
    "applicationinsights": "1.8.0",
+    "babel-polyfill": "6.26.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
    "clean-webpack-plugin": "0.1.19",
@@ -58,6 +59,9 @@
    "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-nibble": "6.1.0",
    "eslint-plugin-jest": "23.13.2",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
@@ -65,7 +69,6 @@
    "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",
@@ -74,12 +77,13 @@
    "knockout": "3.5.1",
    "mkdirp": "1.0.4",
    "monaco-editor": "0.18.1",
-    "ms": "2.1.3",
    "msal": "1.4.4",
-    "office-ui-fabric-react": "7.164.2",
+    "object.entries": "1.1.0",
+    "office-ui-fabric-react": "7.134.1",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
-    "post-robot": "10.0.42",
+    "promise-polyfill": "8.1.0",
+    "promise.prototype.finally": "3.1.0",
    "q": "1.5.1",
    "react": "16.13.1",
    "react-animate-height": "2.0.8",
@@ -94,12 +98,15 @@
    "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",
-    "terser-webpack-plugin": "3.1.0",
+    "text-encoding": "0.7.0",
    "underscore": "1.9.1",
-    "utility-types": "3.10.0"
+    "url-polyfill": "1.1.7",
+    "utility-types": "3.10.0",
+    "webcrypto-liner": "1.1.4",
+    "webfontloader": "1.6.28",
+    "whatwg-fetch": "3.0.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
@@ -113,23 +120,28 @@
    "@types/d3": "5.9.2",
    "@types/enzyme": "3.10.7",
    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/expect-puppeteer": "4.4.3",
    "@types/hasher": "0.0.31",
    "@types/jest": "26.0.20",
+    "@types/jest-environment-puppeteer": "4.3.2",
    "@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": "3.0.1",
    "@types/q": "1.5.1",
-    "@types/react": "17.0.3",
-    "@types/react-dom": "17.0.3",
+    "@types/react": "17.0.0",
+    "@types/react-dom": "17.0.0",
    "@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",
@@ -144,18 +156,17 @@
    "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": "4.5.2",
+    "html-webpack-plugin": "3.2.0",
+    "inline-css": "2.2.5",
    "jest": "25.5.4",
    "jest-canvas-mock": "2.1.0",
-    "jest-playwright-preset": "1.5.1",
+    "jest-puppeteer": "4.4.0",
    "jest-trx-results-processor": "0.0.7",
    "less": "3.8.1",
    "less-loader": "4.1.0",
@@ -163,23 +174,24 @@
    "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": "4.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.2.4",
+    "typescript": "4.0.2",
    "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"
+    "webpack-dev-server": "3.11.0",
+    "worker-loader": "2.0.0"
  },
  "scripts": {
    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
@@ -201,9 +213,10 @@
    "format": "prettier --write \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
    "format:check": "prettier --check \"{src,test}/**/*.{ts,tsx,html}\" \"*.{js,html}\"",
    "lint": "tslint --project tsconfig.json && eslint \"**/*.{ts,tsx}\"",
+    "lint:important": "eslint --no-ingore --no-eslintrc -c ./eslintrc.important.js \"**/*.{ts,tsx}\"",
    "build:contracts": "npm run compile:contracts",
-    "strict:find": "node ./strict-null-checks/find.js",
-    "strict:add": "node ./strict-null-checks/auto-add.js",
+    "strictEligibleFiles": "node ./strict-migration-tools/index.js",
+    "autoAddStrictEligibleFiles": "node ./strict-migration-tools/autoAdd.js",
    "compile:fullStrict": "tsc -p ./tsconfig.json --strictNullChecks",
    "generateARMClients": "ts-node --compiler-options '{\"module\":\"commonjs\"}' utils/armClientGenerator/generator.ts"
  },
--- a/preview/.azure/config
+++ b/preview/.azure/config
@@ -1,7 +0,0 @@
-[defaults]
-group = stfaul
-sku = P1v2
-appserviceplan = stfaul_asp_Linux_centralus_0
-location = centralus
-web = cosmos-explorer-preview
-
--- a/preview/README.md
+++ b/preview/README.md
@@ -1,20 +0,0 @@
-# Cosmos Explorer Preview
-
-Cosmos Explorer Preview makes it possible to try a working version of any commit on master or in a PR. No need to run the app locally or deploy to staging.
-
-Initial support is for Hosted (Connection string only) or the Azure Portal. Examples:
-
-Connection string URLs: https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/hostedExplorer.html
-Portal URLs: https://ms.portal.azure.com/?dataExplorerSource=https://cosmos-explorer-preview.azurewebsites.net/commit/COMMIT_SHA/explorer.html#home
-
-In both cases replace `COMMIT_SHA` with the commit you want to view. It must have already completed its build on GitHub Actions.
-
-### Architechture
-
- This folder contains a NodeJS app deployed to Azure App Service that powers preview URLs:
-  - Paths starting with `/commit/` are proxied to an Azure Storage account containing build artifacts
-  - Paths starting with `/proxy/` are proxied dynamically to Cosmos account endpoints. Required otherwise CORS would need to be configured for every account accessed.
-  - Paths starting with `/api/` are proxied to Portal APIs that do not support CORS.
- On GitHub Actions build completion:
-  - All files in dist are uploaded to an Azure Storage account namespaced by the SHA of the commit
-  - `/preview/config.json` is uploaded to the same folder with preview specific configuration
--- a/preview/config.json
+++ b/preview/config.json
@@ -1,3 +0,0 @@
-{
-  "PROXY_PATH": "/proxy"
-}
--- a/preview/index.js
+++ b/preview/index.js
@@ -1,68 +0,0 @@
-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}`);
-});
--- a/preview/package-lock.json
+++ b/preview/package-lock.json
--- a/preview/package.json
+++ b/preview/package.json
@@ -1,18 +0,0 @@
-{
-  "name": "cosmos-explorer-preview",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
-    "start": "node index.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "Microsoft Corporation",
-  "dependencies": {
-    "express": "^4.17.1",
-    "http-proxy-middleware": "^1.1.0",
-    "node-fetch": "^2.6.1"
-  }
-}
--- a/src/CellOutputViewer/CellOutputViewer.tsx
+++ b/src/CellOutputViewer/CellOutputViewer.tsx
@@ -1,68 +0,0 @@
-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);
--- a/src/CellOutputViewer/TransformMedia.tsx
+++ b/src/CellOutputViewer/TransformMedia.tsx
@@ -1,138 +0,0 @@
-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;
--- a/src/CellOutputViewer/cellOutputViewer.html
+++ b/src/CellOutputViewer/cellOutputViewer.html
@@ -1,12 +0,0 @@
-<!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>
--- a/src/CellOutputViewer/transforms/Vega2.ts
+++ b/src/CellOutputViewer/transforms/Vega2.ts
@@ -1 +0,0 @@
-export { Vega2 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega3.ts
+++ b/src/CellOutputViewer/transforms/Vega3.ts
@@ -1 +0,0 @@
-export { Vega3 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega4.ts
+++ b/src/CellOutputViewer/transforms/Vega4.ts
@@ -1 +0,0 @@
-export { Vega4 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/Vega5.ts
+++ b/src/CellOutputViewer/transforms/Vega5.ts
@@ -1 +0,0 @@
-export { Vega5 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite1.ts
+++ b/src/CellOutputViewer/transforms/VegaLite1.ts
@@ -1 +0,0 @@
-export { VegaLite1 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite2.ts
+++ b/src/CellOutputViewer/transforms/VegaLite2.ts
@@ -1 +0,0 @@
-export { VegaLite2 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite3.ts
+++ b/src/CellOutputViewer/transforms/VegaLite3.ts
@@ -1 +0,0 @@
-export { VegaLite3 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/VegaLite4.ts
+++ b/src/CellOutputViewer/transforms/VegaLite4.ts
@@ -1 +0,0 @@
-export { VegaLite4 as default } from "@nteract/transform-vega";
--- a/src/CellOutputViewer/transforms/WidgetDisplay.ts
+++ b/src/CellOutputViewer/transforms/WidgetDisplay.ts
@@ -1 +0,0 @@
-export { WidgetDisplay as default } from "@nteract/jupyter-widgets";
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -98,6 +98,30 @@ 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";
+}
+
 // flight names returned from the portal are always lowercase
 export class Flights {
  public static readonly SettingsV2 = "settingsv2";
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -1,10 +1,10 @@
 import * as Cosmos from "@azure/cosmos";
 import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";

 const _global = typeof self === "undefined" ? window : self;

@@ -32,7 +32,7 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {
 };

 export const requestPlugin: Cosmos.Plugin<any> = async (requestContext, next) => {
-  requestContext.endpoint = new URL(configContext.PROXY_PATH, window.location.href).href;
+  requestContext.endpoint = configContext.PROXY_PATH;
  requestContext.headers["x-ms-proxy-target"] = endpoint();
  return next(requestContext);
 };
@@ -75,10 +75,7 @@ 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,
@@ -92,6 +89,5 @@ export function client(): Cosmos.CosmosClient {
  if (configContext.PROXY_PATH !== undefined) {
    (options as any).plugins = [{ on: "request", plugin: requestPlugin }];
  }
-  _client = new Cosmos.CosmosClient(options);
-  return _client;
+  return new Cosmos.CosmosClient(options);
 }
--- a/src/Common/EntityValue.tsx
+++ b/src/Common/EntityValue.tsx
@@ -1,61 +0,0 @@
-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}
-    />
-  );
-};
--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -1,9 +1,8 @@
+import { ARMError } from "../Utils/arm/request";
+import { HttpStatusCodes } from "./Constants";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { SubscriptionType } from "../Contracts/SubscriptionType";
-import { userContext } from "../UserContext";
-import { ARMError } from "../Utils/arm/request";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
-import { HttpStatusCodes } from "./Constants";
 import { logError } from "./Logger";
 import { sendMessage } from "./MessageHandler";

@@ -45,7 +44,7 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri

 const replaceKnownError = (errorMessage: string): string => {
  if (
-    userContext.subscriptionType === SubscriptionType.Internal &&
+    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
    errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
  ) {
    return "Database throughput is not supported for internal subscriptions.";
--- a/src/Common/HeadersUtility.ts
+++ b/src/Common/HeadersUtility.ts
@@ -1,5 +1,28 @@
+import * as Constants from "./Constants";
+
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";

+// x-ms-resource-quota: databases = 100; collections = 5000; users = 500000; permissions = 2000000;
+export function getQuota(responseHeaders: any): any {
+  return responseHeaders && responseHeaders[Constants.HttpHeaders.resourceQuota]
+    ? parseStringIntoObject(responseHeaders[Constants.HttpHeaders.resourceQuota])
+    : null;
+}
+
 export function shouldEnableCrossPartitionKey(): boolean {
  return LocalStorageUtility.getEntryString(StorageKey.IsCrossPartitionQueryEnabled) === "true";
 }
+
+function parseStringIntoObject(resourceString: string) {
+  var entityObject: any = {};
+
+  if (resourceString) {
+    var entitiesArray: string[] = resourceString.split(";");
+    for (var i: any = 0; i < entitiesArray.length; i++) {
+      var entity: string[] = entitiesArray[i].split("=");
+      entityObject[entity[0]] = entity[1];
+    }
+  }
+
+  return entityObject;
+}
--- a/src/Common/IteratorUtilities.ts
+++ b/src/Common/IteratorUtilities.ts
@@ -1,8 +1,6 @@
 import { QueryResults } from "../Contracts/ViewModels";

 interface QueryResponse {
-  // [Todo] remove any
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  resources: any[];
  hasMoreResults: boolean;
  activityId: string;
@@ -18,7 +16,6 @@ export interface MinimalQueryIterator {
 export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
  return documentsIterator.fetchNext().then((response) => {
    const documents = response.resources;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const headers = (response as any).headers || {}; // TODO this is a private key. Remove any
    const itemCount = (documents && documents.length) || 0;
    return {
--- a/src/Common/Logger.ts
+++ b/src/Common/Logger.ts
@@ -1,7 +1,7 @@
-import { SeverityLevel } from "@microsoft/applicationinsights-web";
-import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
-import { trackTrace } from "../Shared/appInsights";
 import { sendMessage } from "./MessageHandler";
+import { Diagnostics, MessageTypes } from "../Contracts/ExplorerContracts";
+import { appInsights } from "../Shared/appInsights";
+import { SeverityLevel } from "@microsoft/applicationinsights-web";

 // TODO: Move to a separate Diagnostics folder
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -46,7 +46,7 @@ function _logEntry(entry: Diagnostics.LogEntry): void {
        return SeverityLevel.Information;
    }
  })(entry.level);
-  trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
+  appInsights.trackTrace({ message: entry.message, severityLevel }, { area: entry.area });
 }

 function _generateLogEntry(
--- a/src/Common/MessageHandler.ts
+++ b/src/Common/MessageHandler.ts
@@ -1,8 +1,8 @@
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import Q from "q";
 import * as _ from "underscore";
-import { MessageTypes } from "../Contracts/ExplorerContracts";
-import { getDataExplorerWindow } from "../Utils/WindowUtils";
 import * as Constants from "./Constants";
+import { getDataExplorerWindow } from "../Utils/WindowUtils";

 export interface CachedDataPromise<T> {
  deferred: Q.Deferred<T>;
@@ -48,18 +48,17 @@ export function sendCachedDataMessage<TResponseDataModel>(
 }

 export function sendMessage(data: any): void {
-  _sendMessage({
-    signature: "pcIframe",
-    data: data,
-  });
-}
-
-export function sendReadyMessage(): void {
-  _sendMessage({
-    signature: "pcIframe",
-    kind: "ready",
-    data: "ready",
-  });
+  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
+    );
+  }
 }

 export function canSendMessage(): boolean {
@@ -75,17 +74,3 @@ 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 || "*");
-    }
-  }
-};
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -5,10 +5,11 @@ 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 { userContext } from "../UserContext";
-import { logConsoleError } from "../Utils/NotificationConsoleUtils";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
+import { userContext } from "../UserContext";
 import { MinimalQueryIterator } from "./IteratorUtilities";
 import { sendMessage } from "./MessageHandler";

@@ -347,7 +348,10 @@ 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
-  logConsoleError(`Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`);
+  NotificationConsoleUtils.logConsoleMessage(
+    ConsoleDataType.Error,
+    `Error ${action}: ${errorMessage}, Payload: ${JSON.stringify(params)}`
+  );
  if (response.status === HttpStatusCodes.Forbidden) {
    sendMessage({ type: MessageTypes.ForbiddenError, reason: errorMessage });
    return;
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -6,7 +6,7 @@ import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
+import { QueryUtils } from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
--- a/src/Common/TableEntity.tsx
+++ b/src/Common/TableEntity.tsx
@@ -1,136 +0,0 @@
-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>
-    </>
-  );
-};
--- a/src/Common/ThemeUtility.ts
+++ b/src/Common/ThemeUtility.ts
@@ -2,16 +2,18 @@
 * Copyright (C) Microsoft Corporation. All rights reserved.
 *----------------------------------------------------------*/

-export function getMonacoTheme(theme: string): string {
-  switch (theme) {
-    case "default":
-    case "hc-white":
-      return "vs";
-    case "dark":
-      return "vs-dark";
-    case "hc-black":
-      return "hc-black";
-    default:
-      return "vs";
+export default class ThemeUtility {
+  public static getMonacoTheme(theme: string): string {
+    switch (theme) {
+      case "default":
+      case "hc-white":
+        return "vs";
+      case "dark":
+        return "vs-dark";
+      case "hc-black":
+        return "hc-black";
+      default:
+        return "vs";
+    }
  }
 }
--- a/src/Common/Tooltip/Tooltip.tsx
+++ b/src/Common/Tooltip/Tooltip.tsx
@@ -1,24 +0,0 @@
-import { useId } from "@uifabric/react-hooks";
-import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
-import * as React from "react";
-import InfoBubble from "../../../images/info-bubble.svg";
-
-const calloutProps = { gapSpace: 0 };
-const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
-
-export interface TooltipProps {
-  children: string;
-}
-export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
-  const tooltipId = useId("tooltip");
-
-  return children ? (
-    <span>
-      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
-        <img className="infoImg" src={InfoBubble} alt="More information" />
-      </TooltipHost>
-    </span>
-  ) : (
-    <></>
-  );
-};
--- a/src/Common/Upload/Upload.tsx
+++ b/src/Common/Upload/Upload.tsx
@@ -1,75 +0,0 @@
-import { Image, Stack, TextField } from "office-ui-fabric-react";
-import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
-import FolderIcon from "../../../images/folder_16x16.svg";
-import * as Constants from "../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>
-  );
-};
--- a/src/Common/UrlUtility.ts
+++ b/src/Common/UrlUtility.ts
@@ -1,61 +1,55 @@
-interface Result {
-  type?: string;
-  objectBody?: {
-    id: string;
-    self: string;
-  };
-}
-
-export function parseDocumentsPath(resourcePath: string): Result {
-  if (typeof resourcePath !== "string") {
-    return {};
-  }
-
-  if (resourcePath.length === 0) {
-    return {};
-  }
-
-  if (resourcePath[resourcePath.length - 1] !== "/") {
-    resourcePath = resourcePath + "/";
-  }
-
-  if (resourcePath[0] !== "/") {
-    resourcePath = "/" + resourcePath;
-  }
-
-  let id: string;
-  let type: string;
-  const pathParts = resourcePath.split("/");
-
-  if (pathParts.length % 2 === 0) {
-    id = pathParts[pathParts.length - 2];
-    type = pathParts[pathParts.length - 3];
-  } else {
-    id = pathParts[pathParts.length - 3];
-    type = pathParts[pathParts.length - 2];
-  }
-
-  const result = {
-    type: type,
-    objectBody: {
-      id: id,
-      self: resourcePath,
-    },
-  };
-
-  return result;
-}
-
-export function createUri(baseUri: string, relativeUri: string): string {
-  if (!baseUri) {
-    throw new Error("baseUri is null or empty");
-  }
-
-  const slashAtEndOfUriRegex = /\/$/,
-    slashAtStartOfUriRegEx = /^\//;
-
-  const normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
-    normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
-
-  return normalizedBaseUri + normalizedRelativeUri;
+export default class UrlUtility {
+  public static parseDocumentsPath(resourcePath: string): any {
+    if (typeof resourcePath !== "string") {
+      return {};
+    }
+
+    if (resourcePath.length === 0) {
+      return {};
+    }
+
+    if (resourcePath[resourcePath.length - 1] !== "/") {
+      resourcePath = resourcePath + "/";
+    }
+
+    if (resourcePath[0] !== "/") {
+      resourcePath = "/" + resourcePath;
+    }
+
+    var id: string;
+    var type: string;
+    var pathParts = resourcePath.split("/");
+
+    if (pathParts.length % 2 === 0) {
+      id = pathParts[pathParts.length - 2];
+      type = pathParts[pathParts.length - 3];
+    } else {
+      id = pathParts[pathParts.length - 3];
+      type = pathParts[pathParts.length - 2];
+    }
+
+    var result = {
+      type: type,
+      objectBody: {
+        id: id,
+        self: resourcePath,
+      },
+    };
+
+    return result;
+  }
+
+  public static createUri(baseUri: string, relativeUri: string): string {
+    if (!baseUri) {
+      throw new Error("baseUri is null or empty");
+    }
+
+    var slashAtEndOfUriRegex = /\/$/,
+      slashAtStartOfUriRegEx = /^\//;
+
+    var normalizedBaseUri = baseUri.replace(slashAtEndOfUriRegex, "") + "/",
+      normalizedRelativeUri = (relativeUri && relativeUri.replace(slashAtStartOfUriRegEx, "")) || "";
+
+    return normalizedBaseUri + normalizedRelativeUri;
+  }
 }
--- a/src/Common/snapshots/CosmosClient.test.ts.snap
+++ b/src/Common/snapshots/CosmosClient.test.ts.snap
@@ -2,7 +2,7 @@

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

 exports[`requestPlugin Hosted builds a proxy URL in development 1`] = `
 Object {
-  "endpoint": "http://localhost/proxy",
+  "endpoint": "/proxy",
  "headers": Object {
    "x-ms-proxy-target": "baz",
  },
--- a/src/Common/dataAccess/bulkCreateDocument.ts
+++ b/src/Common/dataAccess/bulkCreateDocument.ts
@@ -1,39 +0,0 @@
-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();
-  }
-};
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -1,15 +1,15 @@
-import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
-import { userContext } from "../../UserContext";
-import { listCassandraTables } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-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 { client } from "../CosmosClient";
 import { handleError } from "../ErrorHandlingUtils";
+import { listSqlContainers } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
+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 { listTables } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { userContext } from "../../UserContext";

 export async function readCollections(databaseId: string): Promise<DataModels.Collection[]> {
  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
@@ -17,6 +17,7 @@ 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);
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -1,37 +1,39 @@
-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 { userContext } from "../../UserContext";
+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 {
  createUpdateCassandraTable,
  getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
-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 {
-  ExtendedResourceProperties,
-  MongoDBCollectionCreateUpdateParameters,
-  SqlContainerCreateUpdateParameters,
-  SqlContainerResource,
-} from "../../Utils/arm/generatedClients/2020-04-01/types";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import { client } from "../CosmosClient";
+  createUpdateGremlinGraph,
+  getGremlinGraph,
+} from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
+import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { handleError } from "../ErrorHandlingUtils";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { userContext } from "../../UserContext";

 export async function updateCollection(
  databaseId: string,
  collectionId: string,
-  newCollection: Partial<Collection>,
+  newCollection: Collection,
  options: RequestOptions = {}
 ): Promise<Collection> {
  let collection: Collection;
@@ -41,6 +43,7 @@ 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);
@@ -66,7 +69,7 @@ export async function updateCollection(
 async function updateCollectionWithARM(
  databaseId: string,
  collectionId: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const subscriptionId = userContext.subscriptionId;
  const resourceGroup = userContext.resourceGroup;
@@ -82,15 +85,6 @@ 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}`);
  }
@@ -102,7 +96,7 @@ async function updateSqlContainer(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getSqlContainer(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -121,26 +115,35 @@ async function updateSqlContainer(
  throw new Error(`Sql container to update does not exist. Database id: ${databaseId} Collection id: ${collectionId}`);
 }

-export async function updateMongoDBCollection(
+export async function updateMongoDBCollectionThroughRP(
  databaseId: string,
  collectionId: string,
-  subscriptionId: string,
-  resourceGroup: string,
-  accountName: string,
-  newCollection: Partial<Collection>
-): Promise<Collection> {
+  newCollection: MongoDBCollectionResource,
+  updateOptions?: CreateUpdateOptions
+): Promise<MongoDBCollectionResource> {
+  const subscriptionId = userContext.subscriptionId;
+  const resourceGroup = userContext.resourceGroup;
+  const accountName = userContext.databaseAccount.name;
+
  const getResponse = await getMongoDBCollection(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
-    getResponse.properties.resource = newCollection as SqlContainerResource & ExtendedResourceProperties;
+    const updateParams: MongoDBCollectionCreateUpdateParameters = {
+      properties: {
+        resource: newCollection,
+        options: updateOptions,
+      },
+    };
+
    const updateResponse = await createUpdateMongoDBCollection(
      subscriptionId,
      resourceGroup,
      accountName,
      databaseId,
      collectionId,
-      getResponse as MongoDBCollectionCreateUpdateParameters
+      updateParams
    );
-    return updateResponse && (updateResponse.properties.resource as Collection);
+
+    return updateResponse && (updateResponse.properties.resource as MongoDBCollectionResource);
  }

  throw new Error(
@@ -154,7 +157,7 @@ async function updateCassandraTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getCassandraTable(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -181,7 +184,7 @@ async function updateGremlinGraph(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getGremlinGraph(subscriptionId, resourceGroup, accountName, databaseId, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
@@ -205,7 +208,7 @@ async function updateTable(
  subscriptionId: string,
  resourceGroup: string,
  accountName: string,
-  newCollection: Partial<Collection>
+  newCollection: Collection
 ): Promise<Collection> {
  const getResponse = await getTable(subscriptionId, resourceGroup, accountName, collectionId);
  if (getResponse && getResponse.properties && getResponse.properties.resource) {
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -26,7 +26,6 @@ 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
@@ -54,13 +53,6 @@ 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 {
@@ -94,18 +86,13 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
    });
    if (response.status === 200) {
      try {
-        const { allowedParentFrameOrigins, allowedJunoOrigins, ...externalConfig } = await response.json();
+        const { allowedParentFrameOrigins, ...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);
--- a/src/Contracts/ActionContracts.ts
+++ b/src/Contracts/ActionContracts.ts
@@ -4,7 +4,6 @@
 export enum TabKind {
  SQLDocuments,
  MongoDocuments,
-  SchemaAnalyzer,
  TableEntities,
  Graph,
  SQLQuery,
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -9,10 +9,10 @@ export interface DatabaseAccount {
 }

 export interface DatabaseAccountExtendedProperties {
-  documentEndpoint?: string;
-  tableEndpoint?: string;
-  gremlinEndpoint?: string;
-  cassandraEndpoint?: string;
+  documentEndpoint: string;
+  tableEndpoint: string;
+  gremlinEndpoint: string;
+  cassandraEndpoint: string;
  configurationOverrides?: ConfigurationOverrides;
  capabilities?: Capability[];
  enableMultipleWriteLocations?: boolean;
@@ -121,10 +121,6 @@ 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;
--- a/src/Contracts/SelfServeContracts.ts
+++ b/src/Contracts/SelfServeContracts.ts
@@ -1,9 +0,0 @@
-/**
- * Messaging types used with SelfServe Component <-> Portal communication
- * and Hosted <-> SelfServe Component communication
- */
-
-export enum SelfServeMessageTypes {
-  TelemetryInfo = "TelemetryInfo",
-  Notification = "Notification",
-}
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -15,6 +15,7 @@ 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";

@@ -22,14 +23,6 @@ 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;
@@ -95,6 +88,7 @@ export interface Database extends TreeNode {
  loadCollections(): Promise<void>;
  findCollectionWithId(collectionId: string): Collection;
  openAddCollection(database: Database, event: MouseEvent): void;
+  onDeleteDatabaseContextMenuClick(source: Database, event: MouseEvent | KeyboardEvent): void;
  onSettingsClick: () => void;
  loadOffer(): Promise<void>;
  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -141,7 +135,6 @@ export interface Collection extends CollectionBase {
  onTableEntitiesClick(): void;
  onGraphDocumentsClick(): void;
  onMongoDBDocumentsClick(): void;
-  onSchemaAnalyzerClick(): void;
  openTab(): void;

  onSettingsClick: () => Promise<void>;
@@ -182,7 +175,7 @@ export interface Collection extends CollectionBase {

  onDragOver(source: Collection, event: { originalEvent: DragEvent }): void;
  onDrop(source: Collection, event: { originalEvent: DragEvent }): void;
-  uploadFiles(fileList: FileList): Promise<{ data: UploadDetailsRecord[] }>;
+  uploadFiles(fileList: FileList): Promise<UploadDetails>;

  getLabel(): string;
  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
@@ -277,6 +270,7 @@ export interface TabOptions {
  tabKind: CollectionTabKind;
  title: string;
  tabPath: string;
+  isActive: ko.Observable<boolean>;
  hashLocation: string;
  onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
  isTabsContentExpanded?: ko.Observable<boolean>;
@@ -367,7 +361,6 @@ export enum CollectionTabKind {
  Schema = 19,
  CollectionSettingsV2 = 20,
  DatabaseSettingsV2 = 21,
-  SchemaAnalyzer = 22,
 }

 export enum TerminalKind {
@@ -383,6 +376,7 @@ export interface DataExplorerInputsFrame {
  masterKey?: string;
  hasWriteAccess?: boolean;
  authorizationToken?: string;
+  features: { [key: string]: string };
  csmEndpoint?: string;
  dnsSuffix?: string;
  serverId?: string;
@@ -396,21 +390,10 @@ export interface DataExplorerInputsFrame {
  sharedThroughputMaximum?: number;
  sharedThroughputDefault?: number;
  dataExplorerVersion?: string;
+  isAuthWithresourceToken?: boolean;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  flights?: readonly string[];
-  features?: {
-    [key: string]: string;
-  };
-}
-
-export interface SelfServeFrameInputs {
-  selfServeType: SelfServeType;
-  databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  authorizationToken: string;
-  csmEndpoint: string;
-  flights?: readonly string[];
+  selfServeType?: SelfServeType;
 }

 export interface CollectionCreationDefaults {
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/src/Controls/Heatmap/Heatmap.ts
@@ -1,10 +1,5 @@
-import dayjs from "dayjs";
 import * as Plotly from "plotly.js-cartesian-dist-min";
-import { StyleConstants } from "../../Common/Constants";
-import { sendCachedDataMessage, sendReadyMessage } from "../../Common/MessageHandler";
-import { MessageTypes } from "../../Contracts/ExplorerContracts";
-import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
-import "./Heatmap.less";
+import dayjs from "dayjs";
 import {
  ChartSettings,
  DataPayload,
@@ -16,6 +11,11 @@ import {
  PartitionTimeStampToData,
  PortalTheme,
 } from "./HeatmapDatatypes";
+import { isInvalidParentFrameOrigin } from "../../Utils/MessageValidation";
+import { sendCachedDataMessage, sendMessage } from "../../Common/MessageHandler";
+import { MessageTypes } from "../../Contracts/ExplorerContracts";
+import { StyleConstants } from "../../Common/Constants";
+import "./Heatmap.less";

 export class Heatmap {
  public static readonly elementId: string = "heatmap";
@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }

 window.addEventListener("message", handleMessage, false);
-sendReadyMessage();
+sendMessage("ready");
--- a/src/Definitions/worker.d.ts
+++ b/src/Definitions/worker.d.ts
@@ -0,0 +1,7 @@
+declare module "worker-loader!*" {
+  class WebpackWorker extends Worker {
+    constructor();
+  }
+
+  export default WebpackWorker;
+}
--- a/src/Explorer/ComponentRegisterer.test.ts
+++ b/src/Explorer/ComponentRegisterer.test.ts
@@ -8,6 +8,10 @@ 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);
  });
@@ -69,14 +73,42 @@ 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);
  });
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -1,30 +1,19 @@
 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());
@@ -32,33 +21,54 @@ 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
-[
-  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 }));
+ko.components.register("documents-tab", new TabComponents.DocumentsTab());
+ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
+ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
+ko.components.register("trigger-tab", new TabComponents.TriggerTab());
+ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
+ko.components.register("collection-settings-tab-v2", new TabComponents.SettingsTabV2());
+ko.components.register("query-tab", new TabComponents.QueryTab());
+ko.components.register("tables-query-tab", new TabComponents.QueryTablesTab());
+ko.components.register("graph-tab", new TabComponents.GraphTab());
+ko.components.register("mongo-shell-tab", new TabComponents.MongoShellTab());
+ko.components.register("conflicts-tab", new TabComponents.ConflictsTab());
+ko.components.register("notebookv2-tab", new TabComponents.NotebookV2Tab());
+ko.components.register("terminal-tab", new TabComponents.TerminalTab());
+ko.components.register("gallery-tab", new TabComponents.GalleryTab());
+ko.components.register("notebook-viewer-tab", new TabComponents.NotebookViewerTab());
+
+// Database Tabs
+ko.components.register("database-settings-tab", new TabComponents.DatabaseSettingsTab());
+ko.components.register("database-settings-tab-v2", new TabComponents.SettingsTabV2());

 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
 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());
--- a/src/Explorer/ContextMenuButtonFactory.ts
+++ b/src/Explorer/ContextMenuButtonFactory.ts
@@ -1,22 +1,23 @@
+import * as ko from "knockout";
+import * as ViewModels from "../Contracts/ViewModels";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
 import AddCollectionIcon from "../../images/AddCollection.svg";
 import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
 import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
 import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
 import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
 import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
 import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";
-import { userContext } from "../UserContext";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
 import Explorer from "./Explorer";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
 import StoredProcedure from "./Tree/StoredProcedure";
 import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { userContext } from "../UserContext";
+import { DefaultAccountExperienceType } from "../DefaultAccountExperienceType";

 export interface CollectionContextMenuButtonParams {
  databaseId: string;
@@ -42,7 +43,7 @@ export class ResourceTreeContextMenuButtonFactory {
    if (userContext.defaultExperience !== DefaultAccountExperienceType.Table) {
      items.push({
        iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
+        onClick: () => container.deleteDatabaseConfirmationPane.open(),
        label: container.deleteDatabaseText(),
        styleClass: "deleteDatabaseMenuItem",
      });
@@ -55,7 +56,7 @@ export class ResourceTreeContextMenuButtonFactory {
    selectedCollection: ViewModels.Collection
  ): TreeNodeMenuItem[] {
    const items: TreeNodeMenuItem[] = [];
-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
      items.push({
        iconSrc: AddSqlQueryIcon,
        onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
@@ -80,7 +81,7 @@ export class ResourceTreeContextMenuButtonFactory {
      });
    }

-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    if (container.isPreferredApiDocumentDB() || container.isPreferredApiGraph()) {
      items.push({
        iconSrc: AddStoredProcedureIcon,
        onClick: () => {
@@ -123,7 +124,7 @@ export class ResourceTreeContextMenuButtonFactory {
    container: Explorer,
    storedProcedure: StoredProcedure
  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
+    if (container.isPreferredApiCassandra()) {
      return [];
    }

@@ -137,7 +138,7 @@ export class ResourceTreeContextMenuButtonFactory {
  }

  public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
+    if (container.isPreferredApiCassandra()) {
      return [];
    }

@@ -154,7 +155,7 @@ export class ResourceTreeContextMenuButtonFactory {
    container: Explorer,
    userDefinedFunction: UserDefinedFunction
  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
+    if (container.isPreferredApiCassandra()) {
      return [];
    }

--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.test.tsx
@@ -6,7 +6,6 @@ describe("CollapsibleSectionComponent", () => {
  it("renders", () => {
    const props: CollapsibleSectionProps = {
      title: "Sample title",
-      isExpandedByDefault: true,
    };

    const wrapper = shallow(<CollapsibleSectionComponent {...props} />);
--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,10 +1,9 @@
 import { Icon, Label, Stack } from "office-ui-fabric-react";
 import * as React from "react";
-import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
+import { accordionIconStyles, accordionStackTokens } from "../Settings/SettingsRenderUtils";

 export interface CollapsibleSectionProps {
  title: string;
-  isExpandedByDefault: boolean;
 }

 export interface CollapsibleSectionState {
@@ -15,7 +14,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  constructor(props: CollapsibleSectionProps) {
    super(props);
    this.state = {
-      isExpanded: this.props.isExpandedByDefault,
+      isExpanded: true,
    };
  }

@@ -26,14 +25,8 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
  public render(): JSX.Element {
    return (
      <>
-        <Stack
-          className="collapsibleSection"
-          horizontal
-          verticalAlign="center"
-          tokens={accordionStackTokens}
-          onClick={this.toggleCollapsed}
-        >
-          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
+        <Stack className="collapsibleSection" horizontal tokens={accordionStackTokens} onClick={this.toggleCollapsed}>
+          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} styles={accordionIconStyles} />
          <Label>{this.props.title}</Label>
        </Stack>
        {this.state.isExpanded && this.props.children}
--- a/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
@@ -11,10 +11,16 @@ exports[`CollapsibleSectionComponent renders 1`] = `
        "childrenGap": 10,
      }
    }
-    verticalAlign="center"
  >
-    <Icon
+    <StyledIconBase
      iconName="ChevronDown"
+      styles={
+        Object {
+          "root": Object {
+            "paddingTop": 7,
+          },
+        }
+      }
    />
    <StyledLabelBase>
      Sample title
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -1,4 +1,4 @@
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { KeyCodes } from "../../../Common/Constants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -1,3 +1,8 @@
+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,
@@ -5,11 +10,6 @@ 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,69 +50,61 @@ const DIALOG_TITLE_FONT_SIZE = "17px";
 const DIALOG_TITLE_FONT_WEIGHT = 400;
 const DIALOG_SUBTEXT_FONT_SIZE = "15px";

-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 },
+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,
      },
-      showCloseButton: showCloseButton || false,
-      onDismiss,
-    },
-    modalProps: { isBlocking: isModal, isDarkOverlay: false },
-    minWidth: DIALOG_MIN_WIDTH,
-    maxWidth: DIALOG_MAX_WIDTH,
-  };
+      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;

-  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>
-  );
-};
+    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>
+    );
+  }
+}
--- a/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Directory/snapshots/DirectoryListComponent.test.tsx.snap
@@ -354,6 +354,7 @@ exports[`test render renders with filters 1`] = `
        data-is-scrollable="true"
      >
        <div
+          aria-hidden="true"
          className="stickyAbove-42"
          style={
            Object {
@@ -374,6 +375,7 @@ exports[`test render renders with filters 1`] = `
          >
            <div>
              <div
+                aria-hidden={true}
                style={
                  Object {
                    "pointerEvents": "none",
@@ -393,6 +395,7 @@ exports[`test render renders with filters 1`] = `
                style={Object {}}
              >
                <div
+                  aria-hidden={false}
                  style={
                    Object {
                      "backgroundColor": "",
@@ -408,7 +411,6 @@ exports[`test render renders with filters 1`] = `
                  >
                    <TextFieldBase
                      ariaLabel="Directory filter text box"
-                      canRevealPassword={false}
                      className="directoryListFilterTextBox"
                      deferredValidationTime={200}
                      onChange={[Function]}
@@ -1121,7 +1123,7 @@ exports[`test render renders with filters 1`] = `
                              "iconDisabled": Object {
                                "color": "#a19f9d",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "color": "GrayText",
                                  },
                                },
@@ -1147,7 +1149,7 @@ exports[`test render renders with filters 1`] = `
                              "menuIconDisabled": Object {
                                "color": "#a19f9d",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "color": "GrayText",
                                  },
                                },
@@ -1166,7 +1168,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 2,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "bottom": -2,
                                          "left": -2,
                                          "outlineColor": "ButtonText",
@@ -1245,7 +1247,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 2,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "bottom": -2,
                                          "left": -2,
                                          "outlineColor": "ButtonText",
@@ -1277,10 +1279,8 @@ exports[`test render renders with filters 1`] = `
                                  },
                                },
                                Object {
-                                  "backgroundColor": "#f3f2f1",
-                                  "color": "#a19f9d",
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "Window",
                                      "borderColor": "GrayText",
                                      "color": "GrayText",
@@ -1300,7 +1300,7 @@ exports[`test render renders with filters 1`] = `
                                  "backgroundColor": "#f3f2f1",
                                  "color": "#201f1e",
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "borderColor": "Highlight",
                                      "color": "Highlight",
                                    },
@@ -1326,7 +1326,7 @@ exports[`test render renders with filters 1`] = `
                              "splitButtonContainer": Array [
                                Object {
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "border": "none",
                                    },
                                  },
@@ -1344,7 +1344,7 @@ exports[`test render renders with filters 1`] = `
                                      "position": "absolute",
                                      "right": 3,
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "border": "none",
                                          "bottom": -2,
                                          "left": -2,
@@ -1373,20 +1373,19 @@ exports[`test render renders with filters 1`] = `
                                      "borderBottomRightRadius": "0",
                                      "borderTopRightRadius": "0",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "MsHighContrastAdjust": "none",
                                          "backgroundColor": "Window",
                                          "border": "1px solid WindowText",
                                          "borderRightWidth": "0",
                                          "color": "WindowText",
-                                          "forcedColorAdjust": "none",
                                        },
                                      },
                                    },
                                    ".ms-Button--primary + .ms-Button": Object {
                                      "border": "none",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "border": "1px solid WindowText",
                                          "borderLeftWidth": "0",
                                        },
@@ -1399,11 +1398,10 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "MsHighContrastAdjust": "none",
                                        "backgroundColor": "WindowText",
                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
                                      },
                                    },
                                  },
@@ -1413,11 +1411,10 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "MsHighContrastAdjust": "none",
                                        "backgroundColor": "WindowText",
                                        "color": "Window",
-                                        "forcedColorAdjust": "none",
                                      },
                                    },
                                  },
@@ -1427,11 +1424,12 @@ exports[`test render renders with filters 1`] = `
                                "border": "none",
                                "outline": "none",
                                "selectors": Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    "MsHighContrastAdjust": "none",
+                                  "@media screen and (-ms-high-contrast: active)": Object {
                                    "backgroundColor": "Window",
                                    "borderColor": "GrayText",
                                    "color": "GrayText",
+                                  },
+                                  "@media screen and (forced-colors: active)": Object {
                                    "forcedColorAdjust": "none",
                                  },
                                },
@@ -1443,7 +1441,7 @@ exports[`test render renders with filters 1`] = `
                                "selectors": Object {
                                  ".ms-Button--primary": Object {
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "backgroundColor": "Highlight",
                                        "color": "Window",
                                      },
@@ -1452,7 +1450,7 @@ exports[`test render renders with filters 1`] = `
                                  ".ms-Button.is-disabled": Object {
                                    "color": "#a19f9d",
                                    "selectors": Object {
-                                      "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                      "@media screen and (-ms-high-contrast: active)": Object {
                                        "backgroundColor": "Window",
                                        "borderColor": "GrayText",
                                        "color": "GrayText",
@@ -1468,7 +1466,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "WindowText",
                                    },
                                  },
@@ -1480,7 +1478,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "WindowText",
                                    },
                                  },
@@ -1497,7 +1495,7 @@ exports[`test render renders with filters 1`] = `
                                  "position": "absolute",
                                  "right": 31,
                                  "selectors": Object {
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "GrayText",
                                    },
                                  },
@@ -1520,7 +1518,7 @@ exports[`test render renders with filters 1`] = `
                                    ":hover": Object {
                                      "backgroundColor": "#edebe9",
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "color": "Highlight",
                                        },
                                      },
@@ -1528,11 +1526,6 @@ exports[`test render renders with filters 1`] = `
                                  },
                                },
                                Object {
-                                  "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
-                                    ".ms-Button-menuIcon": Object {
-                                      "color": "WindowText",
-                                    },
-                                  },
                                  "border": "1px solid #8a8886",
                                  "borderBottomRightRadius": "2px",
                                  "borderLeft": "none",
@@ -1578,7 +1571,7 @@ exports[`test render renders with filters 1`] = `
                                  "selectors": Object {
                                    ".ms-Button--primary": Object {
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "backgroundColor": "Window",
                                          "borderColor": "GrayText",
                                          "color": "GrayText",
@@ -1587,7 +1580,7 @@ exports[`test render renders with filters 1`] = `
                                    },
                                    ".ms-Button-menuIcon": Object {
                                      "selectors": Object {
-                                        "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                        "@media screen and (-ms-high-contrast: active)": Object {
                                          "color": "GrayText",
                                        },
                                      },
@@ -1595,7 +1588,7 @@ exports[`test render renders with filters 1`] = `
                                    ":hover": Object {
                                      "cursor": "default",
                                    },
-                                    "@media screen and (-ms-high-contrast: active), (forced-colors: active)": Object {
+                                    "@media screen and (-ms-high-contrast: active)": Object {
                                      "backgroundColor": "Window",
                                      "border": "1px solid GrayText",
                                      "color": "GrayText",
@@ -1900,7 +1893,7 @@ exports[`test render renders with filters 1`] = `
                        >
                          <button
                            aria-disabled={true}
-                            className="ms-Button ms-Button--default is-disabled directoryListButton root-57"
+                            className="ms-Button ms-Button--default is-disabled directoryListButton root-54"
                            data-is-focusable={false}
                            disabled={true}
                            onClick={[Function]}
@@ -1912,7 +1905,7 @@ exports[`test render renders with filters 1`] = `
                            type="button"
                          >
                            <span
-                              className="ms-Button-flexContainer flexContainer-58"
+                              className="ms-Button-flexContainer flexContainer-55"
                              data-automationid="splitbuttonprimary"
                            >
                              <div
@@ -1943,6 +1936,7 @@ exports[`test render renders with filters 1`] = `
          </List>
        </div>
        <div
+          aria-hidden="true"
          className="stickyBelow-43"
          style={
            Object {
--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -7,7 +7,7 @@ import { ChildrenMargin } from "./GitHubStyleConstants";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as UrlUtility from "../../../Common/UrlUtility";
+import UrlUtility from "../../../Common/UrlUtility";
 import Explorer from "../../Explorer";

 export interface AddRepoComponentProps {
@@ -74,6 +74,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add

  private onAddRepoButtonClick = async (): Promise<void> => {
    const startKey: number = TelemetryProcessor.traceStart(Action.NotebooksGitHubManualRepoAdd, {
+      databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+      defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
      dataExplorerArea: Constants.Areas.Notebook,
    });
    let enteredUrl = this.state.textFieldValue;
@@ -103,6 +105,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
        TelemetryProcessor.traceSuccess(
          Action.NotebooksGitHubManualRepoAdd,
          {
+            databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+            defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
            dataExplorerArea: Constants.Areas.Notebook,
          },
          startKey
@@ -117,6 +121,8 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
    TelemetryProcessor.traceFailure(
      Action.NotebooksGitHubManualRepoAdd,
      {
+        databaseAccountName: this.props.container.databaseAccount() && this.props.container.databaseAccount().name,
+        defaultExperience: this.props.container.defaultExperience && this.props.container.defaultExperience(),
        dataExplorerArea: Constants.Areas.Notebook,
        error: AddRepoComponent.TextFieldErrorMessage,
      },
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@@ -4,7 +4,7 @@

 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as StringUtils from "../../../Utils/StringUtils";
+import { StringUtils } from "../../../Utils/StringUtils";
 import { userContext } from "../../../UserContext";
 import { TerminalQueryParams } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
--- a/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/Cards/GalleryCardComponent.tsx
@@ -13,12 +13,10 @@ import {
  LinkBase,
  Separator,
  TooltipHost,
-  Spinner,
-  SpinnerSize,
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../../Notebook/FileSystemUtil";
 import CosmosDBLogo from "../../../../../images/CosmosDB-logo.svg";

 export interface GalleryCardComponentProps {
@@ -31,14 +29,10 @@ export interface GalleryCardComponentProps {
  onFavoriteClick: () => void;
  onUnfavoriteClick: () => void;
  onDownloadClick: () => void;
-  onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) => void;
+  onDeleteClick: () => void;
 }

-interface GalleryCardComponentState {
-  isDeletingPublishedNotebook: boolean;
-}
-
-export class GalleryCardComponent extends React.Component<GalleryCardComponentProps, GalleryCardComponentState> {
+export class GalleryCardComponent extends React.Component<GalleryCardComponentProps> {
  public static readonly CARD_WIDTH = 256;
  private static readonly cardImageHeight = 144;
  public static readonly cardHeightToWidthRatio =
@@ -46,15 +40,6 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
  private static readonly cardDescriptionMaxChars = 80;
  private static readonly cardItemGapBig = 10;
  private static readonly cardItemGapSmall = 8;
-  private static readonly cardDeleteSpinnerHeight = 360;
-  private static readonly smallTextLineHeight = 18;
-
-  constructor(props: GalleryCardComponentProps) {
-    super(props);
-    this.state = {
-      isDeletingPublishedNotebook: false,
-    };
-  }

  public render(): JSX.Element {
    const cardButtonsVisible = this.props.isFavorite !== undefined || this.props.showDownload || this.props.showDelete;
@@ -74,110 +59,91 @@ export class GalleryCardComponent extends React.Component<GalleryCardComponentPr
        tokens={{ width: GalleryCardComponent.CARD_WIDTH, childrenGap: 0 }}
        onClick={(event) => this.onClick(event, this.props.onClick)}
      >
-        {this.state.isDeletingPublishedNotebook && (
-          <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
-            <Spinner
-              size={SpinnerSize.large}
-              label={`Deleting '${cardTitle}'`}
-              styles={{ root: { height: GalleryCardComponent.cardDeleteSpinnerHeight } }}
-            />
-          </Card.Item>
-        )}
-        {!this.state.isDeletingPublishedNotebook && (
-          <>
-            <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
-              <Persona
-                imageUrl={this.props.data.isSample && CosmosDBLogo}
-                text={this.props.data.author}
-                secondaryText={dateString}
-              />
-            </Card.Item>
+        <Card.Item tokens={{ padding: GalleryCardComponent.cardItemGapBig }}>
+          <Persona
+            imageUrl={this.props.data.isSample && CosmosDBLogo}
+            text={this.props.data.author}
+            secondaryText={dateString}
+          />
+        </Card.Item>

-            <Card.Item>
-              <Image
-                src={this.props.data.thumbnailUrl}
-                width={GalleryCardComponent.CARD_WIDTH}
-                height={GalleryCardComponent.cardImageHeight}
-                imageFit={ImageFit.cover}
-                alt={`${cardTitle} cover image`}
-              />
-            </Card.Item>
+        <Card.Item>
+          <Image
+            src={this.props.data.thumbnailUrl}
+            width={GalleryCardComponent.CARD_WIDTH}
+            height={GalleryCardComponent.cardImageHeight}
+            imageFit={ImageFit.cover}
+            alt={`${cardTitle} cover image`}
+          />
+        </Card.Item>

-            <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
-              <Text variant="small" nowrap styles={{ root: { height: GalleryCardComponent.smallTextLineHeight } }}>
-                {this.props.data.tags ? (
-                  this.props.data.tags.map((tag, index, array) => (
-                    <span key={tag}>
-                      <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
-                      {index === array.length - 1 ? <></> : ", "}
-                    </span>
-                  ))
-                ) : (
-                  <br />
-                )}
-              </Text>
-
-              <Text
-                styles={{
-                  root: {
-                    fontWeight: FontWeights.semibold,
-                    paddingTop: GalleryCardComponent.cardItemGapSmall,
-                    paddingBottom: GalleryCardComponent.cardItemGapSmall,
-                  },
-                }}
-                nowrap
-              >
-                {cardTitle}
-              </Text>
-
-              <Text variant="small" styles={{ root: { height: GalleryCardComponent.smallTextLineHeight * 2 } }}>
-                {this.renderTruncatedDescription()}
-              </Text>
-
-              <span>
-                {this.props.data.views !== undefined &&
-                  this.generateIconText("RedEye", this.props.data.views.toString())}
-                {this.props.data.downloads !== undefined &&
-                  this.generateIconText("Download", this.props.data.downloads.toString())}
-                {this.props.data.favorites !== undefined &&
-                  this.generateIconText("Heart", this.props.data.favorites.toString())}
-              </span>
-            </Card.Section>
-
-            {cardButtonsVisible && (
-              <Card.Section
-                styles={{
-                  root: {
-                    marginLeft: GalleryCardComponent.cardItemGapBig,
-                    marginRight: GalleryCardComponent.cardItemGapBig,
-                  },
-                }}
-              >
-                <Separator styles={{ root: { padding: 0, height: 1 } }} />
-
-                <span>
-                  {this.props.isFavorite !== undefined &&
-                    this.generateIconButtonWithTooltip(
-                      this.props.isFavorite ? "HeartFill" : "Heart",
-                      this.props.isFavorite ? "Unfavorite" : "Favorite",
-                      "left",
-                      this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
-                    )}
-
-                  {this.props.showDownload &&
-                    this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
-
-                  {this.props.showDelete &&
-                    this.generateIconButtonWithTooltip("Delete", "Remove", "right", () =>
-                      this.props.onDeleteClick(
-                        () => this.setState({ isDeletingPublishedNotebook: true }),
-                        () => this.setState({ isDeletingPublishedNotebook: false })
-                      )
-                    )}
+        <Card.Section styles={{ root: { padding: GalleryCardComponent.cardItemGapBig } }}>
+          <Text variant="small" nowrap>
+            {this.props.data.tags ? (
+              this.props.data.tags.map((tag, index, array) => (
+                <span key={tag}>
+                  <Link onClick={(event) => this.onClick(event, () => this.props.onTagClick(tag))}>{tag}</Link>
+                  {index === array.length - 1 ? <></> : ", "}
                </span>
-              </Card.Section>
+              ))
+            ) : (
+              <br />
            )}
-          </>
+          </Text>
+
+          <Text
+            styles={{
+              root: {
+                fontWeight: FontWeights.semibold,
+                paddingTop: GalleryCardComponent.cardItemGapSmall,
+                paddingBottom: GalleryCardComponent.cardItemGapSmall,
+              },
+            }}
+            nowrap
+          >
+            {cardTitle}
+          </Text>
+
+          <Text variant="small" styles={{ root: { height: 36 } }}>
+            {this.renderTruncatedDescription()}
+          </Text>
+
+          <span>
+            {this.props.data.views !== undefined && this.generateIconText("RedEye", this.props.data.views.toString())}
+            {this.props.data.downloads !== undefined &&
+              this.generateIconText("Download", this.props.data.downloads.toString())}
+            {this.props.data.favorites !== undefined &&
+              this.generateIconText("Heart", this.props.data.favorites.toString())}
+          </span>
+        </Card.Section>
+
+        {cardButtonsVisible && (
+          <Card.Section
+            styles={{
+              root: {
+                marginLeft: GalleryCardComponent.cardItemGapBig,
+                marginRight: GalleryCardComponent.cardItemGapBig,
+              },
+            }}
+          >
+            <Separator styles={{ root: { padding: 0, height: 1 } }} />
+
+            <span>
+              {this.props.isFavorite !== undefined &&
+                this.generateIconButtonWithTooltip(
+                  this.props.isFavorite ? "HeartFill" : "Heart",
+                  this.props.isFavorite ? "Unfavorite" : "Favorite",
+                  "left",
+                  this.props.isFavorite ? this.props.onUnfavoriteClick : this.props.onFavoriteClick
+                )}
+
+              {this.props.showDownload &&
+                this.generateIconButtonWithTooltip("Download", "Download", "left", this.props.onDownloadClick)}
+
+              {this.props.showDelete &&
+                this.generateIconButtonWithTooltip("Delete", "Remove", "right", this.props.onDeleteClick)}
+            </span>
+          </Card.Section>
        )}
      </Card>
    );
--- a/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/Cards/snapshots/GalleryCardComponent.test.tsx.snap
@@ -50,13 +50,6 @@ exports[`GalleryCardComponent renders 1`] = `
  >
    <Text
      nowrap={true}
-      styles={
-        Object {
-          "root": Object {
-            "height": 18,
-          },
-        }
-      }
      variant="small"
    >
      <span
@@ -107,7 +100,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="RedEye"
          styles={
            Object {
@@ -131,7 +124,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="Download"
          styles={
            Object {
@@ -155,7 +148,7 @@ exports[`GalleryCardComponent renders 1`] = `
        }
        variant="tiny"
      >
-        <Icon
+        <StyledIconBase
          iconName="Heart"
          styles={
            Object {
@@ -180,7 +173,7 @@ exports[`GalleryCardComponent renders 1`] = `
      }
    }
  >
-    <Separator
+    <Styled
      styles={
        Object {
          "root": Object {
--- a/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/CodeOfConductComponent.tsx
@@ -44,7 +44,7 @@ export class CodeOfConductComponent extends React.Component<CodeOfConductCompone
        throw new Error(`Received HTTP ${response.status} when accepting code of conduct`);
      }

-      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, {}, startKey);
+      traceSuccess(Action.NotebooksGalleryAcceptCodeOfConduct, startKey);

      this.props.onAcceptCodeOfConduct(response.data);
    } catch (error) {
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.less
@@ -11,7 +11,7 @@

 .publicGalleryTabContainer {
  position: relative;
-  min-height: 100vh;
+  height: 100vh;
 }

 .publicGalleryTabOverlayContent {
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/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 { CodeOfConductComponent } from "./CodeOfConductComponent";
 import "./GalleryViewerComponent.less";
+import { HttpStatusCodes } from "../../../Common/Constants";
+import Explorer from "../../Explorer";
+import { CodeOfConductComponent } from "./CodeOfConductComponent";
 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;
@@ -47,8 +47,8 @@ export interface GalleryViewerComponentProps {
 }

 export enum GalleryTab {
-  PublicGallery,
  OfficialSamples,
+  PublicGallery,
  Favorites,
  Published,
 }
@@ -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
@@ -151,19 +151,18 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  public render(): JSX.Element {
    this.traceViewGallery();

-    const tabs: GalleryTabInfo[] = [
+    const tabs: GalleryTabInfo[] = [this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks)];
+
+    tabs.push(
      this.createPublicGalleryTab(
        GalleryTab.PublicGallery,
        this.state.publicNotebooks,
        this.state.isCodeOfConductAccepted
-      ),
-      this.createSamplesTab(GalleryTab.OfficialSamples, this.state.sampleNotebooks),
-    ];
+      )
+    );

-    if (this.props.container) {
-      tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
-      tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));
-    }
+    tabs.push(this.createFavoritesTab(GalleryTab.Favorites, this.state.favoriteNotebooks));
+    tabs.push(this.createPublishedNotebooksTab(GalleryTab.Published, this.state.publishedNotebooks));

    const pivotProps: IPivotProps = {
      onLinkClick: this.onPivotChange,
@@ -200,13 +199,6 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    }

    switch (this.state.selectedTab) {
-      case GalleryTab.PublicGallery:
-        if (!this.viewPublicGalleryTraced) {
-          this.resetViewGalleryTabTracedFlags();
-          this.viewPublicGalleryTraced = true;
-          trace(Action.NotebooksGalleryViewPublicGallery);
-        }
-        break;
      case GalleryTab.OfficialSamples:
        if (!this.viewOfficialSamplesTraced) {
          this.resetViewGalleryTabTracedFlags();
@@ -214,6 +206,13 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
          trace(Action.NotebooksGalleryViewOfficialSamples);
        }
        break;
+      case GalleryTab.PublicGallery:
+        if (!this.viewPublicGalleryTraced) {
+          this.resetViewGalleryTabTracedFlags();
+          this.viewPublicGalleryTraced = true;
+          trace(Action.NotebooksGalleryViewPublicGallery);
+        }
+        break;
      case GalleryTab.Favorites:
        if (!this.viewFavoritesTraced) {
          this.resetViewGalleryTabTracedFlags();
@@ -388,7 +387,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  private createSearchBarHeader(content: JSX.Element): JSX.Element {
    return (
      <Stack tokens={{ childrenGap: 10 }}>
-        <Stack horizontal wrap tokens={{ childrenGap: 20, padding: 10 }}>
+        <Stack horizontal tokens={{ childrenGap: 20, padding: 10 }}>
          <Stack.Item grow>
            <SearchBox value={this.state.searchText} placeholder="Search" onChange={this.onSearchBoxChange} />
          </Stack.Item>
@@ -443,14 +442,14 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone

  private loadTabContent(tab: GalleryTab, searchText: string, sortBy: SortBy, offline: boolean): void {
    switch (tab) {
-      case GalleryTab.PublicGallery:
-        this.loadPublicNotebooks(searchText, sortBy, offline);
-        break;
-
      case GalleryTab.OfficialSamples:
        this.loadSampleNotebooks(searchText, sortBy, offline);
        break;

+      case GalleryTab.PublicGallery:
+        this.loadPublicNotebooks(searchText, sortBy, offline);
+        break;
+
      case GalleryTab.Favorites:
        this.loadFavoriteNotebooks(searchText, sortBy, offline);
        break;
@@ -654,8 +653,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  };

  private onRenderCell = (data?: IGalleryItem): JSX.Element => {
-    const isFavorite =
-      this.props.container && this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
+    const isFavorite = this.favoriteNotebooks?.find((item) => item.id === data.id) !== undefined;
    const props: GalleryCardComponentProps = {
      data,
      isFavorite,
@@ -666,8 +664,7 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
      onFavoriteClick: () => this.favoriteItem(data),
      onUnfavoriteClick: () => this.unfavoriteItem(data),
      onDownloadClick: () => this.downloadItem(data),
-      onDeleteClick: (beforeDelete: () => void, afterDelete: () => void) =>
-        this.deleteItem(data, beforeDelete, afterDelete),
+      onDeleteClick: () => this.deleteItem(data),
    };

    return (
@@ -711,18 +708,11 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
    );
  };

-  private deleteItem = async (data: IGalleryItem, beforeDelete: () => void, afterDelete: () => void): Promise<void> => {
-    GalleryUtils.deleteItem(
-      this.props.container,
-      this.props.junoClient,
-      data,
-      (item) => {
-        this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
-        this.refreshSelectedTab(item);
-      },
-      beforeDelete,
-      afterDelete
-    );
+  private deleteItem = async (data: IGalleryItem): Promise<void> => {
+    GalleryUtils.deleteItem(this.props.container, this.props.junoClient, data, (item) => {
+      this.publishedNotebooks = this.publishedNotebooks?.filter((notebook) => item.id !== notebook.id);
+      this.refreshSelectedTab(item);
+    });
  };

  private onPivotChange = (item: PivotItem): void => {
--- a/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/InfoComponent/snapshots/InfoComponent.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`InfoComponent renders 1`] = `
  <div
    className="infoPanelMain"
  >
-    <Icon
+    <StyledIconBase
      className="infoIconMain"
      iconName="Help"
      styles={
--- a/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
@@ -8,6 +8,90 @@ exports[`GalleryViewerComponent renders 1`] = `
    onLinkClick={[Function]}
    selectedKey="OfficialSamples"
  >
+    <PivotItem
+      headerText="Official samples"
+      itemKey="OfficialSamples"
+      key="OfficialSamples"
+      style={
+        Object {
+          "marginTop": 20,
+        }
+      }
+    >
+      <Stack
+        tokens={
+          Object {
+            "childrenGap": 10,
+          }
+        }
+      >
+        <Stack
+          horizontal={true}
+          tokens={
+            Object {
+              "childrenGap": 20,
+              "padding": 10,
+            }
+          }
+        >
+          <StackItem
+            grow={true}
+          >
+            <StyledSearchBoxBase
+              onChange={[Function]}
+              placeholder="Search"
+            />
+          </StackItem>
+          <StackItem>
+            <StyledLabelBase>
+              Sort by
+            </StyledLabelBase>
+          </StackItem>
+          <StackItem
+            styles={
+              Object {
+                "root": Object {
+                  "minWidth": 200,
+                },
+              }
+            }
+          >
+            <StyledWithResponsiveMode
+              onChange={[Function]}
+              options={
+                Array [
+                  Object {
+                    "key": 0,
+                    "text": "Most viewed",
+                  },
+                  Object {
+                    "key": 1,
+                    "text": "Most downloaded",
+                  },
+                  Object {
+                    "key": 3,
+                    "text": "Most recent",
+                  },
+                  Object {
+                    "key": 2,
+                    "text": "Most favorited",
+                  },
+                ]
+              }
+              selectedKey={0}
+            />
+          </StackItem>
+          <StackItem>
+            <InfoComponent />
+          </StackItem>
+        </Stack>
+        <StackItem>
+          <StyledSpinnerBase
+            size={3}
+          />
+        </StackItem>
+      </Stack>
+    </PivotItem>
    <PivotItem
      headerText="Public gallery"
      itemKey="PublicGallery"
@@ -36,7 +120,6 @@ exports[`GalleryViewerComponent renders 1`] = `
                "padding": 10,
              }
            }
-            wrap={true}
          >
            <StackItem
              grow={true}
@@ -98,89 +181,32 @@ exports[`GalleryViewerComponent renders 1`] = `
      </div>
    </PivotItem>
    <PivotItem
-      headerText="Official samples"
-      itemKey="OfficialSamples"
-      key="OfficialSamples"
+      headerText="My favorites"
+      itemKey="Favorites"
+      key="Favorites"
      style={
        Object {
          "marginTop": 20,
        }
      }
    >
-      <Stack
-        tokens={
-          Object {
-            "childrenGap": 10,
-          }
+      <StyledSpinnerBase
+        size={3}
+      />
+    </PivotItem>
+    <PivotItem
+      headerText="My published work"
+      itemKey="Published"
+      key="Published"
+      style={
+        Object {
+          "marginTop": 20,
        }
-      >
-        <Stack
-          horizontal={true}
-          tokens={
-            Object {
-              "childrenGap": 20,
-              "padding": 10,
-            }
-          }
-          wrap={true}
-        >
-          <StackItem
-            grow={true}
-          >
-            <StyledSearchBoxBase
-              onChange={[Function]}
-              placeholder="Search"
-            />
-          </StackItem>
-          <StackItem>
-            <StyledLabelBase>
-              Sort by
-            </StyledLabelBase>
-          </StackItem>
-          <StackItem
-            styles={
-              Object {
-                "root": Object {
-                  "minWidth": 200,
-                },
-              }
-            }
-          >
-            <StyledWithResponsiveMode
-              onChange={[Function]}
-              options={
-                Array [
-                  Object {
-                    "key": 0,
-                    "text": "Most viewed",
-                  },
-                  Object {
-                    "key": 1,
-                    "text": "Most downloaded",
-                  },
-                  Object {
-                    "key": 3,
-                    "text": "Most recent",
-                  },
-                  Object {
-                    "key": 2,
-                    "text": "Most favorited",
-                  },
-                ]
-              }
-              selectedKey={0}
-            />
-          </StackItem>
-          <StackItem>
-            <InfoComponent />
-          </StackItem>
-        </Stack>
-        <StackItem>
-          <StyledSpinnerBase
-            size={3}
-          />
-        </StackItem>
-      </Stack>
+      }
+    >
+      <StyledSpinnerBase
+        size={3}
+      />
    </PivotItem>
  </StyledPivotBase>
 </div>
--- a/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
@@ -14,7 +14,7 @@ import {
 } from "office-ui-fabric-react";
 import * as React from "react";
 import { IGalleryItem } from "../../../Juno/JunoClient";
-import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
+import { FileSystemUtil } from "../../Notebook/FileSystemUtil";
 import "./NotebookViewerComponent.less";
 import CosmosDBLogo from "../../../../images/CosmosDB-logo.svg";
 import { InfoComponent } from "../NotebookGallery/InfoComponent/InfoComponent";
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -15,6 +15,7 @@ import { Dialog, DialogProps, TextFieldProps } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
 import Explorer from "../../Explorer";
+import { NotebookV4 } from "@nteract/commutable/lib/v4";
 import { SessionStorageUtility } from "../../../Shared/StorageUtility";
 import { DialogHost } from "../../../Utils/GalleryUtils";
 import { getErrorMessage, getErrorStack, handleError } from "../../../Common/ErrorHandlingUtils";
@@ -102,7 +103,7 @@ export class NotebookViewerComponent
      );

      const notebook: Notebook = await response.json();
-      GalleryUtils.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
+      this.removeNotebookViewerLink(notebook, this.props.galleryItem?.newCellId);
      this.notebookComponentBootstrapper.setContent("json", notebook);
      this.setState({ content: notebook, showProgressBar: false });

@@ -132,6 +133,17 @@ export class NotebookViewerComponent
    }
  }

+  private removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
+    if (!newCellId) {
+      return;
+    }
+    const notebookV4 = notebook as NotebookV4;
+    if (notebookV4 && notebookV4.cells[0].source[0].search(newCellId)) {
+      delete notebookV4.cells[0];
+      notebook = notebookV4;
+    }
+  };
+
  public render(): JSX.Element {
    return (
      <div className="notebookViewerContainer">
--- a/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookViewer/snapshots/NotebookMetadataComponent.test.tsx.snap
@@ -68,14 +68,14 @@ exports[`NotebookMetadataComponent renders liked notebook 1`] = `
      Invalid Date
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="RedEye"
      />
       
      0
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="Download"
      />
      0
@@ -180,14 +180,14 @@ exports[`NotebookMetadataComponent renders un-liked notebook 1`] = `
      Invalid Date
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="RedEye"
      />
       
      0
    </Text>
    <Text>
-      <Icon
+      <StyledIconBase
        iconName="Download"
      />
      0
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -1,15 +1,20 @@
-import { IButtonProps, IconButton } from "office-ui-fabric-react/lib/Button";
-import { ContextualMenu, IContextualMenuProps } from "office-ui-fabric-react/lib/ContextualMenu";
+import * as _ from "underscore";
+import * as React from "react";
+import * as Constants from "../../../Common/Constants";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import {
  DetailsList,
  DetailsListLayoutMode,
-  DetailsRow,
-  IColumn,
  IDetailsListProps,
  IDetailsRowProps,
+  DetailsRow,
 } from "office-ui-fabric-react/lib/DetailsList";
 import { FocusZone } from "office-ui-fabric-react/lib/FocusZone";
-import { ITextField, ITextFieldProps, TextField } from "office-ui-fabric-react/lib/TextField";
+import { IconButton, IButtonProps } from "office-ui-fabric-react/lib/Button";
+import { IColumn } from "office-ui-fabric-react/lib/DetailsList";
+import { IContextualMenuProps, ContextualMenu } from "office-ui-fabric-react/lib/ContextualMenu";
 import {
  IObjectWithKey,
  ISelectionZoneProps,
@@ -17,18 +22,13 @@ import {
  SelectionMode,
  SelectionZone,
 } from "office-ui-fabric-react/lib/utilities/selection/index";
-import * as React from "react";
-import * as _ from "underscore";
-import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
-import * as Constants from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/Constants";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
-import { QueriesClient } from "../../../Common/QueriesClient";
-import * as DataModels from "../../../Contracts/DataModels";
-import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import { TextField, ITextFieldProps, ITextField } from "office-ui-fabric-react/lib/TextField";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";

-const title: string = "Open Saved Queries";
+import SaveQueryBannerIcon from "../../../../images/save_query_banner.png";
+import { QueriesClient } from "../../../Common/QueriesClient";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

 export interface QueriesGridComponentProps {
  queriesClient: QueriesClient;
@@ -76,11 +76,6 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
    }
  }

-  // fetched saved queries when panel open
-  public componentDidMount() {
-    this.fetchSavedQueries();
-  }
-
  public render(): JSX.Element {
    if (this.state.queries.length === 0) {
      return this.renderBannerComponent();
@@ -141,7 +136,7 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
      },
    };
    return (
-      <div id="emptyQueryBanner">
+      <div>
        <div>
          You have not saved any queries yet. <br /> <br />
          To write a new query, open a new query tab and enter the desired query. Once ready to save, click on Save
@@ -226,16 +221,20 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                    if (window.confirm("Are you sure you want to delete this query?")) {
                      const container = window.dataExplorer;
                      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                        databaseAccountName: container && container.databaseAccount().name,
+                        defaultExperience: container && container.defaultExperience(),
                        dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: title,
+                        paneTitle: container && container.browseQueriesPane.title(),
                      });
                      try {
                        await this.props.queriesClient.deleteQuery(query);
                        TelemetryProcessor.traceSuccess(
                          Action.DeleteSavedQuery,
                          {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                          },
                          startKey
                        );
@@ -243,8 +242,10 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                        TelemetryProcessor.traceFailure(
                          Action.DeleteSavedQuery,
                          {
+                            databaseAccountName: container && container.databaseAccount().name,
+                            defaultExperience: container && container.defaultExperience(),
                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
+                            paneTitle: container && container.browseQueriesPane.title(),
                            error: getErrorMessage(error),
                            errorStack: getErrorStack(error),
                          },
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
@@ -0,0 +1,33 @@
+/**
+ * This adapter is responsible to render the QueriesGrid React component
+ * If the component signals a change through the callback passed in the properties, it must render the React component when appropriate
+ * and update any knockout observables passed from the parent.
+ */
+import * as ko from "knockout";
+import * as React from "react";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import { QueriesGridComponent, QueriesGridComponentProps } from "./QueriesGridComponent";
+import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
+import Explorer from "../../Explorer";
+
+export class QueriesGridComponentAdapter implements ReactAdapter {
+  public parameters: ko.Observable<number>;
+
+  constructor(private container: Explorer) {
+    this.parameters = ko.observable<number>(Date.now());
+  }
+
+  public renderComponent(): JSX.Element {
+    const props: QueriesGridComponentProps = {
+      queriesClient: this.container.queriesClient,
+      onQuerySelect: this.container.browseQueriesPane.loadSavedQuery,
+      containerVisible: this.container.browseQueriesPane.visible(),
+      saveQueryEnabled: this.container.canSaveQueries(),
+    };
+    return <QueriesGridComponent {...props} />;
+  }
+
+  public forceRender(): void {
+    window.requestAnimationFrame(() => this.parameters(Date.now()));
+  }
+}
--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -1,19 +1,17 @@
 import { shallow } from "enzyme";
-import ko from "knockout";
 import React from "react";
-import { updateCollection } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import * as DataModels from "../../../Contracts/DataModels";
+import { SettingsComponentProps, SettingsComponent, SettingsComponentState } from "./SettingsComponent";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { 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";
+import * as DataModels from "../../../Contracts/DataModels";
+import ko from "knockout";
+import { TtlType, isDirty } from "./SettingsUtils";
+import Explorer from "../../Explorer";
 jest.mock("../../../Common/dataAccess/getIndexTransformationProgress", () => ({
  getIndexTransformationProgress: jest.fn().mockReturnValue(undefined),
 }));
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
 jest.mock("../../../Common/dataAccess/updateCollection", () => ({
  updateCollection: jest.fn().mockReturnValue({
    id: undefined,
@@ -23,9 +21,16 @@ 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),
 }));
@@ -39,6 +44,7 @@ describe("SettingsComponent", () => {
      tabPath: "",
      node: undefined,
      hashLocation: "settings",
+      isActive: ko.observable(false),
      onUpdateTabsButtons: undefined,
    }),
  };
@@ -107,13 +113,7 @@ describe("SettingsComponent", () => {
    expect(settingsComponentInstance.shouldShowKeyspaceSharedThroughputMessage()).toEqual(false);

    const newContainer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableCassandra" }],
-        },
-      } as DataModels.DatabaseAccount,
-    });
+    newContainer.isPreferredApiCassandra = ko.computed(() => true);

    const newCollection = { ...collection };
    newCollection.container = newContainer;
@@ -134,6 +134,7 @@ describe("SettingsComponent", () => {
      loadCollections: undefined,
      findCollectionWithId: undefined,
      openAddCollection: undefined,
+      onDeleteDatabaseContextMenuClick: undefined,
      readSettings: undefined,
      onSettingsClick: undefined,
      loadOffer: undefined,
@@ -193,6 +194,7 @@ describe("SettingsComponent", () => {
    };
    await settingsComponentInstance.onSaveClick();
    expect(updateCollection).toBeCalled();
+    expect(updateMongoDBCollectionThroughRP).toBeCalled();
    expect(updateOffer).toBeCalled();
  });

--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,51 +1,49 @@
-import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "office-ui-fabric-react";
 import * as React from "react";
-import DiscardIcon from "../../../../images/discard.svg";
-import SaveIcon from "../../../../images/save-cosmos.svg";
-import { AuthType } from "../../../AuthType";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import * as Constants from "../../../Common/Constants";
-import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
-import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
-import { updateCollection } from "../../../Common/dataAccess/updateCollection";
-import { updateOffer } from "../../../Common/dataAccess/updateOffer";
-import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
+import DiscardIcon from "../../../../images/discard.svg";
+import SaveIcon from "../../../../images/save-cosmos.svg";
+import { traceStart, traceFailure, traceSuccess, trace } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
-import { trace, traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../UserContext";
-import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { updateOffer } from "../../../Common/dataAccess/updateOffer";
+import { updateCollection, updateMongoDBCollectionThroughRP } from "../../../Common/dataAccess/updateCollection";
+import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
-import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import {
-  ConflictResolutionComponent,
-  ConflictResolutionComponentProps,
-} from "./SettingsSubComponents/ConflictResolutionComponent";
-import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
 import {
  MongoIndexingPolicyComponent,
  MongoIndexingPolicyComponentProps,
 } from "./SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent";
-import { ScaleComponent, ScaleComponentProps } from "./SettingsSubComponents/ScaleComponent";
-import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
 import {
-  AddMongoIndexProps,
-  ChangeFeedPolicyState,
-  GeospatialConfigType,
-  getMongoNotification,
-  getTabTitle,
  hasDatabaseSharedThroughput,
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  SettingsV2TabTypes,
+  getTabTitle,
  isDirty,
+  AddMongoIndexProps,
  MongoIndexTypes,
  parseConflictResolutionMode,
  parseConflictResolutionProcedure,
-  SettingsV2TabTypes,
-  TtlType,
+  getMongoNotification,
 } from "./SettingsUtils";
+import {
+  ConflictResolutionComponent,
+  ConflictResolutionComponentProps,
+} from "./SettingsSubComponents/ConflictResolutionComponent";
+import { SubSettingsComponent, SubSettingsComponentProps } from "./SettingsSubComponents/SubSettingsComponent";
+import { Pivot, PivotItem, IPivotProps, IPivotItemProps } from "office-ui-fabric-react";
+import "./SettingsComponent.less";
+import { IndexingPolicyComponent, IndexingPolicyComponentProps } from "./SettingsSubComponents/IndexingPolicyComponent";
+import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/2020-04-01/types";
+import { readMongoDBCollectionThroughRP } from "../../../Common/dataAccess/readMongoDBCollection";
+import { getIndexTransformationProgress } from "../../../Common/dataAccess/getIndexTransformationProgress";
+import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";

 interface SettingsV2TabInfo {
  tab: SettingsV2TabTypes;
@@ -137,9 +135,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.offer = this.collection?.offer();
      this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
      this.shouldShowIndexingPolicyEditor =
-        this.container && userContext.apiType !== "Cassandra" && !this.container.isPreferredApiMongoDB();
+        this.container && !this.container.isPreferredApiCassandra() && !this.container.isPreferredApiMongoDB();

-      this.changeFeedPolicyVisible = userContext.features.enableChangeFeedPolicy;
+      this.changeFeedPolicyVisible = this.collection?.container.isFeatureEnabled(
+        Constants.Features.enableChangeFeedPolicy
+      );

      // Mongo container with system partition key still treat as "Fixed"
      this.isFixedContainer =
@@ -299,7 +299,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    this.state.wasAutopilotOriginallySet !== this.state.isAutoPilotSelected;

  public shouldShowKeyspaceSharedThroughputMessage = (): boolean =>
-    this.container && userContext.apiType === "Cassandra" && hasDatabaseSharedThroughput(this.collection);
+    this.container && this.container.isPreferredApiCassandra() && hasDatabaseSharedThroughput(this.collection);

  public hasConflictResolution = (): boolean =>
    this.container?.databaseAccount &&
@@ -316,6 +316,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    this.props.settingsTab.isExecuting(true);
    const startKey: number = traceStart(Action.SettingsV2Updated, {
+      databaseAccountName: this.container.databaseAccount()?.name,
+      defaultExperience: this.container.defaultExperience(),
      dataExplorerArea: Constants.Areas.Tab,
      tabTitle: this.props.settingsTab.tabTitle(),
    });
@@ -325,14 +327,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        ? this.saveCollectionSettings(startKey)
        : this.saveDatabaseSettings(startKey));
    } catch (error) {
+      this.container.isRefreshingExplorer(false);
      this.props.settingsTab.isExecutionError(true);
      console.error(error);
      traceFailure(
        Action.SettingsV2Updated,
        {
+          databaseAccountName: this.container.databaseAccount()?.name,
          databaseName: this.collection?.databaseId,
          collectionName: this.collection?.id(),
-
+          defaultExperience: this.container.defaultExperience(),
          dataExplorerArea: Constants.Areas.Tab,
          tabTitle: this.props.settingsTab.tabTitle(),
          error: getErrorMessage(error),
@@ -405,9 +409,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      traceSuccess(
        Action.Tab,
        {
+          databaseAccountName: this.container.databaseAccount().name,
          databaseName: this.collection.databaseId,
          collectionName: this.collection.id(),
-
+          defaultExperience: this.container.defaultExperience(),
          dataExplorerArea: Constants.Areas.Tab,
          tabTitle: this.props.settingsTab.tabTitle(),
        },
@@ -698,13 +703,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      }
    }

+    this.container.isRefreshingExplorer(false);
    this.setBaseline();
    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
    traceSuccess(
      Action.SettingsV2Updated,
      {
+        databaseAccountName: this.container.databaseAccount()?.name,
        databaseName: this.database.id(),
-
+        defaultExperience: this.container.defaultExperience(),
        dataExplorerArea: Constants.Areas.Tab,
        tabTitle: this.props.settingsTab.tabTitle(),
      },
@@ -782,12 +789,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    if (this.state.isMongoIndexingPolicySaveable && this.mongoDBCollectionResource) {
      try {
        const newMongoIndexes = this.getMongoIndexesToSave();
-        const newMongoCollection = {
+        const newMongoCollection: MongoDBCollectionResource = {
          ...this.mongoDBCollectionResource,
          indexes: newMongoIndexes,
        };

-        this.mongoDBCollectionResource = await updateCollection(
+        this.mongoDBCollectionResource = await updateMongoDBCollectionThroughRP(
          this.collection.databaseId,
          this.collection.id(),
          newMongoCollection
@@ -803,9 +810,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        traceSuccess(
          Action.MongoIndexUpdated,
          {
+            databaseAccountName: this.container.databaseAccount()?.name,
            databaseName: this.collection?.databaseId,
            collectionName: this.collection?.id(),
-
+            defaultExperience: this.container.defaultExperience(),
            dataExplorerArea: Constants.Areas.Tab,
            tabTitle: this.props.settingsTab.tabTitle(),
          },
@@ -815,9 +823,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        traceFailure(
          Action.MongoIndexUpdated,
          {
+            databaseAccountName: this.container.databaseAccount()?.name,
            databaseName: this.collection?.databaseId,
            collectionName: this.collection?.id(),
-
+            defaultExperience: this.container.defaultExperience(),
            dataExplorerArea: Constants.Areas.Tab,
            tabTitle: this.props.settingsTab.tabTitle(),
            error: getErrorMessage(error),
@@ -860,13 +869,16 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        });
      }
    }
+    this.container.isRefreshingExplorer(false);
    this.setBaseline();
    this.setState({ wasAutopilotOriginallySet: this.state.isAutoPilotSelected });
    traceSuccess(
      Action.SettingsV2Updated,
      {
+        databaseAccountName: this.container.databaseAccount()?.name,
        databaseName: this.collection?.databaseId,
        collectionName: this.collection?.id(),
+        defaultExperience: this.container.defaultExperience(),
        dataExplorerArea: Constants.Areas.Tab,
        tabTitle: this.props.settingsTab.tabTitle(),
      },
@@ -874,18 +886,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    );
  };

-  public getMongoIndexTabContent = (
-    mongoIndexingPolicyComponentProps: MongoIndexingPolicyComponentProps
-  ): JSX.Element => {
-    if (userContext.authType === AuthType.AAD) {
-      if (this.container.isEnableMongoCapabilityPresent()) {
-        return <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />;
-      }
-      return undefined;
-    }
-    return mongoIndexingPolicyAADError;
-  };
-
  public render(): JSX.Element {
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
@@ -1003,11 +1003,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        content: <IndexingPolicyComponent {...indexingPolicyComponentProps} />,
      });
    } else if (this.container.isPreferredApiMongoDB()) {
-      const mongoIndexTabContext = this.getMongoIndexTabContent(mongoIndexingPolicyComponentProps);
-      if (mongoIndexTabContext) {
+      if (this.container.isEnableMongoCapabilityPresent()) {
        tabs.push({
          tab: SettingsV2TabTypes.IndexingPolicyTab,
-          content: mongoIndexTabContext,
+          content: <MongoIndexingPolicyComponent {...mongoIndexingPolicyComponentProps} />,
+        });
+      } else {
+        tabs.push({
+          tab: SettingsV2TabTypes.IndexingPolicyTab,
+          content: mongoIndexingPolicyAADError,
        });
      }
    }
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -23,6 +23,7 @@ import {
  ITextStyles,
  IDetailsRowStyles,
  IStackStyles,
+  IIconStyles,
  IDetailsListStyles,
  IDropdownStyles,
  ISeparatorStyles,
@@ -115,6 +116,8 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
  childrenGap: 20,
 };

+export const accordionIconStyles: IIconStyles = { root: { paddingTop: 7 } };
+
 export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };

 export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx
@@ -239,7 +239,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack {...createAndAddMongoIndexStackProps} styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Current index(es)" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Current index(es)">
          {
            <>
              <DetailsList
@@ -266,7 +266,7 @@ export class MongoIndexingPolicyComponent extends React.Component<MongoIndexingP

    return (
      <Stack styles={mediumWidthStackStyles}>
-        <CollapsibleSectionComponent title="Index(es) to be dropped" isExpandedByDefault={true}>
+        <CollapsibleSectionComponent title="Index(es) to be dropped">
          {indexesToBeDropped.length > 0 && (
            <DetailsList
              styles={customDetailsListStyles}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/snapshots/MongoIndexingPolicyComponent.test.tsx.snap
@@ -42,7 +42,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
-      isExpandedByDefault={true}
      title="Current index(es)"
    >
      <StyledWithViewportComponent
@@ -115,7 +114,7 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
      </Stack>
    </CollapsibleSectionComponent>
  </Stack>
-  <Separator
+  <Styled
    styles={
      Object {
        "root": Array [
@@ -140,7 +139,6 @@ exports[`MongoIndexingPolicyComponent renders 1`] = `
    }
  >
    <CollapsibleSectionComponent
-      isExpandedByDefault={true}
      title="Index(es) to be dropped"
    />
  </Stack>
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -1,24 +1,23 @@
-import { Label, Link, MessageBar, MessageBarType, Stack, Text, TextField } from "office-ui-fabric-react";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
-import { configContext, Platform } from "../../../../ConfigContext";
-import * as DataModels from "../../../../Contracts/DataModels";
+import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
 import * as ViewModels from "../../../../Contracts/ViewModels";
+import * as DataModels from "../../../../Contracts/DataModels";
 import * as SharedConstants from "../../../../Shared/Constants";
-import { userContext } from "../../../../UserContext";
-import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
 import Explorer from "../../../Explorer";
 import {
  getTextFieldStyles,
+  subComponentStackProps,
+  titleAndInputStackProps,
+  throughputUnit,
  getThroughputApplyLongDelayMessage,
  getThroughputApplyShortDelayMessage,
-  subComponentStackProps,
-  throughputUnit,
-  titleAndInputStackProps,
  updateThroughputBeyondLimitWarningMessage,
 } from "../SettingsRenderUtils";
 import { hasDatabaseSharedThroughput } from "../SettingsUtils";
-import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";
+import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
+import { Link, Text, TextField, Stack, Label, MessageBar, MessageBarType } from "office-ui-fabric-react";
+import { configContext, Platform } from "../../../../ConfigContext";

 export interface ScaleComponentProps {
  collection: ViewModels.Collection;
@@ -80,7 +79,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  };

  public getMaxRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
      return Constants.TryCosmosExperience.maxRU;
    }

@@ -92,7 +91,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
  };

  public getMinRUs = (): number => {
-    if (userContext.isTryCosmosDBSubscription) {
+    if (this.props.container?.isTryCosmosDBSubscription()) {
      return SharedConstants.CollectionCreation.DefaultCollectionRUs400;
    }

@@ -173,6 +172,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      databaseAccount={this.props.container.databaseAccount()}
      databaseName={this.databaseId}
      collectionName={this.collectionId}
+      serverId={this.props.container.serverId()}
      throughput={this.props.throughput}
      throughputBaseline={this.props.throughputBaseline}
      onThroughputChange={this.props.onThroughputChange}
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
@@ -1,13 +1,14 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { DatabaseAccount } from "../../../../Contracts/DataModels";
-import { updateUserContext } from "../../../../UserContext";
-import Explorer from "../../../Explorer";
-import { ChangeFeedPolicyState, GeospatialConfigType, TtlOff, TtlOn, TtlOnNoDefault, TtlType } from "../SettingsUtils";
-import { collection, container } from "../TestUtils";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";
+import { container, collection } from "../TestUtils";
+import { TtlType, GeospatialConfigType, ChangeFeedPolicyState, TtlOnNoDefault, TtlOn, TtlOff } from "../SettingsUtils";
+import ko from "knockout";
+import Explorer from "../../../Explorer";

 describe("SubSettingsComponent", () => {
+  container.isPreferredApiDocumentDB = ko.computed(() => true);
+
  const baseProps: SubSettingsComponentProps = {
    collection: collection,
    container: container,
@@ -105,13 +106,8 @@ describe("SubSettingsComponent", () => {

  it("partitionKey not visible", () => {
    const newContainer = new Explorer();
-    updateUserContext({
-      databaseAccount: {
-        properties: {
-          capabilities: [{ name: "EnableCassandra" }],
-        },
-      } as DatabaseAccount,
-    });
+
+    newContainer.isPreferredApiCassandra = ko.computed(() => true);
    const props = { ...baseProps, container: newContainer };
    const subSettingsComponent = new SubSettingsComponent(props);
    expect(subSettingsComponent.getPartitionKeyVisible()).toEqual(false);
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -1,38 +1,28 @@
-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 { userContext } from "../../../../UserContext";
+import {
+  GeospatialConfigType,
+  TtlType,
+  ChangeFeedPolicyState,
+  isDirty,
+  IsComponentDirtyResult,
+  TtlOn,
+  TtlOff,
+  TtlOnNoDefault,
+  getSanitizedInputValue,
+} from "../SettingsUtils";
 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 {
-  changeFeedPolicyToolTip,
-  getChoiceGroupStyles,
  getTextFieldStyles,
-  messageBarStyles,
+  changeFeedPolicyToolTip,
  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 {
@@ -70,15 +60,17 @@ 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.geospatialVisible = userContext.apiType === "SQL";
+    this.ttlVisible = (this.props.container && !this.props.container.isPreferredApiCassandra()) || false;
+    this.geospatialVisible = this.props.container.isPreferredApiDocumentDB();
    this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
-    this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
+    this.partitionKeyName = this.props.container.isPreferredApiMongoDB() ? "Shard key" : "Partition key";
  }

  componentDidMount(): void {
@@ -178,51 +170,39 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
  ): void =>
    this.props.onChangeFeedPolicyChange(ChangeFeedPolicyState[option.key as keyof typeof ChangeFeedPolicyState]);

-  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)}
+  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)"
        />
-        {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>
-    );
+      )}
+    </Stack>
+  );

  private analyticalTtlChoiceGroupOptions: IChoiceGroupOption[] = [
    { key: TtlType.Off, text: "Off", disabled: true },
@@ -320,8 +300,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr

  public getPartitionKeyVisible = (): boolean => {
    if (
-      userContext.apiType === "Cassandra" ||
-      userContext.apiType === "Tables" ||
+      this.props.container.isPreferredApiCassandra() ||
+      this.props.container.isPreferredApiTable() ||
      !this.props.collection.partitionKeyProperty ||
      (this.props.container.isPreferredApiMongoDB() && this.props.collection.partitionKey.systemKey)
    ) {
@@ -335,7 +315,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
  public render(): JSX.Element {
    return (
      <Stack {...subComponentStackProps}>
-        {userContext.apiType !== "Cassandra" && this.getTtlComponent()}
+        {this.ttlVisible && this.getTtlComponent()}

        {this.geospatialVisible && this.getGeoSpatialComponent()}

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.test.tsx
@@ -1,16 +1,17 @@
 import { shallow } from "enzyme";
 import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
 import {
  ThroughputInputAutoPilotV3Component,
  ThroughputInputAutoPilotV3Props,
 } from "./ThroughputInputAutoPilotV3Component";
+import * as DataModels from "../../../../../Contracts/DataModels";

 describe("ThroughputInputAutoPilotV3Component", () => {
  const baseProps: ThroughputInputAutoPilotV3Props = {
    databaseAccount: {} as DataModels.DatabaseAccount,
    databaseName: "test",
    collectionName: "test",
+    serverId: undefined,
    wasAutopilotOriginallySet: false,
    throughput: 100,
    throughputBaseline: 100,
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -1,52 +1,55 @@
+import React from "react";
+import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
 import {
-  Checkbox,
+  getTextFieldStyles,
+  getToolTipContainer,
+  noLeftPaddingCheckBoxStyle,
+  titleAndInputStackProps,
+  checkBoxAndInputStackProps,
+  getChoiceGroupStyles,
+  messageBarStyles,
+  getEstimatedSpendingElement,
+  getAutoPilotV3SpendElement,
+  manualToAutoscaleDisclaimerElement,
+  saveThroughputWarningMessage,
+  ManualEstimatedSpendingDisplayProps,
+  AutoscaleEstimatedSpendingDisplayProps,
+  PriceBreakdown,
+  getRuPriceBreakdown,
+  transparentDetailsHeaderStyle,
+} from "../../SettingsRenderUtils";
+import {
+  Text,
+  TextField,
  ChoiceGroup,
-  FontIcon,
  IChoiceGroupOption,
-  IColumn,
+  Checkbox,
+  Stack,
  Label,
  Link,
  MessageBar,
-  Stack,
-  Text,
-  TextField,
+  FontIcon,
+  IColumn,
 } from "office-ui-fabric-react";
-import React from "react";
-import * as DataModels from "../../../../../Contracts/DataModels";
-import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
-import * as SharedConstants from "../../../../../Shared/Constants";
-import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
-import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
-import { userContext } from "../../../../../UserContext";
-import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
-import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
-import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
-import {
-  AutoscaleEstimatedSpendingDisplayProps,
-  checkBoxAndInputStackProps,
-  getAutoPilotV3SpendElement,
-  getChoiceGroupStyles,
-  getEstimatedSpendingElement,
-  getRuPriceBreakdown,
-  getTextFieldStyles,
-  getToolTipContainer,
-  ManualEstimatedSpendingDisplayProps,
-  manualToAutoscaleDisclaimerElement,
-  messageBarStyles,
-  noLeftPaddingCheckBoxStyle,
-  PriceBreakdown,
-  saveThroughputWarningMessage,
-  titleAndInputStackProps,
-  transparentDetailsHeaderStyle,
-} from "../../SettingsRenderUtils";
-import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
 import { ToolTipLabelComponent } from "../ToolTipLabelComponent";
+import { getSanitizedInputValue, IsComponentDirtyResult, isDirty } from "../../SettingsUtils";
+import * as SharedConstants from "../../../../../Shared/Constants";
+import * as DataModels from "../../../../../Contracts/DataModels";
+import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
+import { userContext } from "../../../../../UserContext";
+import { SubscriptionType } from "../../../../../Contracts/SubscriptionType";
+import { usageInGB, calculateEstimateNumber } from "../../../../../Utils/PricingUtils";
+import { Features } from "../../../../../Common/Constants";
+import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+
+import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
+import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";

 export interface ThroughputInputAutoPilotV3Props {
  databaseAccount: DataModels.DatabaseAccount;
  databaseName: string;
  collectionName: string;
+  serverId: string;
  throughput: number;
  throughputBaseline: number;
  onThroughputChange: (newThroughput: number) => void;
@@ -179,6 +182,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    }

    const isDirty: boolean = this.IsComponentDirty().isDiscardable;
+    const serverId: string = this.props.serverId;
    const regions = account?.properties?.readLocations?.length || 1;
    const multimaster = account?.properties?.enableMultipleWriteLocations || false;

@@ -188,7 +192,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
      estimatedSpend = this.getEstimatedManualSpendElement(
        // if migrating from autoscale to manual, we use the autoscale RUs value as that is what will be set...
        this.overrideWithAutoPilotSettings() ? this.props.maxAutoPilotThroughput : this.props.throughputBaseline,
-        userContext.portalEnv,
+        serverId,
        regions,
        multimaster,
        isDirty ? this.props.throughput : undefined
@@ -196,7 +200,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    } else {
      estimatedSpend = this.getEstimatedAutoscaleSpendElement(
        this.props.maxAutoPilotThroughputBaseline,
-        userContext.portalEnv,
+        serverId,
        regions,
        multimaster,
        isDirty ? this.props.maxAutoPilotThroughput : undefined
@@ -454,8 +458,11 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    TelemetryProcessor.trace(Action.ToggleAutoscaleSetting, ActionModifiers.Mark, {
      changedSelectedValueTo:
        option.key === "true" ? ActionModifiers.ToggleAutoscaleOn : ActionModifiers.ToggleAutoscaleOff,
+      subscriptionId: userContext.subscriptionId,
+      databaseAccountName: this.props.databaseAccount?.name,
      databaseName: this.props.databaseName,
      collectionName: this.props.collectionName,
+      apiKind: userContext.defaultExperience,
      dataExplorerArea: "Scale Tab V2",
    });
  };
@@ -464,7 +471,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
    const href = `https://ncv.microsoft.com/vRBTO37jmO?ctx={"AzureSubscriptionId":"${userContext.subscriptionId}","CosmosDBAccountName":"${userContext.databaseAccount?.name}"}`;
    const oneTBinKB = 1000000000;
    const minRUperGB = 10;
-    const featureFlagEnabled = userContext.features.showMinRUSurvey;
+    const featureFlagEnabled = window.dataExplorer?.isFeatureEnabled(Features.showMinRUSurvey);
    const collectionIsEligible =
      userContext.subscriptionType !== SubscriptionType.Internal &&
      this.props.usageSizeInKB > oneTBinKB &&
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ToolTipLabelComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ToolTipLabelComponent.test.tsx.snap
@@ -41,7 +41,7 @@ exports[`ToolTipLabelComponent renders 1`] = `
        }
      }
    >
-      <Icon
+      <StyledIconBase
        ariaLabel="Info"
        iconName="Info"
        styles={
--- a/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
@@ -1,23 +1,23 @@
-import ko from "knockout";
-import * as DataModels from "../../../Contracts/DataModels";
-import * as ViewModels from "../../../Contracts/ViewModels";
+import { collection } from "./TestUtils";
 import {
  getMongoIndexType,
-  getMongoIndexTypeText,
  getMongoNotification,
  getSanitizedInputValue,
  hasDatabaseSharedThroughput,
  isDirty,
-  isIndexTransforming,
  MongoIndexTypes,
  MongoNotificationType,
-  MongoWildcardPlaceHolder,
  parseConflictResolutionMode,
  parseConflictResolutionProcedure,
+  MongoWildcardPlaceHolder,
+  getMongoIndexTypeText,
  SingleFieldText,
  WildcardText,
+  isIndexTransforming,
 } from "./SettingsUtils";
-import { collection } from "./TestUtils";
+import * as DataModels from "../../../Contracts/DataModels";
+import * as ViewModels from "../../../Contracts/ViewModels";
+import ko from "knockout";

 describe("SettingsUtils", () => {
  it("hasDatabaseSharedThroughput", () => {
@@ -42,6 +42,7 @@ describe("SettingsUtils", () => {
        loadCollections: undefined,
        findCollectionWithId: undefined,
        openAddCollection: undefined,
+        onDeleteDatabaseContextMenuClick: undefined,
        readSettings: undefined,
        onSettingsClick: undefined,
        loadOffer: undefined,
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.test.tsx
@@ -1,7 +1,7 @@
-import { shallow } from "enzyme";
 import React from "react";
-import { DescriptionType, NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";
+import { shallow } from "enzyme";
 import { SmartUiComponent, SmartUiDescriptor } from "./SmartUiComponent";
+import { NumberUiType, SmartUiInput } from "../../../SelfServe/SelfServeTypes";

 describe("SmartUiComponent", () => {
  const exampleData: SmartUiDescriptor = {
@@ -18,12 +18,10 @@ describe("SmartUiComponent", () => {
        {
          id: "description",
          input: {
-            labelTKey: undefined,
            dataFieldName: "description",
            type: "string",
            description: {
              textTKey: "this is an example description text.",
-              type: DescriptionType.Text,
              link: {
                href: "https://docs.microsoft.com/en-us/azure/cosmos-db/introduction",
                textTKey: "Click here for more information.",
@@ -97,9 +95,9 @@ describe("SmartUiComponent", () => {
            dataFieldName: "database",
            type: "object",
            choices: [
-              { labelTKey: "Database 1", key: "db1" },
-              { labelTKey: "Database 2", key: "db2" },
-              { labelTKey: "Database 3", key: "db3" },
+              { label: "Database 1", key: "db1" },
+              { label: "Database 2", key: "db2" },
+              { label: "Database 3", key: "db3" },
            ],
            defaultKey: "db2",
          },
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Steve Faulkner	e752f21ec7	Add command	2021-02-28 23:19:51 -06:00
Steve Faulkner	9f34bff755	WIP	2021-02-26 17:12:12 -06:00
				`@@ -1 +0,0 @@`
				`[Preview this branch](https://cosmos-explorer-preview.azurewebsites.net/pull/EDIT_THIS_NUMBER_IN_THE_PR_DESCRIPTION?feature.someFeatureFlagYouMightNeed=true)`
				`@@ -1 +0,0 @@`
				`export { Vega2 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { Vega3 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { Vega4 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { Vega5 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { VegaLite1 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { VegaLite2 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { VegaLite3 as default } from "@nteract/transform-vega";`
				`@@ -1 +0,0 @@`
				`export { VegaLite4 as default } from "@nteract/transform-vega";`