Sandbox HTML and JavaScript outputs in iFrame

Fix lint file system util (#481 )
Co-authored-by: Steve Faulkner <471400+southpolesteve@users.noreply.github.com>
2025-12-23 19:01:28 +00:00 · 2021-04-02 17:27:17 -07:00 · 2021-03-31 22:28:16 -05:00 · 2021-03-31 19:58:38 -05:00 · 2021-03-31 19:49:45 -05:00 · 2021-03-31 19:25:45 -05:00
635 changed files with 101074 additions and 52837 deletions
--- a/.env.example
+++ b/.env.example
@@ -4,6 +4,8 @@ PORTAL_RUNNER_SUBSCRIPTION=
 PORTAL_RUNNER_RESOURCE_GROUP=
 PORTAL_RUNNER_DATABASE_ACCOUNT=
 PORTAL_RUNNER_DATABASE_ACCOUNT_KEY=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT=
+PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY=
 PORTAL_RUNNER_CONNECTION_STRING=
 NOTEBOOKS_TEST_RUNNER_TENANT_ID=
 NOTEBOOKS_TEST_RUNNER_CLIENT_ID=
--- a/.eslintignore
+++ b/.eslintignore
@@ -11,15 +11,9 @@ 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
@@ -30,8 +24,6 @@ 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
@@ -58,8 +50,6 @@ 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
@@ -87,7 +77,7 @@ src/Explorer/DataSamples/ContainerSampleGenerator.test.ts
 src/Explorer/DataSamples/ContainerSampleGenerator.ts
 src/Explorer/DataSamples/DataSamplesUtil.test.ts
 src/Explorer/DataSamples/DataSamplesUtil.ts
-src/Explorer/Explorer.ts
+src/Explorer/Explorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -95,8 +85,6 @@ 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
@@ -109,8 +97,6 @@ src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
 src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
-src/Explorer/Notebook/FileSystemUtil.ts
-src/Explorer/Notebook/NTeractUtil.ts
 src/Explorer/Notebook/NotebookClientV2.ts
 src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
 src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
@@ -139,15 +125,12 @@ src/Explorer/Panes/DeleteCollectionConfirmationPane.test.ts
 src/Explorer/Panes/DeleteCollectionConfirmationPane.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.test.ts
 src/Explorer/Panes/DeleteDatabaseConfirmationPane.ts
-src/Explorer/Panes/ExecuteSprocParamsPane.ts
 src/Explorer/Panes/GraphStylingPane.ts
 src/Explorer/Panes/LoadQueryPane.ts
 src/Explorer/Panes/NewVertexPane.ts
 src/Explorer/Panes/PaneComponents.ts
 src/Explorer/Panes/RenewAdHocAccessPane.ts
 src/Explorer/Panes/SaveQueryPane.ts
-src/Explorer/Panes/SettingsPane.test.ts
-src/Explorer/Panes/SettingsPane.ts
 src/Explorer/Panes/SetupNotebooksPane.ts
 src/Explorer/Panes/StringInputPane.ts
 src/Explorer/Panes/SwitchDirectoryPane.ts
@@ -160,9 +143,7 @@ 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/SplashScreenComponentAdapter.test.ts
+src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
@@ -170,7 +151,6 @@ 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
@@ -179,8 +159,6 @@ 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
@@ -200,7 +178,6 @@ src/Explorer/Tabs/QueryTab.test.ts
 src/Explorer/Tabs/QueryTab.ts
 src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/SparkMasterTab.ts
 src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
@@ -264,8 +241,6 @@ 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
@@ -274,25 +249,11 @@ 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
@@ -339,15 +300,7 @@ 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
@@ -377,8 +330,7 @@ src/Explorer/Notebook/temp/inputs/editor.tsx
 src/Explorer/Notebook/temp/markdown-cell.tsx
 src/Explorer/Notebook/temp/source.tsx
 src/Explorer/Notebook/temp/syntax-highlighter/index.tsx
-src/Explorer/SplashScreen/SplashScreenComponent.tsx
-src/Explorer/SplashScreen/SplashScreenComponentApdapter.tsx
+src/Explorer/SplashScreen/SplashScreen.tsx
 src/Explorer/Tabs/GalleryTab.tsx
 src/Explorer/Tabs/NotebookViewerTab.tsx
 src/Explorer/Tabs/TerminalTab.tsx
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,41 +1,39 @@
 module.exports = {
  env: {
    browser: true,
-    es6: true
+    es6: true,
  },
  plugins: ["@typescript-eslint", "no-null", "prefer-arrow"],
  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  globals: {
    Atomics: "readonly",
-    SharedArrayBuffer: "readonly"
+    SharedArrayBuffer: "readonly",
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaFeatures: {
-      jsx: true
+      jsx: true,
    },
    ecmaVersion: 2018,
-    sourceType: "module"
+    sourceType: "module",
  },
  overrides: [
    {
      files: ["**/*.tsx"],
-      env: {
-        jest: true
-      },
-      extends: ["plugin:react/recommended"],
-      plugins: ["react"]
+      extends: ["plugin:react/recommended"], // TODO: Add react-hooks
+      plugins: ["react"],
    },
    {
      files: ["**/*.{test,spec}.{ts,tsx}"],
      env: {
-        jest: true
+        jest: true,
      },
      extends: ["plugin:jest/recommended"],
-      plugins: ["jest"]
-    }
+      plugins: ["jest"],
+    },
  ],
  rules: {
+    "no-console": ["error", { allow: ["error", "warn", "dir"] }],
    curly: "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-extraneous-class": "error",
@@ -48,8 +46,8 @@ module.exports = {
      "error",
      {
        selector: "CallExpression[callee.object.name='JSON'][callee.property.name='stringify'] Identifier[name=/$err/]",
-        message: "Do not use JSON.stringify(error). It will print '{}'"
-      }
-    ]
-  }
+        message: "Do not use JSON.stringify(error). It will print '{}'",
+      },
+    ],
+  },
 };
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -0,0 +1,9 @@
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "daily"
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -9,15 +9,29 @@ on:
    branches:
      - master
 jobs:
+  codemetrics:
+    runs-on: ubuntu-latest
+    name: "Log Code Metrics"
+    if: github.ref == 'refs/heads/master'
+    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/codeMetrics.js
+        env:
+          CODE_METRICS_APP_ID: ${{ secrets.CODE_METRICS_APP_ID }}
  compile:
    runs-on: ubuntu-latest
    name: "Compile TypeScript"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run compile
      - run: npm run compile:strict
@@ -26,10 +40,10 @@ jobs:
    name: "Check Format"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run format:check
  lint:
@@ -37,10 +51,10 @@ jobs:
    name: "Lint"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run lint
  unittest:
@@ -48,10 +62,10 @@ jobs:
    name: "Unit Tests"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run test
  build:
@@ -60,10 +74,10 @@ jobs:
    name: "Build"
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - run: npm ci
      - run: npm run build:contracts
      - name: Restore Build Cache
@@ -80,21 +94,21 @@ jobs:
          path: dist/
  endtoendemulator:
    name: "End To End Emulator Tests"
-    needs: [lint, format, compile, unittest]
+    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - uses: southpolesteve/cosmos-emulator-github-action@v1
      - name: End to End Tests
        run: |
          npm ci
          npm start &
          npm run wait-for-server
-          npx jest -c ./jest.config.e2e.js --detectOpenHandles sql
+          npx jest -c ./jest.config.e2e.js --detectOpenHandles test/sql/container.spec.ts
        shell: bash
        env:
          DATA_EXPLORER_ENDPOINT: "https://localhost:1234/explorer.html?platform=Emulator"
@@ -111,10 +125,10 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
+          node-version: 14.x
      - name: Accessibility Check
        run: |
          # Ubuntu gets mad when webpack runs too many files watchers
@@ -129,45 +143,72 @@ jobs:
        env:
          NODE_TLS_REJECT_UNAUTHORIZED: 0
  endtoendhosted:
-    name: "End to End Hosted Tests"
-    needs: [lint, format, compile, unittest]
+    name: "End to End Tests"
+    needs: [cleanupaccounts]
    runs-on: ubuntu-latest
+    env:
+      NODE_TLS_REJECT_UNAUTHORIZED: 0
+      PORTAL_RUNNER_SUBSCRIPTION: ${{ secrets.PORTAL_RUNNER_SUBSCRIPTION }}
+      PORTAL_RUNNER_RESOURCE_GROUP: ${{ secrets.PORTAL_RUNNER_RESOURCE_GROUP }}
+      PORTAL_RUNNER_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT }}
+      PORTAL_RUNNER_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_DATABASE_ACCOUNT_KEY }}
+      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT }}
+      PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY: ${{ secrets.PORTAL_RUNNER_MONGO_DATABASE_ACCOUNT_KEY }}
+      NOTEBOOKS_TEST_RUNNER_TENANT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_TENANT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+      PORTAL_RUNNER_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_SQL }}
+      MONGO_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_MONGO }}
+      CASSANDRA_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_CASSANDRA }}
+      TABLES_CONNECTION_STRING: ${{ secrets.CONNECTION_STRING_TABLE }}
+      DATA_EXPLORER_ENDPOINT: "https://localhost:1234/hostedExplorer.html"
+    strategy:
+      fail-fast: false
+      matrix:
+        test-file:
+          - ./test/cassandra/container.spec.ts
+          - ./test/mongo/mongoIndexPolicy.spec.ts
+          - ./test/notebooks/uploadAndOpenNotebook.spec.ts
+          - ./test/selfServe/selfServeExample.spec.ts
+          - ./test/sql/container.spec.ts
+          - ./test/sql/resourceToken.spec.ts
+          - ./test/tables/container.spec.ts
    steps:
      - uses: actions/checkout@v2
-      - name: Use Node.js 12.x
+      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
-          node-version: 12.x
-      - name: End to End Hosted Tests
-        run: |
-          npm ci
-          npm start &
-          npm run wait-for-server
-          npm run test:e2e
+          node-version: 14.x
+      - run: npm ci
+      - run: npm start &
+      - run: node utils/cleanupDBs.js
+      - run: npm run wait-for-server
+      - name: ${{ matrix['test-file'] }}
+        run: npx jest -c ./jest.config.e2e.js --detectOpenHandles ${{ matrix['test-file'] }}
        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 }}
-          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: failed-*
+  cleanupaccounts:
+    name: "Cleanup Test Database Accounts"
+    runs-on: ubuntu-latest
+    env:
+      NOTEBOOKS_TEST_RUNNER_CLIENT_ID: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_ID }}
+      NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET: ${{ secrets.NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET }}
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 14.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 14.x
+      - run: npm ci
+      - run: node utils/cleanupDBs.js
  nuget:
    name: Publish Nuget
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -183,7 +224,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 -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
        name: packages
        with:
@@ -191,7 +232,7 @@ jobs:
  nugetmpac:
    name: Publish Nuget MPAC
    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
+    needs: [build]
    runs-on: ubuntu-latest
    env:
      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
@@ -208,32 +249,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 -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
-      - uses: actions/upload-artifact@v2
-        name: packages
-        with:
-          path: "*.nupkg"
-  nugetie:
-    name: Publish Nuget IE
-    if: github.ref == 'refs/heads/master' || contains(github.ref, 'hotfix/') || contains(github.ref, 'release/')
-    needs: [lint, format, compile, build, unittest, endtoendemulator, endtoendhosted, accessibility]
-    runs-on: ubuntu-latest
-    env:
-      NUGET_SOURCE: ${{ secrets.NUGET_SOURCE }}
-      AZURE_DEVOPS_PAT: ${{ secrets.AZURE_DEVOPS_PAT }}
-    steps:
-      - uses: nuget/setup-nuget@v1
-        with:
-          nuget-api-key: ${{ secrets.NUGET_API_KEY }}
-      - name: Download Dist Folder
-        uses: actions/download-artifact@v2
-        with:
-          name: dist
-      - run: cp ./configs/prod.json config.json
-      - run: sed -i 's/Azure.Cosmos.DB.Data.Explorer/Azure.Cosmos.DB.Data.Explorer.IE/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 -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
+      - run: nuget push -SkipDuplicate -Source "$NUGET_SOURCE" -ApiKey Az *.nupkg
      - uses: actions/upload-artifact@v2
        name: packages
        with:
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,21 +1,26 @@
 // 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"
+  "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
+  }
 }
--- a/CODING_GUIDELINES.md
+++ b/CODING_GUIDELINES.md
@@ -0,0 +1,194 @@
+# Coding Guidelines and Recommendations
+
+Cosmos Explorer has been under constant development for over 5 years. As a result, there are many different patterns and practices in the codebase. This document serves as a guide to how we write code and helps avoid propagating practices which are no longer preferred. Each requirement in this document is labeled and color-coded to show the relative importance. In order from highest to lowest importance:
+
+✅ DO this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+⛔️ DO NOT do this. If you feel you need an exception, engage with the project owners _prior_ to implementation.
+
+☑️ YOU SHOULD strongly consider this but it is not a requirement. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+⚠️ YOU SHOULD NOT strongly consider not doing this. If not following this advice, please comment code with why and proactively begin a discussion as part of the PR process.
+
+💭 YOU MAY consider this advice if appropriate to your situation. Other team members may comment on this as part of PR review, but there is no need to be proactive.
+
+## Development Environment
+
+☑️ YOU SHOULD
+
+- Use VSCode and install the following extensions. This setup will catch most linting/formatting/type errors as you develop:
+  - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+  - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+
+💭 YOU MAY
+
+- Use the [GitHub CLI](https://cli.github.com/). It has helpful workflows for submitting PRs as well as for checking out other team member's PRs.
+- Use Windows, Linux (including WSL), or OSX. We have team members developing on all three environments.
+
+✅ DO
+
+- Maintain cross-platform compatibility when modifying any engineering or build systems
+
+## Code Formatting
+
+✅ DO
+
+- Use [Prettier](https://prettier.io/) to format your code
+  - This will occur automatically if using the recommended editor setup
+  - `npm run format` will also format code
+
+## Linting
+
+✅ DO
+
+- Use [ESLint](https://eslint.org/) to check for code errors.
+  - This will occur automatically if using the recommended editor setup
+  - `npm run lint` will also check for linting errors
+
+💭 YOU MAY
+
+- Consider adding new lint rules.
+  - If you find yourself performing "nits" as part of PR review, consider adding a lint rule that will automatically catch the error in the future
+
+⚠️ YOU SHOULD NOT
+
+- Disable lint rules
+  - Lint rules exist as guidance and to catch common mistakes
+  - You will find places we disable specific lint rules however it should be exceptional.
+  - If a rule does need to be disabled, prefer disabling a specific line instead of the entire file.
+
+⛔️ DO NOT
+
+- Add [TSLint](https://palantir.github.io/tslint/) rules
+  - TSLint has been deprecated and is on track to be removed
+  - Always prefer ESLint rules
+
+## UI Components
+
+☑️ YOU SHOULD
+
+- Write new components using [React](https://reactjs.org/). We are actively migrating Cosmos Explorer off of [Knockout](https://knockoutjs.com/).
+- Use [Fluent](https://developer.microsoft.com/en-us/fluentui#/) components.
+  - Fluent components are designed to be highly accessible and composable
+  - Using Fluent allows us to build upon the work of the Fluent team and leads to a lower total cost of ownership for UI code
+
+### React
+
+☑️ YOU SHOULD
+
+- Use pure functional components when no state is required
+
+💭 YOU MAY
+
+- Use functional (hooks) or class components
+  - The project contains examples of both
+  - Neither is strongly preferred at this time
+
+⛔️ DO NOT
+
+- Use inheritance for sharing component behavior.
+  - React documentation covers this topic in detail https://reactjs.org/docs/composition-vs-inheritance.html
+- Suffix your file or component name with "Component"
+  - Even though the code has examples of it, we are ending the practice.
+
+## Libraries
+
+⚠️ YOU SHOULD NOT
+
+- Add new libraries to package.json.
+  - Adding libraries may bring in code that explodes the bundled size or attempts to run NodeJS code in the browser
+  - Consult with project owners for help with library selection if one is needed
+
+⛔️ DO NOT
+
+- Use underscore.js
+  - Much of this library is now native to JS and will be automatically transpiled
+- Use jQuery
+  - Much of this library is not native to the DOM.
+  - We are planning to remove it
+
+## Testing
+
+⛔️ DO NOT
+
+- Decrease test coverage
+  - Unit/Functional test coverage is checked as part of the CI process
+
+### Unit Tests
+
+✅ DO
+
+- Write unit tests for non-UI and utility code.
+- Write your tests using [Jest](https://jestjs.io/)
+
+☑️ YOU SHOULD
+
+- Abstract non-UI and utility code so it can run either the NodeJS or Browser environment
+
+### Functional(Component) Tests
+
+✅ DO
+
+- Write tests for UI components
+- Write your tests using [Jest](https://jestjs.io/)
+- Use either Enzyme or React Testing Library to perform component tests.
+
+### Mocking
+
+✅ DO
+
+- Use Jest's built-in mocking helpers
+
+☑️ YOU SHOULD
+
+- Write code that does not require mocking
+- Build components that do not require mocking extremely large or difficult to mock objects (like Explorer.ts). Pass _only_ what you need.
+
+⛔️ DO NOT
+
+- Use sinon.js for mocking
+  - Sinon has been deprecated and planned for removal
+
+### End to End Tests
+
+✅ DO
+
+- 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.
+
+☑️ YOU SHOULD
+
+- Write tests that use accessible attributes to perform actions. Role, Title, Label, etc
+  - More information https://testing-library.com/docs/queries/about#priority
+
+⚠️ YOU SHOULD NOT
+
+- Add test specfic `data-*` attributes to dom elements
+  - This is a common current practice, but one we would like to avoid in the future
+  - End to end tests need to use semantic HTML and accesible attributes to be truely end to end
+  - No user or screen reader actually navigates an app using `data-*` attributes
+- Add arbitrary time delays to wait for page to render or element to be ready.
+  - All the time delays add up and slow down testing.
+  - Prefer using the framework's "wait for..." functionality.
+
+### Migrating Knockout to React
+
+✅ DO
+
+- Consult other team members before beginning migration work. There is a significant amount of flux in patterns we are using and it is important we do not propagate incorrect patterns.
+- Start by converting HTML to JSX: https://magic.reactjs.net/htmltojsx.htm. Add functionality as a second step.
+
+☑️ YOU SHOULD
+
+- Write React components that require no dependency on Knockout or observables to trigger rendering.
+
+## Browser Support
+
+✅ DO
+
+- Support all [browsers supported by the Azure Portal](https://docs.microsoft.com/en-us/azure/azure-portal/azure-portal-supported-browsers-devices)
+- Support IE11
+  - In practice, this should not need to be considered as part of a normal development workflow
+  - Polyfills and transpilation are already provided by our engineering systems.
+  - This requirement will be removed on March 30th, 2021 when Azure drops IE11 support.
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,6 @@
 # Contribution guidelines to Data Explorer

-This project welcomes contributions and suggestions.  Most contributions require you to agree to a
+This project welcomes contributions and suggestions. Most contributions require you to agree to a
 Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
 the rights to use your contribution. For details, visit https://cla.microsoft.com.

@@ -13,6 +13,7 @@ For more information see the [Code of Conduct FAQ](https://opensource.microsoft.
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

 ## Microsoft Open Source Code of Conduct
+
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).

 Resources:
@@ -20,33 +21,3 @@ Resources:
 - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/)
 - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/)
 - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns
-
-## Browser support
-Please make sure to support all modern browsers as well as Internet Explorer 11.
-For IE support, polyfill is preferred over new usage of lodash or underscore. We already polyfill almost everything by importing babel-polyfill at the top of entry points.
-
-
-## Coding guidelines, conventions and recommendations
-### Typescript
-* Follow this [typescript style guide](https://github.com/excelmicro/typescript) which is based on [airbnb's style  guide](https://github.com/airbnb/javascript).
-* Conventions speficic to this project:
-  - Use double-quotes for string
-  - Don't use `null`, use `undefined`
-  - Pascal case for private static readonly fields
-  - Camel case for classnames in markup
-* Don't use class unless necessary
-* Code related to notebooks should be dynamically imported so that it is loaded from a separate bundle only if the account is notebook-enabled. There are already top-level notebook components which are dynamically imported and their dependencies can be statically imported from these files.
-* Prefer using [Fluent UI controls](https://developer.microsoft.com/en-us/fluentui#/controls/web) over creating your own, in order to maintain consistency and support a11y.
-
-### React
-* Prefer using React class components over function components and hooks unless you have a simple component and require no nested functions:
-  * Nested functions may be harder to test independently
-  * Switching from function component to class component later mayb be painful
-
-## Testing
-Any PR should not decrease testing coverage.
-
-## Recommended Tools and VS Code extensions
-* [Bookmarks](https://github.com/alefragnani/vscode-bookmarks)
-* [Bracket pair colorizer](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2)
-* [GitHub Pull Requests and Issues](https://github.com/Microsoft/vscode-pull-request-github)
--- a/README.md
+++ b/README.md
@@ -18,7 +18,6 @@ Run `npm start` to start the development server and automatically rebuild on cha
 ### Hosted Development (https://cosmos.azure.com)

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

 ### Emulator Development
@@ -69,6 +68,10 @@ 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
+
+[![](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)
+
 # Contributing

 Please read the [contribution guidelines](./CONTRIBUTING.md).
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,4 @@
 module.exports = {
-  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"]
+  presets: [["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-react", "@babel/preset-typescript"],
+  plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
 };
--- a/images/notebook/publish_content.svg
+++ b/images/notebook/publish_content.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.31449 2.01439L4.00103 5.31963L3.26105 4.57965L7.8407 0L12.4203 4.57965L11.6804 5.31963L8.36691 2.01439V12.8428H7.31449V2.01439ZM13.629 12.8428H14.6814V16H1V12.8428H2.05242V14.9476H13.629V12.8428Z" fill="#0078D4"/>
+</svg>
--- a/jest-puppeteer.config.js
+++ b/jest-puppeteer.config.js
@@ -6,6 +6,7 @@ module.exports = {
    slowMo: 55,
    defaultViewport: null,
    ignoreHTTPSErrors: true,
-    args: ["--disable-web-security"]
-  }
+    args: ["--disable-web-security"],
+    exitOnPageError: false,
+  },
 };
--- a/jest.config.e2e.js
+++ b/jest.config.e2e.js
@@ -1,5 +1,5 @@
 module.exports = {
  preset: "jest-puppeteer",
  testMatch: ["<rootDir>/test/**/*.spec.[jt]s?(x)"],
-  setupFiles: ["dotenv/config"]
+  setupFiles: ["dotenv/config"],
 };
--- a/jest.config.js
+++ b/jest.config.js
@@ -21,17 +21,13 @@ module.exports = {
  collectCoverage: true,

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

  // 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"],
@@ -39,11 +35,11 @@ module.exports = {
  // An object that configures minimum threshold enforcement for coverage results
  coverageThreshold: {
    global: {
-      branches: 20,
-      functions: 24,
+      branches: 25,
+      functions: 25,
      lines: 30,
-      statements: 29.0
-    }
+      statements: 30,
+    },
  },

  // Make calling deprecated APIs throw helpful error messages
@@ -71,12 +67,13 @@ module.exports = {

  // A map from regular expressions to module names that allow to stub out resources with a single module
  moduleNameMapper: {
-    "^.*[.](svg|png|gif|less)$": "<rootDir>/mockModule",
+    "^.*[.](svg|png|gif|less|css)$": "<rootDir>/mockModule",
+    "@nteract/stateful-components/(.*)$": "<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",
-    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs"
+    "^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
  },

  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
@@ -164,11 +161,11 @@ module.exports = {
  // A map from regular expressions to paths to transformers
  transform: {
    "^.+\\.html?$": "html-loader-jest",
-    "^.+\\.[t|j]sx?$": "babel-jest"
+    "^.+\\.[t|j]sx?$": "babel-jest",
  },

  // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation
-  transformIgnorePatterns: ["/node_modules/", "/externals/"]
+  transformIgnorePatterns: ["/node_modules/", "/externals/"],

  // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them
  // unmockedModulePathPatterns: undefined,
--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -3,8 +3,8 @@
 /******************************************************************************/

@font-face {
-    font-family: wf_segoe-ui_normal;
-    src: url('../../fonts/segoe-ui/west-european/normal/latest.woff');
+  font-family: wf_segoe-ui_normal;
+  src: url("../../fonts/segoe-ui/west-european/normal/latest.woff");
 }

@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@@ -20,26 +20,26 @@
                                COLORS
 /******************************************************************************/

-@AccentMediumHigh: #0058AD;
-@AccentMedium: #004E87;
-@AccentHigh: #1EBAED;
-@AccentExtraHigh: #55B3FF;
-@AccentLow: #EDF6FF;
-@AccentMediumLow: #DDEEFE;
-@AccentLight: #EEF7FF;
-@AccentExtra: #DDF0FF;
+@AccentMediumHigh: #0058ad;
+@AccentMedium: #004e87;
+@AccentHigh: #1ebaed;
+@AccentExtraHigh: #55b3ff;
+@AccentLow: #edf6ff;
+@AccentMediumLow: #ddeefe;
+@AccentLight: #eef7ff;
+@AccentExtra: #ddf0ff;

-@SelectionHigh: #B91F26;
-@BaseLight: #FFFFFF;
+@SelectionHigh: #b91f26;
+@BaseLight: #ffffff;
@BaseDark: #000000;
-@NotificationLow: #FFF4CE;
-@NotificationHigh: #F9E9B0;
-@Purple1: #8A2DA5;
+@NotificationLow: #fff4ce;
+@NotificationHigh: #f9e9b0;
+@Purple1: #8a2da5;
@Dirty: #9b4f96;

-@BaseLow: #F2F2F2;
-@BaseMediumLow: #E6E6E6;
-@BaseMedium: #CCCCCC;
+@BaseLow: #f2f2f2;
+@BaseMediumLow: #e6e6e6;
+@BaseMedium: #cccccc;
@BaseMediumHigh: #767676;
@BaseHigh: #393939;

@@ -53,10 +53,17 @@

@ErrorColor: @SelectionHigh;

-@SelectionColor: #3074B0;
+@SelectionColor: #3074b0;

@FocusColor: #605e5c;

+@GalleryBackgroundColor: #fdfdfd;
+
+//Icons
+@InfoIconColor: #0072c6;
+@WarningIconColor: #db7500;
+@ErrorIconColor: #b91f26;
+
 /******************************************************************************
                                METRICS
 /******************************************************************************/
@@ -80,7 +87,7 @@
@ImgWidth: 14px;
@ImgHeight: 14px;

-@toggleFontWeight:700;
+@toggleFontWeight: 700;

 //Resource Tree
@TreeLineHeight: 17px;
@@ -144,16 +151,16 @@
 /**********************************************************************************/

 .flex-display(@display: flex) {
-	display: ~"-webkit-@{display}";
-	display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
-	display: ~"-ms-@{display}"; // IE11
-	display: @display;
+  display: ~"-webkit-@{display}";
+  display: ~"-ms-@{display}box"; // IE10 uses -ms-flexbox
+  display: ~"-ms-@{display}"; // IE11
+  display: @display;
 }

 .flex-direction(@direction: column) {
  -webkit-flex-direction: @direction;
-      -ms-flex-direction: @direction;
-          flex-direction: @direction;
+  -ms-flex-direction: @direction;
+  flex-direction: @direction;
 }

 /*************************************************************************************
@@ -161,32 +168,31 @@
 **************************************************************************************/

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    .selectedRadio,
-    .selectedRadio:hover,
-    .selectedRadio:active,
-    .selectedRadio.dirty,
-    .tab [type=radio]:checked ~ label,
-    .tab [type=radio]:checked ~ label:hover {
-        -ms-high-contrast-adjust: none;
-        -webkit-text-fill-color: HighlightText;
-        color: HighlightText;
-        border-color: HighlightText;
-        background-color: Highlight;
-    }
-
-    .queryMetricsSummaryTuple {
-
-        th, td {
-
-            &:nth-child(2) {
-                width: @IETableDataWidth;
-            }
-
-            &:nth-child(3) {
-                width: 50%;
-            }
-        }
+  .selectedRadio,
+  .selectedRadio:hover,
+  .selectedRadio:active,
+  .selectedRadio.dirty,
+  .tab [type="radio"]:checked ~ label,
+  .tab [type="radio"]:checked ~ label:hover {
+    -ms-high-contrast-adjust: none;
+    -webkit-text-fill-color: HighlightText;
+    color: HighlightText;
+    border-color: HighlightText;
+    background-color: Highlight;
+  }
+
+  .queryMetricsSummaryTuple {
+    th,
+    td {
+      &:nth-child(2) {
+        width: @IETableDataWidth;
+      }
+
+      &:nth-child(3) {
+        width: 50%;
+      }
    }
+  }
 }

 /********************************************************************************************
@@ -194,15 +200,15 @@
 *********************************************************************************************/

 .hover() {
-    background-color: @AccentLight;
+  background-color: @AccentLight;
 }

 .active() {
-    background-color: @AccentExtra;
+  background-color: @AccentExtra;
 }

 .focus() {
-    outline: 1px dashed @FocusColor;
+  outline: 1px dashed @FocusColor;
 }

 /************************************************************************************************
@@ -212,63 +218,87 @@
@ToggleWidth: 180px;

 .toggleSwitch() {
-    max-width: 100%;
-    margin-bottom: @SmallSpace;
-    padding: @SmallSpace;
-    cursor: pointer;
-    color: @BaseHigh;
-    font-weight: 400;
-    font-size: @mediumFontSize;
-    font-family: @DataExplorerFont;
+  max-width: 100%;
+  margin-bottom: @SmallSpace;
+  padding: @SmallSpace;
+  cursor: pointer;
+  color: @BaseHigh;
+  font-weight: 400;
+  font-size: @mediumFontSize;
+  font-family: @DataExplorerFont;
 }

 .selectedToggle() {
-    border-bottom: 2px solid @BaseHigh;
+  border-bottom: 2px solid @BaseHigh;
 }

 .unselectedToggle() {
-    color: @AccentMediumHigh;
+  color: @AccentMediumHigh;
 }

 /********************************************************************************************************
                             Common Data Explorer Icons
 *********************************************************************************************************/
 .dataExplorerIcons() {
-    cursor: pointer;
-    width: @ImgWidth;
-    height: @ImgHeight;
+  cursor: pointer;
+  width: @ImgWidth;
+  height: @ImgHeight;
 }

 /*********************************************************************************************************
                            Info Tooltip
 **********************************************************************************************************/
 .infoTooltip() {
-    position: relative;
-    display: inline-block;
+  position: relative;
+  display: inline-block;
 }

 .tooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
-    visibility: hidden;
-    background-color: @backgroundColor;
-    color: @textColor;
-    position: absolute;
-    z-index: 1;
-    left: @MediumSpace;
-    padding: @MediumSpace;
+  visibility: hidden;
+  background-color: @backgroundColor;
+  color: @textColor;
+  position: absolute;
+  z-index: 1;
+  left: @MediumSpace;
+  padding: @MediumSpace;
 }

 .tooltipTextAfter(@color: @BaseDark) {
-    content: "";
-    position: absolute;
-    right: 100%;
-    border-style: solid;
-    border-color: transparent @color transparent transparent;
-    left: 0px;
-    width: 0;
-    height: 0;
-    border-color: @InfoPointerColor transparent;
+  content: "";
+  position: absolute;
+  right: 100%;
+  border-style: solid;
+  border-color: transparent @color transparent transparent;
+  left: 0px;
+  width: 0;
+  height: 0;
+  border-color: @InfoPointerColor transparent;
 }

 .tooltipVisible() {
-    visibility: visible;
+  visibility: visible;
+}
+
+.inputTooltip() {
+  position: relative;
+}
+
+.inputTooltipText(@textColor: @BaseLight, @backgroundColor: @BaseHigh) {
+  background-color: @backgroundColor;
+  color: @textColor;
+  position: absolute;
+  z-index: 1;
+  padding: @MediumSpace;
+}
+
+.inputTooltipTextAfter(@color: @BaseDark) {
+  content: "";
+  position: absolute;
+  right: 100%;
+  border-style: solid;
+  border-color: transparent @color transparent transparent;
+  left: 10px;
+  width: 0;
+  height: 0;
+  border-color: @InfoPointerColor transparent;
 }
--- 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;

@@ -1523,6 +1523,21 @@ p {
  .tooltipVisible();
 }

+.inputTooltip {
+  .inputTooltip();
+}
+
+.inputTooltip .inputTooltipText {
+  top: -68px;
+  .inputTooltipText();
+}
+
+.inputTooltip .inputTooltipText::after {
+  border-width: @MediumSpace @MediumSpace 0 @MediumSpace;
+  top: 55px;
+  .inputTooltipTextAfter();
+}
+
 .infoTooltip a {
  color: @AccentHigh;
 }
@@ -1694,6 +1709,7 @@ input::-webkit-calendar-picker-indicator {
  display: flex;
  flex-direction: column;
  height: 100%;
+  max-height: 100vh;
 }

 .contextual-pane .paneErrorDetailsContainer {
@@ -2083,7 +2099,7 @@ a:link {
  display: flex;
  flex: 1 1 auto;
  overflow-x: auto;
-  overflow-y: hidden;
+  overflow-y: auto;
  height: 100%;
 }

@@ -3027,3 +3043,45 @@ settings-pane {
 .collapsibleSection :hover {
  cursor: pointer;
 }
+
+.messageBarInfoIcon {
+  color: @InfoIconColor;
+}
+
+.messageBarWarningIcon {
+  color: @WarningIconColor;
+}
+
+.freeTierInfoBanner {
+  background-color: @BaseLow;
+  display: inline-flex;
+  padding: @DefaultSpace;
+  width: 100%;
+
+  .freeTierInfoIcon img {
+    height: 28px;
+    width: 28px;
+    margin-left: 4px;
+  }
+
+  .freeTierInfoMessage {
+    margin: auto 0;
+    padding-left: @MediumSpace;
+  }
+}
+
+.freeTierInlineWarning {
+  display: inline-flex;
+  padding: 8px 8px 8px 0;
+  width: 100%;
+
+  .freeTierWarningIcon img {
+    height: 20px;
+    width: 20px;
+  }
+
+  .freeTierWarningMessage {
+    margin: auto 0;
+    padding-left: @SmallSpace;
+  }
+}
--- a/less/hostedexplorer.less
+++ b/less/hostedexplorer.less
@@ -13,6 +13,11 @@
@NavMediumSpace: 10px;
@NavLargeSpace: 15px;

+.skip-link {
+    position: fixed;
+    top: -200px;
+}
+
 html {
    font-family: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
    padding: 0px;
--- a/less/tree.less
+++ b/less/tree.less
@@ -1,20 +1,12 @@
@import "./Common/Constants";

-.main {
-    width: 100%;
-    float: left;
-    transition: all .0s ease-in-out;
-    -ms-transition: all 0s ease-in-out;
-    -webkit-transition: all 0s ease-in-out;
-    -moz-transition: all .0s ease-in-out;
-    height: 100%;
-    background-color: white;
-    border-left: 0px solid white;
-}

 .resourceTree {
    height: 100%;
    flex: 0 0 auto;
+    .main {
+        height: 100%;
+    }
 }

 .resourceTreeScroll {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -7,13 +7,14 @@
    "@azure/arm-cosmosdb": "9.1.0",
    "@azure/cosmos": "3.9.0",
    "@azure/cosmos-language-service": "0.0.5",
-    "@azure/identity": "1.1.0",
-    "@azure/msal-browser": "2.8.0",
-    "@azure/msal-react": "1.0.0-alpha.1",
-    "@jupyterlab/services": "6.0.0-rc.2",
-    "@jupyterlab/terminal": "3.0.0-rc.2",
+    "@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.5.9",
-    "@nteract/commutable": "7.3.2",
+    "@nteract/commutable": "7.4.2",
    "@nteract/connected-components": "6.8.2",
    "@nteract/core": "15.1.0",
    "@nteract/data-explorer": "8.0.3",
@@ -38,16 +39,17 @@
    "@nteract/transform-vega": "7.0.6",
    "@octokit/rest": "17.9.2",
    "@phosphor/widgets": "1.9.3",
+    "@testing-library/jest-dom": "5.11.9",
    "@types/mkdirp": "1.0.1",
    "@types/node-fetch": "2.5.7",
    "@uifabric/react-cards": "0.109.110",
+    "@uifabric/react-hooks": "7.14.0",
    "@uifabric/styling": "7.13.7",
-    "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",
+    "clipboard-copy": "4.0.1",
    "copy-webpack-plugin": "6.0.2",
    "crossroads": "0.12.2",
    "css-element-queries": "1.1.1",
@@ -57,12 +59,13 @@
    "date-fns": "1.29.0",
    "dayjs": "1.8.19",
    "dotenv": "8.2.0",
-    "es6-object-assign": "1.1.0",
-    "es6-symbol": "3.1.3",
    "eslint-plugin-jest": "23.13.2",
    "eslint-plugin-react": "7.20.0",
    "hasher": "1.2.0",
    "html2canvas": "1.0.0-rc.5",
+    "i18next": "19.8.4",
+    "i18next-browser-languagedetector": "6.0.1",
+    "i18next-http-backend": "1.0.23",
    "immutable": "4.0.0-rc.12",
    "is-ci": "2.0.0",
    "jquery": "3.5.1",
@@ -71,65 +74,60 @@
    "knockout": "3.5.1",
    "mkdirp": "1.0.4",
    "monaco-editor": "0.18.1",
+    "ms": "2.1.3",
    "msal": "1.4.4",
-    "object.entries": "1.1.0",
-    "office-ui-fabric-react": "7.134.1",
+    "office-ui-fabric-react": "7.164.2",
    "p-retry": "4.2.0",
    "plotly.js-cartesian-dist-min": "1.52.3",
-    "promise-polyfill": "8.1.0",
-    "promise.prototype.finally": "3.1.0",
    "q": "1.5.1",
    "react": "16.13.1",
    "react-animate-height": "2.0.8",
    "react-dnd": "9.4.0",
    "react-dnd-html5-backend": "9.4.0",
-    "react-dom": "16.9.0",
+    "react-dom": "16.13.1",
    "react-hotkeys": "2.0.0",
+    "react-i18next": "11.8.5",
    "react-notification-system": "0.2.17",
-    "react-query": "3.5.5",
    "react-redux": "7.1.3",
    "redux": "4.0.4",
+    "reflect-metadata": "0.1.13",
    "rx-jupyter": "5.5.12",
    "rxjs": "6.6.3",
    "styled-components": "4.3.2",
-    "text-encoding": "0.7.0",
+    "swr": "0.4.0",
+    "terser-webpack-plugin": "3.1.0",
    "underscore": "1.9.1",
-    "url-polyfill": "1.1.7",
-    "utility-types": "3.10.0",
-    "webcrypto-liner": "1.1.4",
-    "webfontloader": "1.6.28",
-    "whatwg-fetch": "3.0.0"
+    "utility-types": "3.10.0"
  },
  "devDependencies": {
    "@babel/core": "7.9.0",
    "@babel/preset-env": "7.9.0",
    "@babel/preset-react": "7.9.4",
    "@babel/preset-typescript": "7.9.0",
+    "@testing-library/react": "11.2.3",
    "@types/applicationinsights-js": "1.0.7",
    "@types/codemirror": "0.0.56",
    "@types/crossroads": "0.0.30",
    "@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/expect-puppeteer": "4.4.5",
    "@types/hasher": "0.0.31",
-    "@types/jest": "23.3.10",
-    "@types/jest-environment-puppeteer": "4.3.2",
+    "@types/jest": "26.0.20",
+    "@types/jest-environment-puppeteer": "4.4.1",
    "@types/memoize-one": "4.1.1",
    "@types/node": "12.11.1",
    "@types/promise.prototype.finally": "2.0.3",
    "@types/prop-types": "15.5.8",
-    "@types/puppeteer": "3.0.1",
+    "@types/puppeteer": "5.4.3",
    "@types/q": "1.5.1",
-    "@types/react": "16.9.56",
-    "@types/react-dom": "16.0.7",
+    "@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/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",
@@ -146,13 +144,14 @@
    "eslint-cli": "1.1.1",
    "eslint-plugin-no-null": "1.0.2",
    "eslint-plugin-prefer-arrow": "1.2.2",
+    "eslint-plugin-react-hooks": "4.2.0",
    "expose-loader": "0.7.5",
+    "fast-glob": "3.2.5",
    "file-loader": "2.0.0",
    "fs-extra": "7.0.0",
    "html-loader": "0.5.5",
    "html-loader-jest": "0.2.1",
    "html-webpack-plugin": "3.2.0",
-    "inline-css": "2.2.5",
    "jest": "25.5.4",
    "jest-canvas-mock": "2.1.0",
    "jest-puppeteer": "4.4.0",
@@ -163,13 +162,12 @@
    "mini-css-extract-plugin": "0.4.3",
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
-    "prettier": "1.19.1",
-    "puppeteer": "4.0.0",
+    "prettier": "2.2.1",
+    "puppeteer": "8.0.0",
    "raw-loader": "0.5.1",
    "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",
--- a/sampleData/gremlinSampleData.json
+++ b/sampleData/gremlinSampleData.json
@@ -3,6 +3,7 @@
  "offerThroughput": 400,
  "databaseLevelThroughput": false,
  "collectionId": "Persons",
+  "createNewDatabase": true,
  "partitionKey": { "kind": "Hash", "paths": ["/name"] },
  "data": [
    "g.addV('person').property(id, '1').property('name', 'Eva').property('age', 44)",
--- a/src/AuthType.ts
+++ b/src/AuthType.ts
@@ -3,5 +3,5 @@ export enum AuthType {
  EncryptedToken = "encryptedtoken",
  MasterKey = "masterkey",
  ResourceToken = "resourcetoken",
-  ConnectionString = "connectionstring"
+  ConnectionString = "connectionstring",
 }
--- a/src/Bindings/BindingHandlersRegisterer.ts
+++ b/src/Bindings/BindingHandlersRegisterer.ts
@@ -1,5 +1,6 @@
 import * as ko from "knockout";
 import * as ReactBindingHandler from "./ReactBindingHandler";
+import "../Explorer/Tables/DataTable/DataTableBindingManager";

 export class BindingHandlersRegisterer {
  public static registerBindingHandlers() {
@@ -13,7 +14,7 @@ export class BindingHandlersRegisterer {
      ) {
        const value = ko.unwrap(wrappedValueAccessor());
        bindingContext?.$data.isTemplateReady(value);
-      }
+      },
    } as ko.BindingHandler;

    ReactBindingHandler.Registerer.register();
--- a/src/Bindings/ReactBindingHandler.ts
+++ b/src/Bindings/ReactBindingHandler.ts
@@ -42,7 +42,7 @@ export class Registerer {

        // Initial rendering at mount point
        ReactDOM.render(adapter.renderComponent(), element);
-      }
+      },
    } as ko.BindingHandler;
  }
 }
--- a/src/Common/ArrayHashMap.ts
+++ b/src/Common/ArrayHashMap.ts
@@ -40,7 +40,7 @@ export class ArrayHashMap<T> {
  public forEach(key: string, iteratorFct: (value: T) => void) {
    const values = this.store.get(key);
    if (values) {
-      values.forEach(value => iteratorFct(value));
+      values.forEach((value) => iteratorFct(value));
    }
  }

--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -1,10 +1,3 @@
-import { HashMap } from "./HashMap";
-
-export class AuthorizationEndpoints {
-  public static arm: string = "https://management.core.windows.net/";
-  public static common: string = "https://login.windows.net/";
-}
-
 export class CodeOfConductEndpoints {
  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
@@ -14,7 +7,7 @@ export class CodeOfConductEndpoints {
 export class EndpointsRegex {
  public static readonly cassandra = [
    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com"
+    "HostName=(.*).cassandra.cosmos.azure.com",
  ];
  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
@@ -105,33 +98,12 @@ 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 enableGalleryPublish = "enablegallerypublish";
-  public static readonly enableLinkInjection = "enablelinkinjection";
-  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";
-}
-
 // flight names returned from the portal are always lowercase
 export class Flights {
  public static readonly SettingsV2 = "settingsv2";
  public static readonly MongoIndexEditor = "mongoindexeditor";
+  public static readonly MongoIndexing = "mongoindexing";
+  public static readonly AutoscaleTest = "autoscaletest";
 }

 export class AfecFeatures {
@@ -140,19 +112,6 @@ export class AfecFeatures {
  public static readonly StorageAnalytics = "storageanalytics-public-preview";
 }

-export class Spark {
-  public static readonly MaxWorkerCount = 10;
-  public static readonly SKUs: HashMap<string> = new HashMap({
-    "Cosmos.Spark.D1s": "D1s / 1 core / 4GB RAM",
-    "Cosmos.Spark.D2s": "D2s / 2 cores / 8GB RAM",
-    "Cosmos.Spark.D4s": "D4s / 4 cores / 16GB RAM",
-    "Cosmos.Spark.D8s": "D8s / 8 cores / 32GB RAM",
-    "Cosmos.Spark.D16s": "D16s / 16 cores / 64GB RAM",
-    "Cosmos.Spark.D32s": "D32s / 32 cores / 128GB RAM",
-    "Cosmos.Spark.D64s": "D64s / 64 cores / 256GB RAM"
-  });
-}
-
 export class TagNames {
  public static defaultExperience: string = "defaultExperience";
 }
@@ -164,7 +123,7 @@ export class MongoDBAccounts {

 export enum MongoBackendEndpointType {
  local,
-  remote
+  remote,
 }

 // TODO: 435619 Add default endpoints per cloud and use regional only when available
@@ -291,7 +250,7 @@ export class HttpStatusCodes {
    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
    HttpStatusCodes.BadGateway,
    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.GatewayTimeout
+    HttpStatusCodes.GatewayTimeout,
  ];
 }

@@ -347,10 +306,7 @@ export class HashRoutePrefixes {
  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);

-    return transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{doc_id}", docId)
-      .replace("/", ""); // strip the first slash since hasher adds it
+    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("{doc_id}", docId).replace("/", ""); // strip the first slash since hasher adds it
  }
 }

@@ -396,7 +352,7 @@ export class OfferVersions {
 export enum ConflictOperationType {
  Replace = "replace",
  Create = "create",
-  Delete = "delete"
+  Delete = "delete",
 }

 export const EmulatorMasterKey =
--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -10,17 +10,17 @@ describe("tokenProvider", () => {
    resourceId: "",
    resourceType: "dbs" as ResourceType,
    headers: {},
-    getAuthorizationTokenUsingMasterKey: () => ""
+    getAuthorizationTokenUsingMasterKey: () => "",
  };

  beforeEach(() => {
    updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
    });
    window.fetch = jest.fn().mockImplementation(() => {
      return {
        json: () => "{}",
-        headers: new Map()
+        headers: new Map(),
      };
    });
  });
@@ -36,7 +36,7 @@ describe("tokenProvider", () => {

  it("does not call the auth service if a master key is set", async () => {
    updateUserContext({
-      masterKey: "foo"
+      masterKey: "foo",
    });
    await tokenProvider(options);
    expect((window.fetch as any).mock.calls.length).toBe(0);
@@ -50,7 +50,7 @@ describe("getTokenFromAuthService", () => {
    window.fetch = jest.fn().mockImplementation(() => {
      return {
        json: () => "{}",
-        headers: new Map()
+        headers: new Map(),
      };
    });
  });
@@ -61,7 +61,7 @@ describe("getTokenFromAuthService", () => {

  it("builds the correct URL in production", () => {
    updateConfigContext({
-      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+      BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
    });
    getTokenFromAuthService("GET", "dbs", "foo");
    expect(window.fetch).toHaveBeenCalledWith(
@@ -72,7 +72,7 @@ describe("getTokenFromAuthService", () => {

  it("builds the correct URL in dev", () => {
    updateConfigContext({
-      BACKEND_ENDPOINT: "https://localhost:1234"
+      BACKEND_ENDPOINT: "https://localhost:1234",
    });
    getTokenFromAuthService("GET", "dbs", "foo");
    expect(window.fetch).toHaveBeenCalledWith(
@@ -96,15 +96,15 @@ describe("endpoint", () => {
          documentEndpoint: "bar",
          gremlinEndpoint: "foo",
          tableEndpoint: "foo",
-          cassandraEndpoint: "foo"
-        }
-      }
+          cassandraEndpoint: "foo",
+        },
+      },
    });
    expect(endpoint()).toEqual("bar");
  });
  it("uses _endpoint if set", () => {
    updateUserContext({
-      endpoint: "baz"
+      endpoint: "baz",
    });
    expect(endpoint()).toEqual("baz");
  });
@@ -121,7 +121,7 @@ describe("requestPlugin", () => {
      updateConfigContext({
        platform: Platform.Hosted,
        BACKEND_ENDPOINT: "https://localhost:1234",
-        PROXY_PATH: "/proxy"
+        PROXY_PATH: "/proxy",
      });
      const headers = {};
      const endpoint = "https://docs.azure.com";
--- 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 { getErrorMessage } from "./ErrorHandlingUtils";
+import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { EmulatorMasterKey, HttpHeaders } from "./Constants";
-import { userContext } from "../UserContext";
+import { getErrorMessage } from "./ErrorHandlingUtils";

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

@@ -58,13 +58,13 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
      method: "POST",
      headers: {
        "content-type": "application/json",
-        "x-ms-encrypted-auth-token": userContext.accessToken
+        "x-ms-encrypted-auth-token": userContext.accessToken,
      },
      body: JSON.stringify({
        verb,
        resourceType,
-        resourceId
-      })
+        resourceId,
+      }),
    });
    //TODO I am not sure why we have to parse the JSON again here. fetch should do it for us when we call .json()
    const result = JSON.parse(await response.json());
@@ -77,13 +77,13 @@ export async function getTokenFromAuthService(verb: string, resourceType: string

 export function client(): Cosmos.CosmosClient {
  const options: Cosmos.CosmosClientOptions = {
-    endpoint: endpoint() || " ", // CosmosClient gets upset if we pass a falsy value here
+    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
    key: userContext.masterKey,
    tokenProvider,
    connectionPolicy: {
-      enableEndpointDiscovery: false
+      enableEndpointDiscovery: false,
    },
-    userAgentSuffix: "Azure Portal"
+    userAgentSuffix: "Azure Portal",
  };

  if (configContext.PROXY_PATH !== undefined) {
--- a/src/Common/EditableUtility.ts
+++ b/src/Common/EditableUtility.ts
@@ -73,7 +73,7 @@ export default class EditableUtility {
      return false;
    });

-    observable.subscribe(edit => {
+    observable.subscribe((edit) => {
      var edits = observable.edits && observable.edits();
      if (!edits) {
        return;
@@ -83,9 +83,9 @@ export default class EditableUtility {
    });

    observable.editableIsValid = ko.observable<boolean>(true);
-    observable.subscribe(value => {
+    observable.subscribe((value) => {
      const validations: ((value: T) => boolean)[] = (observable.validations && observable.validations()) || [];
-      const isValid = validations.every(validate => validate(value));
+      const isValid = validations.every((validate) => validate(value));
      observable.editableIsValid(isValid);
    });

--- a/src/Common/ErrorHandlingUtils.ts
+++ b/src/Common/ErrorHandlingUtils.ts
@@ -1,8 +1,9 @@
-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";

@@ -21,7 +22,7 @@ export const handleError = (error: string | ARMError | Error, area: string, cons
  sendNotificationForError(errorMessage, errorCode);
 };

-export const getErrorMessage = (error: string | Error): string => {
+export const getErrorMessage = (error: string | Error = ""): string => {
  const errorMessage = typeof error === "string" ? error : error.message;
  return replaceKnownError(errorMessage);
 };
@@ -37,18 +38,18 @@ const sendNotificationForError = (errorMessage: string, errorCode: number | stri
    }
    sendMessage({
      type: MessageTypes.ForbiddenError,
-      reason: errorMessage
+      reason: errorMessage,
    });
  }
 };

 const replaceKnownError = (errorMessage: string): string => {
  if (
-    window.dataExplorer?.subscriptionType() === SubscriptionType.Internal &&
-    errorMessage.indexOf("SharedOffer is Disabled for your account") >= 0
+    userContext.subscriptionType === SubscriptionType.Internal &&
+    errorMessage?.indexOf("SharedOffer is Disabled for your account") >= 0
  ) {
    return "Database throughput is not supported for internal subscriptions.";
-  } else if (errorMessage.indexOf("Partition key paths must contain only valid") >= 0) {
+  } else if (errorMessage?.indexOf("Partition key paths must contain only valid") >= 0) {
    return "Partition key paths must contain only valid characters and not contain a trailing slash or wildcard character.";
  }

--- a/src/Common/HeadersUtility.ts
+++ b/src/Common/HeadersUtility.ts
@@ -1,28 +1,5 @@
-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.test.ts
+++ b/src/Common/IteratorUtilities.test.ts
@@ -11,8 +11,8 @@ describe("nextPage", () => {
          queryMetrics: {},
          requestCharge: 1,
          headers: {},
-          activityId: "foo"
-        })
+          activityId: "foo",
+        }),
    };

    expect(await nextPage(fakeIterator, 10)).toMatchSnapshot();
--- a/src/Common/IteratorUtilities.ts
+++ b/src/Common/IteratorUtilities.ts
@@ -1,6 +1,8 @@
 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;
@@ -14,8 +16,9 @@ export interface MinimalQueryIterator {
 // Pick<QueryIterator<any>, "fetchNext">;

 export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex: number): Promise<QueryResults> {
-  return documentsIterator.fetchNext().then(response => {
+  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 {
@@ -26,7 +29,7 @@ export function nextPage(documentsIterator: MinimalQueryIterator, firstItemIndex
      lastItemIndex: Number(firstItemIndex) + Number(itemCount),
      headers,
      activityId: response.activityId,
-      requestCharge: response.requestCharge
+      requestCharge: response.requestCharge,
    };
  });
 }
--- a/src/Common/Logger.ts
+++ b/src/Common/Logger.ts
@@ -29,7 +29,7 @@ export function logError(errorMessage: string, area: string, code?: number | str
 function _logEntry(entry: Diagnostics.LogEntry): void {
  sendMessage({
    type: MessageTypes.LogInfo,
-    data: JSON.stringify(entry)
+    data: JSON.stringify(entry),
  });

  const severityLevel = ((level: Diagnostics.LogEntryLevel): SeverityLevel => {
@@ -60,6 +60,6 @@ function _generateLogEntry(
    level,
    message,
    area,
-    code
+    code,
  };
 }
--- a/src/Common/MessageHandler.test.ts
+++ b/src/Common/MessageHandler.test.ts
@@ -6,7 +6,7 @@ describe("Message Handler", () => {
    let mockPromise = {
      id: "123",
      startTime: new Date(),
-      deferred: Q.defer<any>()
+      deferred: Q.defer<any>(),
    };
    let mockMessage = { message: { id: "123", data: "{}" } };
    MessageHandler.RequestMap[mockPromise.id] = mockPromise;
@@ -18,7 +18,7 @@ describe("Message Handler", () => {
    let message = {
      id: "123",
      startTime: new Date(),
-      deferred: Q.defer<any>()
+      deferred: Q.defer<any>(),
    };

    MessageHandler.handleCachedDataMessage(message);
--- 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 * as Constants from "./Constants";
+import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { getDataExplorerWindow } from "../Utils/WindowUtils";
+import * as Constants from "./Constants";

 export interface CachedDataPromise<T> {
  deferred: Q.Deferred<T>;
@@ -35,7 +35,7 @@ export function sendCachedDataMessage<TResponseDataModel>(
  let cachedDataPromise: CachedDataPromise<TResponseDataModel> = {
    deferred: Q.defer<TResponseDataModel>(),
    startTime: new Date(),
-    id: _.uniqueId()
+    id: _.uniqueId(),
  };
  RequestMap[cachedDataPromise.id] = cachedDataPromise;
  sendMessage({ type: messageType, params: params, id: cachedDataPromise.id });
@@ -54,7 +54,22 @@ export function sendMessage(data: any): void {
    portalChildWindow.parent.postMessage(
      {
        signature: "pcIframe",
-        data: data
+        data: data,
+      },
+      portalChildWindow.document.referrer
+    );
+  }
+}
+
+export function sendReadyMessage(): void {
+  if (canSendMessage()) {
+    // We try to find data explorer window first, then fallback to current window
+    const portalChildWindow = getDataExplorerWindow(window) || window;
+    portalChildWindow.parent.postMessage(
+      {
+        signature: "pcIframe",
+        kind: "ready",
+        data: "ready",
      },
      portalChildWindow.document.referrer
    );
--- a/src/Common/MongoProxyClient.test.ts
+++ b/src/Common/MongoProxyClient.test.ts
@@ -14,7 +14,7 @@ const fetchMock = () => {
    ok: true,
    text: () => "{}",
    json: () => "{}",
-    headers: new Map()
+    headers: new Map(),
  });
 };

@@ -27,8 +27,8 @@ const collection = {
  partitionKey: {
    paths: ["/pk"],
    kind: "Hash",
-    version: 1
-  }
+    version: 1,
+  },
 } as Collection;

 const documentId = ({
@@ -38,8 +38,8 @@ const documentId = ({
  partitionKey: {
    paths: ["/pk"],
    kind: "Hash",
-    version: 1
-  }
+    version: 1,
+  },
 } as unknown) as DocumentId;

 const databaseAccount = {
@@ -52,8 +52,8 @@ const databaseAccount = {
    documentEndpoint: "bar",
    gremlinEndpoint: "foo",
    tableEndpoint: "foo",
-    cassandraEndpoint: "foo"
-  }
+    cassandraEndpoint: "foo",
+  },
 } as DatabaseAccount;

 describe("MongoProxyClient", () => {
@@ -61,10 +61,10 @@ describe("MongoProxyClient", () => {
    beforeEach(() => {
      resetConfigContext();
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
      window.fetch = jest.fn().mockImplementation(fetchMock);
    });
@@ -93,10 +93,10 @@ describe("MongoProxyClient", () => {
    beforeEach(() => {
      resetConfigContext();
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
      window.fetch = jest.fn().mockImplementation(fetchMock);
    });
@@ -125,10 +125,10 @@ describe("MongoProxyClient", () => {
    beforeEach(() => {
      resetConfigContext();
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
      window.fetch = jest.fn().mockImplementation(fetchMock);
    });
@@ -157,10 +157,10 @@ describe("MongoProxyClient", () => {
    beforeEach(() => {
      resetConfigContext();
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
      window.fetch = jest.fn().mockImplementation(fetchMock);
    });
@@ -189,10 +189,10 @@ describe("MongoProxyClient", () => {
    beforeEach(() => {
      resetConfigContext();
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
      window.fetch = jest.fn().mockImplementation(fetchMock);
    });
@@ -220,12 +220,11 @@ describe("MongoProxyClient", () => {
  describe("getEndpoint", () => {
    beforeEach(() => {
      resetConfigContext();
-      delete window.authType;
      updateUserContext({
-        databaseAccount
+        databaseAccount,
      });
      updateConfigContext({
-        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com"
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
      });
    });

@@ -241,7 +240,9 @@ describe("MongoProxyClient", () => {
    });

    it("returns a guest endpoint", () => {
-      window.authType = AuthType.EncryptedToken;
+      updateUserContext({
+        authType: AuthType.EncryptedToken,
+      });
      const endpoint = getEndpoint();
      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
    });
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -16,11 +16,11 @@ import { sendMessage } from "./MessageHandler";
 const defaultHeaders = {
  [HttpHeaders.apiType]: ApiType.MongoDB.toString(),
  [CosmosSDKConstants.HttpHeaders.MaxEntityCount]: "100",
-  [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15"
+  [CosmosSDKConstants.HttpHeaders.Version]: "2017-11-15",
 };

 function authHeaders() {
-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
    return { [HttpHeaders.guestAccessToken]: userContext.accessToken };
  } else {
    return { [HttpHeaders.authorization]: userContext.authorizationToken };
@@ -31,7 +31,7 @@ export function queryIterator(databaseId: string, collection: Collection, query:
  let continuationToken: string;
  return {
    fetchNext: () => {
-      return queryDocuments(databaseId, collection, false, query).then(response => {
+      return queryDocuments(databaseId, collection, false, query).then((response) => {
        continuationToken = response.continuationToken;
        const headers: { [key: string]: string | number } = {};
        response.headers.forEach((value, key) => {
@@ -42,10 +42,10 @@ export function queryIterator(databaseId: string, collection: Collection, query:
          headers,
          requestCharge: Number(headers[CosmosSDKConstants.HttpHeaders.RequestCharge]),
          activityId: String(headers[CosmosSDKConstants.HttpHeaders.ActivityId]),
-          hasMoreResults: !!continuationToken
+          hasMoreResults: !!continuationToken,
        };
      });
-    }
+    },
  };
 }

@@ -74,7 +74,9 @@ export function queryDocuments(
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
    pk:
-      collection && collection.partitionKey && !collection.partitionKey.systemKey ? collection.partitionKeyProperty : ""
+      collection && collection.partitionKey && !collection.partitionKey.systemKey
+        ? collection.partitionKeyProperty
+        : "",
  };

  const endpoint = getEndpoint() || "";
@@ -87,7 +89,7 @@ export function queryDocuments(
    [CosmosSDKConstants.HttpHeaders.EnableScanInQuery]: "true",
    [CosmosSDKConstants.HttpHeaders.EnableCrossPartitionQuery]: "true",
    [CosmosSDKConstants.HttpHeaders.ParallelizeCrossPartitionQuery]: "true",
-    [HttpHeaders.contentType]: "application/query+json"
+    [HttpHeaders.contentType]: "application/query+json",
  };

  if (continuationToken) {
@@ -100,14 +102,14 @@ export function queryDocuments(
    .fetch(`${endpoint}${path}?${queryString.stringify(params)}`, {
      method: "POST",
      body: JSON.stringify({ query }),
-      headers
+      headers,
    })
-    .then(async response => {
+    .then(async (response) => {
      if (response.ok) {
        return {
          continuationToken: response.headers.get(CosmosSDKConstants.HttpHeaders.Continuation),
          documents: (await response.json()).Documents as DataModels.DocumentId[],
-          headers: response.headers
+          headers: response.headers,
        };
      }
      errorHandling(response, "querying documents", params);
@@ -135,7 +137,9 @@ export function readDocument(
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
  };

  const endpoint = getEndpoint();
@@ -147,10 +151,10 @@ export function readDocument(
        ...authHeaders(),
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: encodeURIComponent(
          JSON.stringify(documentId.partitionKeyHeader())
-        )
-      }
+        ),
+      },
    })
-    .then(response => {
+    .then((response) => {
      if (response.ok) {
        return response.json();
      }
@@ -175,7 +179,7 @@ export function createDocument(
    sid: userContext.subscriptionId,
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
-    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : ""
+    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
  };

  const endpoint = getEndpoint();
@@ -186,10 +190,10 @@ export function createDocument(
      body: JSON.stringify(documentContent),
      headers: {
        ...defaultHeaders,
-        ...authHeaders()
-      }
+        ...authHeaders(),
+      },
    })
-    .then(response => {
+    .then((response) => {
      if (response.ok) {
        return response.json();
      }
@@ -218,7 +222,9 @@ export function updateDocument(
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
  };
  const endpoint = getEndpoint();

@@ -230,10 +236,10 @@ export function updateDocument(
        ...defaultHeaders,
        ...authHeaders(),
        [HttpHeaders.contentType]: "application/json",
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
-      }
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
+      },
    })
-    .then(response => {
+    .then((response) => {
      if (response.ok) {
        return response.json();
      }
@@ -257,7 +263,9 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
    pk:
-      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey ? documentId.partitionKeyProperty : ""
+      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
+        ? documentId.partitionKeyProperty
+        : "",
  };
  const endpoint = getEndpoint();

@@ -268,10 +276,10 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
        ...defaultHeaders,
        ...authHeaders(),
        [HttpHeaders.contentType]: "application/json",
-        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader())
-      }
+        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
+      },
    })
-    .then(response => {
+    .then((response) => {
      if (response.ok) {
        return undefined;
      }
@@ -299,7 +307,7 @@ export function createMongoCollectionWithProxy(
    rg: userContext.resourceGroup,
    dba: databaseAccount.name,
    isAutoPilot: !!params.autoPilotMaxThroughput,
-    autoPilotThroughput: params.autoPilotMaxThroughput?.toString()
+    autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
  };

  const endpoint = getEndpoint();
@@ -314,11 +322,11 @@ export function createMongoCollectionWithProxy(
        headers: {
          ...defaultHeaders,
          ...authHeaders(),
-          [HttpHeaders.contentType]: "application/json"
-        }
+          [HttpHeaders.contentType]: "application/json",
+        },
      }
    )
-    .then(response => {
+    .then((response) => {
      if (response.ok) {
        return response.json();
      }
@@ -329,7 +337,7 @@ export function createMongoCollectionWithProxy(
 export function getEndpoint(): string {
  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";

-  if (window.authType === AuthType.EncryptedToken) {
+  if (userContext.authType === AuthType.EncryptedToken) {
    url = url.replace("api/mongo", "api/guest/mongo");
  }
  return url;
--- a/src/Common/MongoUtility.ts
+++ b/src/Common/MongoUtility.ts
@@ -14,7 +14,7 @@
 */

 export default class MongoUtility {
-  public static tojson = function(x: any, indent: string, nolint: boolean) {
+  public static tojson = function (x: any, indent: string, nolint: boolean) {
    if (x === null || x === undefined) {
      return String(x);
    }
@@ -71,7 +71,7 @@ export default class MongoUtility {
    }
  };

-  private static tojsonObject = function(x: any, indent: string, nolint: boolean) {
+  private static tojsonObject = function (x: any, indent: string, nolint: boolean) {
    var lineEnding = nolint ? " " : "\n";
    var tabSpace = nolint ? "" : "\t";
    indent = indent || "";
@@ -114,7 +114,7 @@ export default class MongoUtility {
      }
    }
    // Add proper line endings, indents, and commas to each line
-    s += $.map(pairs, function(pair) {
+    s += $.map(pairs, function (pair) {
      return lineEnding + indent + pair;
    }).join(",");
    s += lineEnding;
@@ -124,7 +124,7 @@ export default class MongoUtility {
    return s + indent + "}";
  };

-  private static tojsonArray = function(a: any, indent: string, nolint: boolean) {
+  private static tojsonArray = function (a: any, indent: string, nolint: boolean) {
    if (a.length === 0) {
      return "[ ]";
    }
@@ -151,7 +151,7 @@ export default class MongoUtility {
    return s;
  };

-  private static hasDefinedProperty = function(obj: any, prop: string): boolean {
+  private static hasDefinedProperty = function (obj: any, prop: string): boolean {
    if (Object.getPrototypeOf === undefined || Object.getPrototypeOf(obj) === null) {
      return false;
    } else if (obj.hasOwnProperty(prop)) {
--- a/src/Common/OfferUtility.test.ts
+++ b/src/Common/OfferUtility.test.ts
@@ -9,14 +9,14 @@ describe("parseSDKOfferResponse", () => {
        offerThroughput: 500,
        collectionThroughputInfo: {
          minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
-        }
+          numPhysicalPartitions: 1,
+        },
      },
-      id: "test"
+      id: "test",
    } as SDKOfferDefinition;

    const mockResponse = {
-      resource: mockOfferDefinition
+      resource: mockOfferDefinition,
    } as OfferResponse;

    const expectedResult: Offer = {
@@ -25,7 +25,7 @@ describe("parseSDKOfferResponse", () => {
      minimumThroughput: 400,
      id: "test",
      offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
+      offerReplacePending: false,
    };

    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
@@ -37,17 +37,17 @@ describe("parseSDKOfferResponse", () => {
        offerThroughput: 400,
        collectionThroughputInfo: {
          minimumRUForCollection: 400,
-          numPhysicalPartitions: 1
+          numPhysicalPartitions: 1,
        },
        offerAutopilotSettings: {
-          maxThroughput: 5000
-        }
+          maxThroughput: 5000,
+        },
      },
-      id: "test"
+      id: "test",
    } as SDKOfferDefinition;

    const mockResponse = {
-      resource: mockOfferDefinition
+      resource: mockOfferDefinition,
    } as OfferResponse;

    const expectedResult: Offer = {
@@ -56,7 +56,7 @@ describe("parseSDKOfferResponse", () => {
      minimumThroughput: 400,
      id: "test",
      offerDefinition: mockOfferDefinition,
-      offerReplacePending: false
+      offerReplacePending: false,
    };

    expect(OfferUtility.parseSDKOfferResponse(mockResponse)).toEqual(expectedResult);
--- a/src/Common/OfferUtility.ts
+++ b/src/Common/OfferUtility.ts
@@ -2,8 +2,11 @@ import { Offer, SDKOfferDefinition } from "../Contracts/DataModels";
 import { OfferResponse } from "@azure/cosmos";
 import { HttpHeaders } from "./Constants";

-export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
-  const offerDefinition: SDKOfferDefinition = offerResponse?.resource;
+export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer | undefined => {
+  const offerDefinition: SDKOfferDefinition | undefined = offerResponse?.resource;
+  if (!offerDefinition) {
+    return undefined;
+  }
  const offerContent = offerDefinition.content;
  if (!offerContent) {
    return undefined;
@@ -12,14 +15,14 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
  const minimumThroughput = offerContent.collectionThroughputInfo?.minimumRUForCollection;
  const autopilotSettings = offerContent.offerAutopilotSettings;

-  if (autopilotSettings) {
+  if (autopilotSettings && autopilotSettings.maxThroughput && minimumThroughput) {
    return {
      id: offerDefinition.id,
      autoscaleMaxThroughput: autopilotSettings.maxThroughput,
      manualThroughput: undefined,
      minimumThroughput,
      offerDefinition,
-      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
+      offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
    };
  }

@@ -29,6 +32,6 @@ export const parseSDKOfferResponse = (offerResponse: OfferResponse): Offer => {
    manualThroughput: offerContent.offerThroughput,
    minimumThroughput,
    offerDefinition,
-    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true"
+    offerReplacePending: offerResponse.headers?.[HttpHeaders.offerReplacePending] === "true",
  };
 };
--- a/src/Common/PortalNotifications.ts
+++ b/src/Common/PortalNotifications.ts
@@ -30,7 +30,7 @@ export const fetchPortalNotifications = async (): Promise<DataModels.Notificatio
  const headers = { [authorizationHeader.header]: authorizationHeader.token };

  const response = await window.fetch(url, {
-    headers
+    headers,
  });

  if (!response.ok) {
--- 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 { QueryUtils } from "../Utils/QueryUtils";
+import * as QueryUtils from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { userContext } from "../UserContext";
 import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
@@ -20,7 +20,7 @@ export class QueriesClient {
  private static readonly PartitionKey: DataModels.PartitionKey = {
    paths: [`/${SavedQueries.PartitionKeyProperty}`],
    kind: BackendDefaults.partitionKeyKind,
-    version: BackendDefaults.partitionKeyVersion
+    version: BackendDefaults.partitionKeyVersion,
  };
  private static readonly FetchQuery: string = "SELECT * FROM c";
  private static readonly FetchMongoQuery: string = "{}";
@@ -40,7 +40,7 @@ export class QueriesClient {
      databaseId: SavedQueries.DatabaseName,
      partitionKey: QueriesClient.PartitionKey,
      offerThroughput: SavedQueries.OfferThroughput,
-      databaseLevelThroughput: false
+      databaseLevelThroughput: false,
    })
      .then(
        (collection: DataModels.Collection) => {
@@ -120,7 +120,7 @@ export class QueriesClient {
              resourceId: resourceId,
              queryName: queryName,
              query: query,
-              id: id
+              id: id,
            };
            try {
              this.validateQuery(parsedQuery);
@@ -161,7 +161,7 @@ export class QueriesClient {
    const documentId = new DocumentId(
      {
        partitionKey: QueriesClient.PartitionKey,
-        partitionKeyProperty: "id"
+        partitionKeyProperty: "id",
      } as DocumentsTab,
      query,
      query.queryName
--- a/src/Common/Splitter.ts
+++ b/src/Common/Splitter.ts
@@ -4,7 +4,7 @@ import { SplitterMetrics } from "./Constants";

 export enum SplitterDirection {
  Horizontal = "horizontal",
-  Vertical = "vertical"
+  Vertical = "vertical",
 }

 export interface SplitterBounds {
@@ -23,10 +23,10 @@ export class Splitter {
  public splitterId: string;
  public leftSideId: string;

-  public splitter: HTMLElement;
-  public leftSide: HTMLElement;
-  public lastX: number;
-  public lastWidth: number;
+  public splitter!: HTMLElement;
+  public leftSide!: HTMLElement;
+  public lastX!: number;
+  public lastWidth!: number;

  private isCollapsed: ko.Observable<boolean>;
  private bounds: SplitterBounds;
@@ -42,15 +42,16 @@ export class Splitter {
  }

  public initialize() {
-    this.splitter = document.getElementById(this.splitterId);
-    this.leftSide = document.getElementById(this.leftSideId);
-
+    if (document.getElementById(this.splitterId) !== null && document.getElementById(this.leftSideId) != null) {
+      this.splitter = <HTMLElement>document.getElementById(this.splitterId);
+      this.leftSide = <HTMLElement>document.getElementById(this.leftSideId);
+    }
    const isVerticalSplitter: boolean = this.direction === SplitterDirection.Vertical;
    const splitterOptions: JQueryUI.ResizableOptions = {
      animate: true,
      animateDuration: "fast",
      start: this.onResizeStart,
-      stop: this.onResizeStop
+      stop: this.onResizeStop,
    };

    if (isVerticalSplitter) {
@@ -90,9 +91,7 @@ export class Splitter {
    this.lastWidth = $(this.leftSide).width();
    $(this.splitter).css("left", SplitterMetrics.CollapsedPositionLeft);
    $(this.leftSide).css("width", "");
-    $(this.leftSide)
-      .resizable("option", "disabled", true)
-      .removeClass("ui-resizable-disabled"); // remove class so splitter is visible
+    $(this.leftSide).resizable("option", "disabled", true).removeClass("ui-resizable-disabled"); // remove class so splitter is visible
    $(this.splitter).removeClass("ui-resizable-e");
    this.isCollapsed(true);
  }
--- a/src/Common/ThemeUtility.ts
+++ b/src/Common/ThemeUtility.ts
@@ -2,18 +2,16 @@
 * Copyright (C) Microsoft Corporation. All rights reserved.
 *----------------------------------------------------------*/

-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";
-    }
+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";
  }
 }
--- a/src/Common/Tooltip/index.tsx
+++ b/src/Common/Tooltip/index.tsx
@@ -0,0 +1,24 @@
+import { useId } from "@uifabric/react-hooks";
+import { ITooltipHostStyles, TooltipHost } from "office-ui-fabric-react/lib/Tooltip";
+import * as React from "react";
+import InfoBubble from "../../../images/info-bubble.svg";
+
+const calloutProps = { gapSpace: 0 };
+const hostStyles: Partial<ITooltipHostStyles> = { root: { display: "inline-block" } };
+
+export interface TooltipProps {
+  children: string;
+}
+export const Tooltip: React.FunctionComponent = ({ children }: TooltipProps) => {
+  const tooltipId = useId("tooltip");
+
+  return children ? (
+    <span>
+      <TooltipHost content={children} id={tooltipId} calloutProps={calloutProps} styles={hostStyles}>
+        <img className="infoImg" src={InfoBubble} alt="More information" />
+      </TooltipHost>
+    </span>
+  ) : (
+    <></>
+  );
+};
--- a/src/Common/Upload/index.tsx
+++ b/src/Common/Upload/index.tsx
@@ -0,0 +1,75 @@
+import { Image, Stack, TextField } from "office-ui-fabric-react";
+import React, { ChangeEvent, FunctionComponent, KeyboardEvent, useRef, useState } from "react";
+import FolderIcon from "../../../images/folder_16x16.svg";
+import * as Constants from "../../Common/Constants";
+import { Tooltip } from "../Tooltip";
+
+interface UploadProps {
+  label: string;
+  accept?: string;
+  tooltip?: string;
+  multiple?: boolean;
+  tabIndex?: number;
+  onUpload: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const Upload: FunctionComponent<UploadProps> = ({
+  label,
+  accept,
+  tooltip,
+  multiple,
+  tabIndex,
+  ...props
+}: UploadProps) => {
+  const [selectedFilesTitle, setSelectedFilesTitle] = useState<string[]>([]);
+
+  const fileRef = useRef<HTMLInputElement>();
+
+  const onImportLinkKeyPress = (event: KeyboardEvent<HTMLAnchorElement>): void => {
+    if (event.keyCode === Constants.KeyCodes.Enter || event.keyCode === Constants.KeyCodes.Space) {
+      onImportLinkClick();
+    }
+  };
+
+  const onImportLinkClick = (): void => {
+    fileRef?.current?.click();
+  };
+
+  const onUpload = (event: ChangeEvent<HTMLInputElement>): void => {
+    const { files } = event.target;
+
+    const newFileList = [];
+    for (let i = 0; i < files.length; i++) {
+      newFileList.push(files.item(i).name);
+    }
+    if (newFileList) {
+      setSelectedFilesTitle(newFileList);
+      props.onUpload(event);
+    }
+  };
+  const title = label + " to upload";
+  return (
+    <div>
+      <span className="renewUploadItemsHeader">{label}</span>
+      <Tooltip>{tooltip}</Tooltip>
+      <Stack horizontal>
+        <TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />
+        <input
+          type="file"
+          id="importFileInput"
+          style={{ display: "none" }}
+          ref={fileRef}
+          accept={accept}
+          tabIndex={tabIndex}
+          multiple={multiple}
+          title="Upload Icon"
+          onChange={onUpload}
+          role="button"
+        />
+        <a href="#" id="fileImportLinkNotebook" onClick={onImportLinkClick} onKeyPress={onImportLinkKeyPress}>
+          <Image className="fileImportImg" src={FolderIcon} alt={title} title={title} />
+        </a>
+      </Stack>
+    </div>
+  );
+};
--- a/src/Common/UrlUtility.ts
+++ b/src/Common/UrlUtility.ts
@@ -1,55 +1,61 @@
-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;
-  }
+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;
 }
--- a/src/Common/dataAccess/createCollection.test.ts
+++ b/src/Common/dataAccess/createCollection.test.ts
@@ -14,38 +14,42 @@ describe("createCollection", () => {
    collectionId: "testContainer",
    databaseId: "testDatabase",
    databaseLevelThroughput: true,
-    offerThroughput: 400
+    offerThroughput: 400,
  };

  beforeAll(() => {
    updateUserContext({
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
    await createCollection(createCollectionParams);
    expect(armRequest).toHaveBeenCalled();
  });

  it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
    (client as jest.Mock).mockReturnValue({
      databases: {
        createIfNotExists: () => {
          return {
            database: {
              containers: {
-                create: () => ({})
-              }
-            }
+                create: () => ({}),
+              },
+            },
          };
-        }
-      }
+        },
+      },
    });
    await createCollection(createCollectionParams);
    expect(client).toHaveBeenCalled();
@@ -59,7 +63,7 @@ describe("createCollection", () => {
      collectionId: "testContainer",
      databaseId: "testDatabase",
      databaseLevelThroughput: false,
-      offerThroughput: 400
+      offerThroughput: 400,
    };
    expect(constructRpOptions(manualThroughputParams)).toEqual({ throughput: 400 });

@@ -69,12 +73,12 @@ describe("createCollection", () => {
      databaseId: "testDatabase",
      databaseLevelThroughput: false,
      offerThroughput: 400,
-      autoPilotMaxThroughput: 4000
+      autoPilotMaxThroughput: 4000,
    };
    expect(constructRpOptions(autoPilotThroughputParams)).toEqual({
      autoscaleSettings: {
-        maxThroughput: 4000
-      }
+        maxThroughput: 4000,
+      },
    });
  });
 });
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -11,15 +11,15 @@ import { createMongoCollectionWithProxy } from "../MongoProxyClient";
 import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
  createUpdateCassandraTable,
-  getCassandraTable
+  getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import {
  createUpdateMongoDBCollection,
-  getMongoDBCollection
+  getMongoDBCollection,
 } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
  createUpdateGremlinGraph,
-  getGremlinGraph
+  getGremlinGraph,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
@@ -35,13 +35,13 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
  );
  try {
    let collection: DataModels.Collection;
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
      if (params.createNewDatabase) {
        const createDatabaseParams: DataModels.CreateDatabaseParams = {
          autoPilotMaxThroughput: params.autoPilotMaxThroughput,
          databaseId: params.databaseId,
          databaseLevelThroughput: params.databaseLevelThroughput,
-          offerThroughput: params.offerThroughput
+          offerThroughput: params.offerThroughput,
        };
        await createDatabase(createDatabaseParams);
      }
@@ -100,7 +100,7 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr

  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.SqlContainerResource = {
-    id: params.collectionId
+    id: params.collectionId,
  };
  if (params.analyticalStorageTtl) {
    resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -118,8 +118,8 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr
  const rpPayload: ARMTypes.SqlDatabaseCreateUpdateParameters = {
    properties: {
      resource,
-      options
-    }
+      options,
+    },
  };

  const createResponse = await createUpdateSqlContainer(
@@ -154,7 +154,7 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):

  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.MongoDBCollectionResource = {
-    id: params.collectionId
+    id: params.collectionId,
  };
  if (params.analyticalStorageTtl) {
    resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -170,8 +170,8 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
  const rpPayload: ARMTypes.MongoDBCollectionCreateUpdateParameters = {
    properties: {
      resource,
-      options
-    }
+      options,
+    },
  };

  const createResponse = await createUpdateMongoDBCollection(
@@ -185,7 +185,7 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):

  if (params.createMongoWildcardIndex) {
    TelemetryProcessor.trace(Action.CreateMongoCollectionWithWildcardIndex, ActionModifiers.Mark, {
-      message: "Mongo Collection created with wildcard index on all fields."
+      message: "Mongo Collection created with wildcard index on all fields.",
    });
  }

@@ -212,7 +212,7 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):

  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.CassandraTableResource = {
-    id: params.collectionId
+    id: params.collectionId,
  };
  if (params.analyticalStorageTtl) {
    resource.analyticalStorageTtl = params.analyticalStorageTtl;
@@ -221,8 +221,8 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
  const rpPayload: ARMTypes.CassandraTableCreateUpdateParameters = {
    properties: {
      resource,
-      options
-    }
+      options,
+    },
  };

  const createResponse = await createUpdateCassandraTable(
@@ -256,7 +256,7 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D

  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.GremlinGraphResource = {
-    id: params.collectionId
+    id: params.collectionId,
  };

  if (params.indexingPolicy) {
@@ -272,8 +272,8 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
  const rpPayload: ARMTypes.GremlinGraphCreateUpdateParameters = {
    properties: {
      resource,
-      options
-    }
+      options,
+    },
  };

  const createResponse = await createUpdateGremlinGraph(
@@ -306,14 +306,14 @@ const createTable = async (params: DataModels.CreateCollectionParams): Promise<D

  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.TableResource = {
-    id: params.collectionId
+    id: params.collectionId,
  };

  const rpPayload: ARMTypes.TableCreateUpdateParameters = {
    properties: {
      resource,
-      options
-    }
+      options,
+    },
  };

  const createResponse = await createUpdateTable(
@@ -334,13 +334,13 @@ export const constructRpOptions = (params: DataModels.CreateDatabaseParams): ARM
  if (params.autoPilotMaxThroughput) {
    return {
      autoscaleSettings: {
-        maxThroughput: params.autoPilotMaxThroughput
-      }
+        maxThroughput: params.autoPilotMaxThroughput,
+      },
    };
  }

  return {
-    throughput: params.offerThroughput
+    throughput: params.offerThroughput,
  };
 };

@@ -350,7 +350,7 @@ const createCollectionWithSDK = async (params: DataModels.CreateCollectionParams
    partitionKey: params.partitionKey || undefined,
    indexingPolicy: params.indexingPolicy || undefined,
    uniqueKeyPolicy: params.uniqueKeyPolicy || undefined,
-    analyticalStorageTtl: params.analyticalStorageTtl
+    analyticalStorageTtl: params.analyticalStorageTtl,
  } as ContainerRequest; // TODO: remove cast when https://github.com/Azure/azure-cosmos-js/issues/423 is fixed
  const collectionOptions: RequestOptions = {};
  const createDatabaseBody: DatabaseRequest = { id: params.databaseId };
--- a/src/Common/dataAccess/createDatabase.ts
+++ b/src/Common/dataAccess/createDatabase.ts
@@ -8,21 +8,21 @@ import {
  GremlinDatabaseCreateUpdateParameters,
  MongoDBDatabaseCreateUpdateParameters,
  SqlDatabaseCreateUpdateParameters,
-  CreateUpdateOptions
+  CreateUpdateOptions,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
  createUpdateCassandraKeyspace,
-  getCassandraKeyspace
+  getCassandraKeyspace,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import {
  createUpdateMongoDBDatabase,
-  getMongoDBDatabase
+  getMongoDBDatabase,
 } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
  createUpdateGremlinDatabase,
-  getGremlinDatabase
+  getGremlinDatabase,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
@@ -34,7 +34,7 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
    if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
      throw new Error("Creating database resources is not allowed for tables accounts");
    }
-    const database: DataModels.Database = await (window.authType === AuthType.AAD && !userContext.useSDKOperations
+    const database: DataModels.Database = await (userContext.authType === AuthType.AAD && !userContext.useSDKOperations
      ? createDatabaseWithARM(params)
      : createDatabaseWithSDK(params));

@@ -85,10 +85,10 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
  const rpPayload: SqlDatabaseCreateUpdateParameters = {
    properties: {
      resource: {
-        id: params.databaseId
+        id: params.databaseId,
      },
-      options
-    }
+      options,
+    },
  };
  const createResponse = await createUpdateSqlDatabase(
    userContext.subscriptionId,
@@ -121,10 +121,10 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
  const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
    properties: {
      resource: {
-        id: params.databaseId
+        id: params.databaseId,
      },
-      options
-    }
+      options,
+    },
  };
  const createResponse = await createUpdateMongoDBDatabase(
    userContext.subscriptionId,
@@ -157,10 +157,10 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
  const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
    properties: {
      resource: {
-        id: params.databaseId
+        id: params.databaseId,
      },
-      options
-    }
+      options,
+    },
  };
  const createResponse = await createUpdateCassandraKeyspace(
    userContext.subscriptionId,
@@ -193,10 +193,10 @@ async function createGremlineDatabase(params: DataModels.CreateDatabaseParams):
  const rpPayload: GremlinDatabaseCreateUpdateParameters = {
    properties: {
      resource: {
-        id: params.databaseId
+        id: params.databaseId,
      },
-      options
-    }
+      options,
+    },
  };
  const createResponse = await createUpdateGremlinDatabase(
    userContext.subscriptionId,
@@ -231,12 +231,12 @@ function constructRpOptions(params: DataModels.CreateDatabaseParams): CreateUpda
  if (params.autoPilotMaxThroughput) {
    return {
      autoscaleSettings: {
-        maxThroughput: params.autoPilotMaxThroughput
-      }
+        maxThroughput: params.autoPilotMaxThroughput,
+      },
    };
  }

  return {
-    throughput: params.offerThroughput
+    throughput: params.offerThroughput,
  };
 }
--- a/src/Common/dataAccess/createStoredProcedure.ts
+++ b/src/Common/dataAccess/createStoredProcedure.ts
@@ -3,12 +3,12 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import {
  SqlStoredProcedureCreateUpdateParameters,
-  SqlStoredProcedureResource
+  SqlStoredProcedureResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import {
  createUpdateSqlStoredProcedure,
-  getSqlStoredProcedure
+  getSqlStoredProcedure,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -22,7 +22,7 @@ export async function createStoredProcedure(
  const clearMessage = logConsoleProgress(`Creating stored procedure ${storedProcedure.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -49,8 +49,8 @@ export async function createStoredProcedure(
      const createSprocParams: SqlStoredProcedureCreateUpdateParameters = {
        properties: {
          resource: storedProcedure as SqlStoredProcedureResource,
-          options: {}
-        }
+          options: {},
+        },
      };
      const rpResponse = await createUpdateSqlStoredProcedure(
        userContext.subscriptionId,
--- a/src/Common/dataAccess/createTrigger.ts
+++ b/src/Common/dataAccess/createTrigger.ts
@@ -3,7 +3,7 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { Resource, TriggerDefinition } from "@azure/cosmos";
 import {
  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource
+  SqlTriggerResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import { createUpdateSqlTrigger, getSqlTrigger } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
@@ -19,7 +19,7 @@ export async function createTrigger(
  const clearMessage = logConsoleProgress(`Creating trigger ${trigger.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -44,8 +44,8 @@ export async function createTrigger(
      const createTriggerParams: SqlTriggerCreateUpdateParameters = {
        properties: {
          resource: trigger as SqlTriggerResource,
-          options: {}
-        }
+          options: {},
+        },
      };
      const rpResponse = await createUpdateSqlTrigger(
        userContext.subscriptionId,
@@ -59,10 +59,7 @@ export async function createTrigger(
      return rpResponse && (rpResponse.properties?.resource as TriggerDefinition & Resource);
    }

-    const response = await client()
-      .database(databaseId)
-      .container(collectionId)
-      .scripts.triggers.create(trigger);
+    const response = await client().database(databaseId).container(collectionId).scripts.triggers.create(trigger);
    return response.resource;
  } catch (error) {
    handleError(error, "CreateTrigger", `Error while creating trigger ${trigger.id}`);
--- a/src/Common/dataAccess/createUserDefinedFunction.ts
+++ b/src/Common/dataAccess/createUserDefinedFunction.ts
@@ -3,12 +3,12 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import {
  SqlUserDefinedFunctionCreateUpdateParameters,
-  SqlUserDefinedFunctionResource
+  SqlUserDefinedFunctionResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import {
  createUpdateSqlUserDefinedFunction,
-  getSqlUserDefinedFunction
+  getSqlUserDefinedFunction,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -22,7 +22,7 @@ export async function createUserDefinedFunction(
  const clearMessage = logConsoleProgress(`Creating user defined function ${userDefinedFunction.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -49,8 +49,8 @@ export async function createUserDefinedFunction(
      const createUDFParams: SqlUserDefinedFunctionCreateUpdateParameters = {
        properties: {
          resource: userDefinedFunction as SqlUserDefinedFunctionResource,
-          options: {}
-        }
+          options: {},
+        },
      };
      const rpResponse = await createUpdateSqlUserDefinedFunction(
        userContext.subscriptionId,
--- a/src/Common/dataAccess/deleteCollection.test.ts
+++ b/src/Common/dataAccess/deleteCollection.test.ts
@@ -13,30 +13,34 @@ describe("deleteCollection", () => {
  beforeAll(() => {
    updateUserContext({
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
    await deleteCollection("database", "collection");
    expect(armRequest).toHaveBeenCalled();
  });

  it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
    (client as jest.Mock).mockReturnValue({
      database: () => {
        return {
          container: () => {
            return {
-              delete: (): unknown => undefined
+              delete: (): unknown => undefined,
            };
-          }
+          },
        };
-      }
+      },
    });
    await deleteCollection("database", "collection");
    expect(client).toHaveBeenCalled();
--- a/src/Common/dataAccess/deleteCollection.ts
+++ b/src/Common/dataAccess/deleteCollection.ts
@@ -13,13 +13,10 @@ import { client } from "../CosmosClient";
 export async function deleteCollection(databaseId: string, collectionId: string): Promise<void> {
  const clearMessage = logConsoleProgress(`Deleting container ${collectionId}`);
  try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
      await deleteCollectionWithARM(databaseId, collectionId);
    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .delete();
+      await client().database(databaseId).container(collectionId).delete();
    }
    logConsoleInfo(`Successfully deleted container ${collectionId}`);
  } catch (error) {
--- a/src/Common/dataAccess/deleteConflict.ts
+++ b/src/Common/dataAccess/deleteConflict.ts
@@ -10,7 +10,7 @@ export const deleteConflict = async (collection: CollectionBase, conflictId: Con

  try {
    const options = {
-      partitionKey: getPartitionKeyHeaderForConflict(conflictId)
+      partitionKey: getPartitionKeyHeaderForConflict(conflictId),
    };

    await client()
--- a/src/Common/dataAccess/deleteDatabase.test.ts
+++ b/src/Common/dataAccess/deleteDatabase.test.ts
@@ -13,26 +13,30 @@ describe("deleteDatabase", () => {
  beforeAll(() => {
    updateUserContext({
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
    await deleteDatabase("database");
    expect(armRequest).toHaveBeenCalled();
  });

  it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
    (client as jest.Mock).mockReturnValue({
      database: () => {
        return {
-          delete: (): unknown => undefined
+          delete: (): unknown => undefined,
        };
-      }
+      },
    });
    await deleteDatabase("database");
    expect(client).toHaveBeenCalled();
--- a/src/Common/dataAccess/deleteDatabase.ts
+++ b/src/Common/dataAccess/deleteDatabase.ts
@@ -16,12 +16,10 @@ export async function deleteDatabase(databaseId: string): Promise<void> {
    if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
      throw new Error("Deleting database resources is not allowed for tables accounts");
    }
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
      await deleteDatabaseWithARM(databaseId);
    } else {
-      await client()
-        .database(databaseId)
-        .delete();
+      await client().database(databaseId).delete();
    }
    logConsoleInfo(`Successfully deleted database ${databaseId}`);
  } catch (error) {
--- a/src/Common/dataAccess/deleteStoredProcedure.ts
+++ b/src/Common/dataAccess/deleteStoredProcedure.ts
@@ -14,7 +14,7 @@ export async function deleteStoredProcedure(
  const clearMessage = logConsoleProgress(`Deleting stored procedure ${storedProcedureId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -27,11 +27,7 @@ export async function deleteStoredProcedure(
        storedProcedureId
      );
    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.storedProcedure(storedProcedureId)
-        .delete();
+      await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
    }
  } catch (error) {
    handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);
--- a/src/Common/dataAccess/deleteTrigger.ts
+++ b/src/Common/dataAccess/deleteTrigger.ts
@@ -10,7 +10,7 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
  const clearMessage = logConsoleProgress(`Deleting trigger ${triggerId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -23,11 +23,7 @@ export async function deleteTrigger(databaseId: string, collectionId: string, tr
        triggerId
      );
    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.trigger(triggerId)
-        .delete();
+      await client().database(databaseId).container(collectionId).scripts.trigger(triggerId).delete();
    }
  } catch (error) {
    handleError(error, "DeleteTrigger", `Error while deleting trigger ${triggerId}`);
--- a/src/Common/dataAccess/deleteUserDefinedFunction.ts
+++ b/src/Common/dataAccess/deleteUserDefinedFunction.ts
@@ -10,7 +10,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
  const clearMessage = logConsoleProgress(`Deleting user defined function ${id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -23,11 +23,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
        id
      );
    } else {
-      await client()
-        .database(databaseId)
-        .container(collectionId)
-        .scripts.userDefinedFunction(id)
-        .delete();
+      await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
    }
  } catch (error) {
    handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);
--- a/src/Common/dataAccess/executeStoredProcedure.ts
+++ b/src/Common/dataAccess/executeStoredProcedure.ts
@@ -33,7 +33,7 @@ export const executeStoredProcedure = async (
    );
    return {
      result: response.resource,
-      scriptLogs: response.headers[HttpHeaders.scriptLogResults] as string
+      scriptLogs: response.headers[HttpHeaders.scriptLogResults] as string,
    };
  } catch (error) {
    handleError(
--- a/src/Common/dataAccess/getCollectionDataUsageSize.ts
+++ b/src/Common/dataAccess/getCollectionDataUsageSize.ts
@@ -41,7 +41,7 @@ interface MetricsResponse {
 }

 export const getCollectionUsageSizeInKB = async (databaseName: string, containerName: string): Promise<number> => {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
    return undefined;
  }

@@ -60,8 +60,8 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
      apiVersion: "2018-01-01",
      queryParams: {
        filter,
-        metricNames
-      }
+        metricNames,
+      },
    });

    if (metricsResponse?.value?.length !== 2) {
@@ -76,7 +76,7 @@ export const getCollectionUsageSizeInKB = async (databaseName: string, container
    return dataUsageSizeInKb + indexUsageSizeInKb;
  } catch (error) {
    handleError(error, "getCollectionUsageSize");
-    throw error;
+    return undefined;
  }
 };

--- a/src/Common/dataAccess/getIndexTransformationProgress.ts
+++ b/src/Common/dataAccess/getIndexTransformationProgress.ts
@@ -3,18 +3,16 @@ import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import * as Constants from "../Constants";
 import { AuthType } from "../../AuthType";
+import { userContext } from "../../UserContext";

 export async function getIndexTransformationProgress(databaseId: string, collectionId: string): Promise<number> {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
    return undefined;
  }
  let indexTransformationPercentage: number;
  const clearMessage = logConsoleProgress(`Reading container ${collectionId}`);
  try {
-    const response = await client()
-      .database(databaseId)
-      .container(collectionId)
-      .read({ populateQuotaInfo: true });
+    const response = await client().database(databaseId).container(collectionId).read({ populateQuotaInfo: true });

    indexTransformationPercentage = parseInt(
      response.headers[Constants.HttpHeaders.collectionIndexTransformationProgress] as string
--- a/src/Common/dataAccess/queryConflicts.ts
+++ b/src/Common/dataAccess/queryConflicts.ts
@@ -7,8 +7,5 @@ export const queryConflicts = (
  query: string,
  options: FeedOptions
 ): QueryIterator<ConflictDefinition & Resource> => {
-  return client()
-    .database(databaseId)
-    .container(containerId)
-    .conflicts.query(query, options);
+  return client().database(databaseId).container(containerId).conflicts.query(query, options);
 };
--- a/src/Common/dataAccess/queryDocuments.ts
+++ b/src/Common/dataAccess/queryDocuments.ts
@@ -10,10 +10,7 @@ export const queryDocuments = (
  options: FeedOptions
 ): QueryIterator<ItemDefinition & Resource> => {
  options = getCommonQueryOptions(options);
-  return client()
-    .database(databaseId)
-    .container(containerId)
-    .items.query(query, options);
+  return client().database(databaseId).container(containerId).items.query(query, options);
 };

 export const getCommonQueryOptions = (options: FeedOptions): FeedOptions => {
--- a/src/Common/dataAccess/readCollection.test.ts
+++ b/src/Common/dataAccess/readCollection.test.ts
@@ -9,25 +9,25 @@ import { updateUserContext } from "../../UserContext";
 describe("readCollection", () => {
  beforeAll(() => {
    updateUserContext({
+      authType: AuthType.ResourceToken,
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call SDK if logged in with resource token", async () => {
-    window.authType = AuthType.ResourceToken;
    (client as jest.Mock).mockReturnValue({
      database: () => {
        return {
          container: () => {
            return {
-              read: (): unknown => ({})
+              read: (): unknown => ({}),
            };
-          }
+          },
        };
-      }
+      },
    });
    await readCollection("database", "collection");
    expect(client).toHaveBeenCalled();
--- a/src/Common/dataAccess/readCollection.ts
+++ b/src/Common/dataAccess/readCollection.ts
@@ -7,10 +7,7 @@ export async function readCollection(databaseId: string, collectionId: string):
  let collection: DataModels.Collection;
  const clearMessage = logConsoleProgress(`Querying container ${collectionId}`);
  try {
-    const response = await client()
-      .database(databaseId)
-      .container(collectionId)
-      .read();
+    const response = await client().database(databaseId).container(collectionId).read();
    collection = response.resource as DataModels.Collection;
  } catch (error) {
    handleError(error, "ReadCollection", `Error while querying container ${collectionId}`);
--- a/src/Common/dataAccess/readCollectionOffer.ts
+++ b/src/Common/dataAccess/readCollectionOffer.ts
@@ -16,7 +16,7 @@ export const readCollectionOffer = async (params: ReadCollectionOfferParams): Pr

  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
    ) {
@@ -106,7 +106,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
        manualThroughput: undefined,
        minimumThroughput,
-        offerReplacePending: resource.offerReplacePending === "true"
+        offerReplacePending: resource.offerReplacePending === "true",
      };
    }

@@ -115,7 +115,7 @@ const readCollectionOfferWithARM = async (databaseId: string, collectionId: stri
      autoscaleMaxThroughput: undefined,
      manualThroughput: resource.throughput,
      minimumThroughput,
-      offerReplacePending: resource.offerReplacePending === "true"
+      offerReplacePending: resource.offerReplacePending === "true",
    };
  }

--- a/src/Common/dataAccess/readCollections.test.ts
+++ b/src/Common/dataAccess/readCollections.test.ts
@@ -12,32 +12,36 @@ describe("readCollections", () => {
  beforeAll(() => {
    updateUserContext({
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
    await readCollections("database");
    expect(armRequest).toHaveBeenCalled();
  });

  it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
    (client as jest.Mock).mockReturnValue({
      database: () => {
        return {
          containers: {
            readAll: () => {
              return {
-                fetchAll: (): unknown => []
+                fetchAll: (): unknown => [],
              };
-            }
-          }
+            },
+          },
        };
-      }
+      },
    });
    await readCollections("database");
    expect(client).toHaveBeenCalled();
--- a/src/Common/dataAccess/readCollections.ts
+++ b/src/Common/dataAccess/readCollections.ts
@@ -15,7 +15,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
  const clearMessage = logConsoleProgress(`Querying containers for database ${databaseId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
@@ -23,10 +23,7 @@ export async function readCollections(databaseId: string): Promise<DataModels.Co
      return await readCollectionsWithARM(databaseId);
    }

-    const sdkResponse = await client()
-      .database(databaseId)
-      .containers.readAll()
-      .fetchAll();
+    const sdkResponse = await client().database(databaseId).containers.readAll().fetchAll();
    return sdkResponse.resources as DataModels.Collection[];
  } catch (error) {
    handleError(error, "ReadCollections", `Error while querying containers for database ${databaseId}`);
@@ -63,5 +60,5 @@ async function readCollectionsWithARM(databaseId: string): Promise<DataModels.Co
      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
  }

-  return rpResponse?.value?.map(collection => collection.properties?.resource as DataModels.Collection);
+  return rpResponse?.value?.map((collection) => collection.properties?.resource as DataModels.Collection);
 }
--- a/src/Common/dataAccess/readDatabaseOffer.ts
+++ b/src/Common/dataAccess/readDatabaseOffer.ts
@@ -15,7 +15,7 @@ export const readDatabaseOffer = async (params: ReadDatabaseOfferParams): Promis

  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
    ) {
@@ -78,7 +78,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
        autoscaleMaxThroughput: autoscaleSettings.maxThroughput,
        manualThroughput: undefined,
        minimumThroughput,
-        offerReplacePending: resource.offerReplacePending === "true"
+        offerReplacePending: resource.offerReplacePending === "true",
      };
    }

@@ -87,7 +87,7 @@ const readDatabaseOfferWithARM = async (databaseId: string): Promise<Offer> => {
      autoscaleMaxThroughput: undefined,
      manualThroughput: resource.throughput,
      minimumThroughput,
-      offerReplacePending: resource.offerReplacePending === "true"
+      offerReplacePending: resource.offerReplacePending === "true",
    };
  }

--- a/src/Common/dataAccess/readDatabases.test.ts
+++ b/src/Common/dataAccess/readDatabases.test.ts
@@ -12,28 +12,32 @@ describe("readDatabases", () => {
  beforeAll(() => {
    updateUserContext({
      databaseAccount: {
-        name: "test"
+        name: "test",
      } as DatabaseAccount,
-      defaultExperience: DefaultAccountExperienceType.DocumentDB
+      defaultExperience: DefaultAccountExperienceType.DocumentDB,
    });
  });

  it("should call ARM if logged in with AAD", async () => {
-    window.authType = AuthType.AAD;
+    updateUserContext({
+      authType: AuthType.AAD,
+    });
    await readDatabases();
    expect(armRequest).toHaveBeenCalled();
  });

  it("should call SDK if not logged in with non-AAD method", async () => {
-    window.authType = AuthType.MasterKey;
+    updateUserContext({
+      authType: AuthType.MasterKey,
+    });
    (client as jest.Mock).mockReturnValue({
      databases: {
        readAll: () => {
          return {
-            fetchAll: (): unknown => []
+            fetchAll: (): unknown => [],
          };
-        }
-      }
+        },
+      },
    });
    await readDatabases();
    expect(client).toHaveBeenCalled();
--- a/src/Common/dataAccess/readDatabases.ts
+++ b/src/Common/dataAccess/readDatabases.ts
@@ -15,15 +15,13 @@ export async function readDatabases(): Promise<DataModels.Database[]> {
  const clearMessage = logConsoleProgress(`Querying databases`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
    ) {
      databases = await readDatabasesWithARM();
    } else {
-      const sdkResponse = await client()
-        .databases.readAll()
-        .fetchAll();
+      const sdkResponse = await client().databases.readAll().fetchAll();
      databases = sdkResponse.resources as DataModels.Database[];
    }
  } catch (error) {
@@ -58,5 +56,5 @@ async function readDatabasesWithARM(): Promise<DataModels.Database[]> {
      throw new Error(`Unsupported default experience type: ${defaultExperience}`);
  }

-  return rpResponse?.value?.map(database => database.properties?.resource as DataModels.Database);
+  return rpResponse?.value?.map((database) => database.properties?.resource as DataModels.Database);
 }
--- a/src/Common/dataAccess/readMongoDBCollection.tsx
+++ b/src/Common/dataAccess/readMongoDBCollection.tsx
@@ -9,7 +9,7 @@ export async function readMongoDBCollectionThroughRP(
  databaseId: string,
  collectionId: string
 ): Promise<MongoDBCollectionResource> {
-  if (window.authType !== AuthType.AAD) {
+  if (userContext.authType !== AuthType.AAD) {
    return undefined;
  }
  let collection: MongoDBCollectionResource;
--- a/src/Common/dataAccess/readOfferWithSDK.ts
+++ b/src/Common/dataAccess/readOfferWithSDK.ts
@@ -8,7 +8,7 @@ import { readOffers } from "./readOffers";
 export const readOfferWithSDK = async (offerId: string, resourceId: string): Promise<Offer> => {
  if (!offerId) {
    const offers = await readOffers();
-    const offer = offers.find(offer => offer.resource === resourceId);
+    const offer = offers.find((offer) => offer.resource === resourceId);

    if (!offer) {
      return undefined;
@@ -18,12 +18,10 @@ export const readOfferWithSDK = async (offerId: string, resourceId: string): Pro

  const options: RequestOptions = {
    initialHeaders: {
-      [HttpHeaders.populateCollectionThroughputInfo]: true
-    }
+      [HttpHeaders.populateCollectionThroughputInfo]: true,
+    },
  };
-  const response = await client()
-    .offer(offerId)
-    .read(options);
+  const response = await client().offer(offerId).read(options);

  return parseSDKOfferResponse(response);
 };
--- a/src/Common/dataAccess/readOffers.ts
+++ b/src/Common/dataAccess/readOffers.ts
@@ -7,9 +7,7 @@ export const readOffers = async (): Promise<SDKOfferDefinition[]> => {
  const clearMessage = logConsoleProgress(`Querying offers`);

  try {
-    const response = await client()
-      .offers.readAll()
-      .fetchAll();
+    const response = await client().offers.readAll().fetchAll();
    return response?.resources;
  } catch (error) {
    // This should be removed when we can correctly identify if an account is serverless when connected using connection string too.
--- a/src/Common/dataAccess/readStoredProcedures.ts
+++ b/src/Common/dataAccess/readStoredProcedures.ts
@@ -14,7 +14,7 @@ export async function readStoredProcedures(
  const clearMessage = logConsoleProgress(`Querying stored procedures for container ${collectionId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -25,7 +25,7 @@ export async function readStoredProcedures(
        databaseId,
        collectionId
      );
-      return rpResponse?.value?.map(sproc => sproc.properties?.resource as StoredProcedureDefinition & Resource);
+      return rpResponse?.value?.map((sproc) => sproc.properties?.resource as StoredProcedureDefinition & Resource);
    }

    const response = await client()
--- a/src/Common/dataAccess/readTriggers.ts
+++ b/src/Common/dataAccess/readTriggers.ts
@@ -14,7 +14,7 @@ export async function readTriggers(
  const clearMessage = logConsoleProgress(`Querying triggers for container ${collectionId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -25,14 +25,10 @@ export async function readTriggers(
        databaseId,
        collectionId
      );
-      return rpResponse?.value?.map(trigger => trigger.properties?.resource as TriggerDefinition & Resource);
+      return rpResponse?.value?.map((trigger) => trigger.properties?.resource as TriggerDefinition & Resource);
    }

-    const response = await client()
-      .database(databaseId)
-      .container(collectionId)
-      .scripts.triggers.readAll()
-      .fetchAll();
+    const response = await client().database(databaseId).container(collectionId).scripts.triggers.readAll().fetchAll();
    return response?.resources;
  } catch (error) {
    handleError(error, "ReadTriggers", `Failed to query triggers for container ${collectionId}`);
--- a/src/Common/dataAccess/readUserDefinedFunctions.ts
+++ b/src/Common/dataAccess/readUserDefinedFunctions.ts
@@ -14,7 +14,7 @@ export async function readUserDefinedFunctions(
  const clearMessage = logConsoleProgress(`Querying user defined functions for container ${collectionId}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -25,7 +25,7 @@ export async function readUserDefinedFunctions(
        databaseId,
        collectionId
      );
-      return rpResponse?.value?.map(udf => udf.properties?.resource as UserDefinedFunctionDefinition & Resource);
+      return rpResponse?.value?.map((udf) => udf.properties?.resource as UserDefinedFunctionDefinition & Resource);
    }

    const response = await client()
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -8,22 +8,22 @@ import {
  MongoDBCollectionCreateUpdateParameters,
  MongoDBCollectionResource,
  SqlContainerCreateUpdateParameters,
-  SqlContainerResource
+  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
+  getCassandraTable,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import {
  createUpdateMongoDBCollection,
-  getMongoDBCollection
+  getMongoDBCollection,
 } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
  createUpdateGremlinGraph,
-  getGremlinGraph
+  getGremlinGraph,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";
 import { handleError } from "../ErrorHandlingUtils";
@@ -41,7 +41,7 @@ export async function updateCollection(

  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience !== DefaultAccountExperienceType.MongoDB &&
      userContext.defaultExperience !== DefaultAccountExperienceType.Table
@@ -130,8 +130,8 @@ export async function updateMongoDBCollectionThroughRP(
    const updateParams: MongoDBCollectionCreateUpdateParameters = {
      properties: {
        resource: newCollection,
-        options: updateOptions
-      }
+        options: updateOptions,
+      },
    };

    const updateResponse = await createUpdateMongoDBCollection(
--- a/src/Common/dataAccess/updateOffer.ts
+++ b/src/Common/dataAccess/updateOffer.ts
@@ -17,7 +17,7 @@ import {
  migrateSqlDatabaseToManualThroughput,
  migrateSqlContainerToAutoscale,
  migrateSqlContainerToManualThroughput,
-  updateSqlContainerThroughput
+  updateSqlContainerThroughput,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import {
  updateCassandraKeyspaceThroughput,
@@ -25,7 +25,7 @@ import {
  migrateCassandraKeyspaceToManualThroughput,
  migrateCassandraTableToAutoscale,
  migrateCassandraTableToManualThroughput,
-  updateCassandraTableThroughput
+  updateCassandraTableThroughput,
 } from "../../Utils/arm/generatedClients/2020-04-01/cassandraResources";
 import {
  updateMongoDBDatabaseThroughput,
@@ -33,7 +33,7 @@ import {
  migrateMongoDBDatabaseToManualThroughput,
  migrateMongoDBCollectionToAutoscale,
  migrateMongoDBCollectionToManualThroughput,
-  updateMongoDBCollectionThroughput
+  updateMongoDBCollectionThroughput,
 } from "../../Utils/arm/generatedClients/2020-04-01/mongoDBResources";
 import {
  updateGremlinDatabaseThroughput,
@@ -41,13 +41,13 @@ import {
  migrateGremlinDatabaseToManualThroughput,
  migrateGremlinGraphToAutoscale,
  migrateGremlinGraphToManualThroughput,
-  updateGremlinGraphThroughput
+  updateGremlinGraphThroughput,
 } from "../../Utils/arm/generatedClients/2020-04-01/gremlinResources";
 import { userContext } from "../../UserContext";
 import {
  migrateTableToAutoscale,
  migrateTableToManualThroughput,
-  updateTableThroughput
+  updateTableThroughput,
 } from "../../Utils/arm/generatedClients/2020-04-01/tableResources";

 export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> => {
@@ -58,7 +58,7 @@ export const updateOffer = async (params: UpdateOfferParams): Promise<Offer> =>
  const clearMessage = logConsoleProgress(`Updating offer for ${offerResourceText}`);

  try {
-    if (window.authType === AuthType.AAD && !userContext.useSDKOperations) {
+    if (userContext.authType === AuthType.AAD && !userContext.useSDKOperations) {
      if (params.collectionId) {
        updatedOffer = await updateCollectionOfferWithARM(params);
      } else if (userContext.defaultExperience === DefaultAccountExperienceType.Table) {
@@ -110,7 +110,7 @@ const updateCollectionOfferWithARM = async (params: UpdateOfferParams): Promise<
  return await readCollectionOffer({
    collectionId: params.collectionId,
    databaseId: params.databaseId,
-    offerId: params.currentOffer.id
+    offerId: params.currentOffer.id,
  });
 };

@@ -140,7 +140,7 @@ const updateDatabaseOfferWithARM = async (params: UpdateOfferParams): Promise<Of

  return await readDatabaseOffer({
    databaseId: params.databaseId,
-    offerId: params.currentOffer.id
+    offerId: params.currentOffer.id,
  });
 };

@@ -358,13 +358,13 @@ const updateGremlinDatabaseOffer = async (params: UpdateOfferParams): Promise<vo
 const createUpdateOfferBody = (params: UpdateOfferParams): ThroughputSettingsUpdateParameters => {
  const body: ThroughputSettingsUpdateParameters = {
    properties: {
-      resource: {}
-    }
+      resource: {},
+    },
  };

  if (params.autopilotThroughput) {
    body.properties.resource.autoscaleSettings = {
-      maxThroughput: params.autopilotThroughput
+      maxThroughput: params.autopilotThroughput,
    };
  } else {
    body.properties.resource.throughput = params.manualThroughput;
@@ -378,7 +378,7 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
  const newOffer: SDKOfferDefinition = {
    content: {
      offerThroughput: undefined,
-      offerIsRUPerMinuteThroughputEnabled: false
+      offerIsRUPerMinuteThroughputEnabled: false,
    },
    _etag: undefined,
    _ts: undefined,
@@ -388,12 +388,12 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
    offerResourceId: sdkOfferDefinition.offerResourceId,
    offerVersion: sdkOfferDefinition.offerVersion,
    offerType: sdkOfferDefinition.offerType,
-    resource: sdkOfferDefinition.resource
+    resource: sdkOfferDefinition.resource,
  };

  if (params.autopilotThroughput) {
    newOffer.content.offerAutopilotSettings = {
-      maxThroughput: params.autopilotThroughput
+      maxThroughput: params.autopilotThroughput,
    };
  } else {
    newOffer.content.offerThroughput = params.manualThroughput;
@@ -402,12 +402,12 @@ const updateOfferWithSDK = async (params: UpdateOfferParams): Promise<Offer> =>
  const options: RequestOptions = {};
  if (params.migrateToAutoPilot) {
    options.initialHeaders = {
-      [HttpHeaders.migrateOfferToAutopilot]: "true"
+      [HttpHeaders.migrateOfferToAutopilot]: "true",
    };
    delete newOffer.content.offerAutopilotSettings;
  } else if (params.migrateToManual) {
    options.initialHeaders = {
-      [HttpHeaders.migrateOfferToManualThroughput]: "true"
+      [HttpHeaders.migrateOfferToManualThroughput]: "true",
    };
    newOffer.content.offerAutopilotSettings = { maxThroughput: 0 };
  }
--- a/src/Common/dataAccess/updateStoredProcedure.ts
+++ b/src/Common/dataAccess/updateStoredProcedure.ts
@@ -3,12 +3,12 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import {
  SqlStoredProcedureCreateUpdateParameters,
-  SqlStoredProcedureResource
+  SqlStoredProcedureResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import {
  createUpdateSqlStoredProcedure,
-  getSqlStoredProcedure
+  getSqlStoredProcedure,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -22,7 +22,7 @@ export async function updateStoredProcedure(
  const clearMessage = logConsoleProgress(`Updating stored procedure ${storedProcedure.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -39,8 +39,8 @@ export async function updateStoredProcedure(
        const createSprocParams: SqlStoredProcedureCreateUpdateParameters = {
          properties: {
            resource: storedProcedure as SqlStoredProcedureResource,
-            options: {}
-          }
+            options: {},
+          },
        };
        const rpResponse = await createUpdateSqlStoredProcedure(
          userContext.subscriptionId,
--- a/src/Common/dataAccess/updateTrigger.ts
+++ b/src/Common/dataAccess/updateTrigger.ts
@@ -2,7 +2,7 @@ import { AuthType } from "../../AuthType";
 import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType";
 import {
  SqlTriggerCreateUpdateParameters,
-  SqlTriggerResource
+  SqlTriggerResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { TriggerDefinition } from "@azure/cosmos";
 import { client } from "../CosmosClient";
@@ -19,7 +19,7 @@ export async function updateTrigger(
  const clearMessage = logConsoleProgress(`Updating trigger ${trigger.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -36,8 +36,8 @@ export async function updateTrigger(
        const createTriggerParams: SqlTriggerCreateUpdateParameters = {
          properties: {
            resource: trigger as SqlTriggerResource,
-            options: {}
-          }
+            options: {},
+          },
        };
        const rpResponse = await createUpdateSqlTrigger(
          userContext.subscriptionId,
--- a/src/Common/dataAccess/updateUserDefinedFunction.ts
+++ b/src/Common/dataAccess/updateUserDefinedFunction.ts
@@ -3,12 +3,12 @@ import { DefaultAccountExperienceType } from "../../DefaultAccountExperienceType
 import { Resource, UserDefinedFunctionDefinition } from "@azure/cosmos";
 import {
  SqlUserDefinedFunctionCreateUpdateParameters,
-  SqlUserDefinedFunctionResource
+  SqlUserDefinedFunctionResource,
 } from "../../Utils/arm/generatedClients/2020-04-01/types";
 import { client } from "../CosmosClient";
 import {
  createUpdateSqlUserDefinedFunction,
-  getSqlUserDefinedFunction
+  getSqlUserDefinedFunction,
 } from "../../Utils/arm/generatedClients/2020-04-01/sqlResources";
 import { handleError } from "../ErrorHandlingUtils";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
@@ -22,7 +22,7 @@ export async function updateUserDefinedFunction(
  const clearMessage = logConsoleProgress(`Updating user defined function ${userDefinedFunction.id}`);
  try {
    if (
-      window.authType === AuthType.AAD &&
+      userContext.authType === AuthType.AAD &&
      !userContext.useSDKOperations &&
      userContext.defaultExperience === DefaultAccountExperienceType.DocumentDB
    ) {
@@ -39,8 +39,8 @@ export async function updateUserDefinedFunction(
        const createUDFParams: SqlUserDefinedFunctionCreateUpdateParameters = {
          properties: {
            resource: userDefinedFunction as SqlUserDefinedFunctionResource,
-            options: {}
-          }
+            options: {},
+          },
        };
        const rpResponse = await createUpdateSqlUserDefinedFunction(
          userContext.subscriptionId,
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -1,10 +1,10 @@
 export enum Platform {
  Portal = "Portal",
  Hosted = "Hosted",
-  Emulator = "Emulator"
+  Emulator = "Emulator",
 }

-interface ConfigContext {
+export interface ConfigContext {
  platform: Platform;
  allowedParentFrameOrigins: string[];
  gitSha?: string;
@@ -37,7 +37,7 @@ let configContext: Readonly<ConfigContext> = {
    `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure.de$`,
    `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
    `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
-    `^https://cosmos-db-dataexplorer-germanycentral.azurewebsites.de$`
+    `^https://cosmos-db-dataexplorer-germanycentral.azurewebsites.de$`,
  ],
  // Webpack injects this at build time
  gitSha: process.env.GIT_SHA,
@@ -52,7 +52,7 @@ let configContext: Readonly<ConfigContext> = {
  ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
  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"
+  BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
 };

 export function resetConfigContext(): void {
@@ -73,20 +73,24 @@ if (process.env.NODE_ENV === "development") {
    BACKEND_ENDPOINT: "https://localhost:" + port,
    MONGO_BACKEND_ENDPOINT: "https://localhost:" + port,
    PROXY_PATH: "/proxy",
-    EMULATOR_ENDPOINT: "https://localhost:8081"
+    EMULATOR_ENDPOINT: "https://localhost:8081",
  });
 }

 export async function initializeConfiguration(): Promise<ConfigContext> {
  try {
-    const response = await fetch("./config.json");
+    const response = await fetch("./config.json", {
+      headers: {
+        "If-None-Match": "", // disable client side cache
+      },
+    });
    if (response.status === 200) {
      try {
        const { allowedParentFrameOrigins, ...externalConfig } = await response.json();
        Object.assign(configContext, externalConfig);
        if (allowedParentFrameOrigins && allowedParentFrameOrigins.length > 0) {
          updateConfigContext({
-            allowedParentFrameOrigins: [...configContext.allowedParentFrameOrigins, ...allowedParentFrameOrigins]
+            allowedParentFrameOrigins: [...configContext.allowedParentFrameOrigins, ...allowedParentFrameOrigins],
          });
        }
      } catch (error) {
@@ -104,7 +108,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
      const platform = params.get("platform");
      switch (platform) {
        default:
-          console.log("Invalid platform query parameter given, ignoring");
+          console.error(`Invalid platform query parameter: ${platform}`);
          break;
        case Platform.Portal:
        case Platform.Hosted:
@@ -113,7 +117,7 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
      }
    }
  } catch (error) {
-    console.log("No configuration file found using defaults");
+    console.error("No configuration file found using defaults");
  }
  return configContext;
 }
--- a/src/Contracts/ActionContracts.ts
+++ b/src/Contracts/ActionContracts.ts
@@ -7,7 +7,7 @@ export enum TabKind {
  TableEntities,
  Graph,
  SQLQuery,
-  ScaleSettings
+  ScaleSettings,
 }

 /**
@@ -20,7 +20,7 @@ export enum PaneKind {
  DeleteDatabase,
  GlobalSettings,
  AdHocAccess,
-  SwitchDirectory
+  SwitchDirectory,
 }

 /**
@@ -79,5 +79,5 @@ export enum ActionType {
  OpenCollectionTab,
  OpenPane,
  TransmitCachedData,
-  OpenSampleNotebook
+  OpenSampleNotebook,
 }
--- 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;
@@ -56,7 +56,7 @@ export enum ApiKind {
  Table,
  Cassandra,
  Graph,
-  MongoDBCompute
+  MongoDBCompute,
 }

 export interface GenerateTokenResponse {
@@ -210,9 +210,9 @@ export interface QueryMetrics {

 export interface Offer {
  id: string;
-  autoscaleMaxThroughput: number;
-  manualThroughput: number;
-  minimumThroughput: number;
+  autoscaleMaxThroughput: number | undefined;
+  manualThroughput: number | undefined;
+  minimumThroughput: number | undefined;
  offerDefinition?: SDKOfferDefinition;
  offerReplacePending: boolean;
 }
@@ -334,7 +334,7 @@ export interface Notification {

 export enum ConflictResolutionMode {
  Custom = "Custom",
-  LastWriterWins = "LastWriterWins"
+  LastWriterWins = "LastWriterWins",
 }

 /**
@@ -472,7 +472,7 @@ export interface SparkClusterEndpoint {
 export enum SparkClusterEndpointKind {
  SparkUI = "SparkUI",
  HistoryServerUI = "HistoryServerUI",
-  Livy = "Livy"
+  Livy = "Livy",
 }

 export interface RpParameters {
--- a/src/Contracts/Diagnostics.ts
+++ b/src/Contracts/Diagnostics.ts
@@ -21,7 +21,7 @@ export enum LogEntryLevel {
  /**
   * Error level.
   */
-  Error = 2
+  Error = 2,
 }
 /**
 * Schema of a log entry.
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -33,7 +33,6 @@ export enum MessageTypes {
  CreateWorkspace,
  CreateSparkPool,
  RefreshDatabaseAccount,
-  InitTestExplorer
 }

 export { Versions, ActionContracts, Diagnostics };
--- a/src/Contracts/SelfServeContracts.ts
+++ b/src/Contracts/SelfServeContracts.ts
@@ -0,0 +1,9 @@
+/**
+ * Messaging types used with SelfServe Component <-> Portal communication
+ * and Hosted <-> SelfServe Component communication
+ */
+
+export enum SelfServeMessageTypes {
+  TelemetryInfo = "TelemetryInfo",
+  Notification = "Notification",
+}
--- a/src/Contracts/SubscriptionType.ts
+++ b/src/Contracts/SubscriptionType.ts
@@ -3,5 +3,5 @@ export enum SubscriptionType {
  EA,
  Free,
  Internal,
-  PAYG
+  PAYG,
 }
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -3,9 +3,8 @@ import {
  Resource,
  StoredProcedureDefinition,
  TriggerDefinition,
-  UserDefinedFunctionDefinition
+  UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import Q from "q";
 import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
 import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
@@ -15,6 +14,7 @@ import DocumentId from "../Explorer/Tree/DocumentId";
 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";
@@ -88,9 +88,9 @@ 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>;
 }

 export interface CollectionBase extends TreeNode {
@@ -107,8 +107,8 @@ export interface CollectionBase extends TreeNode {
  isCollectionExpanded: ko.Observable<boolean>;

  onDocumentDBDocumentsClick(): void;
-  onNewQueryClick(source: any, event: MouseEvent, queryText?: string): void;
-  expandCollection(): Q.Promise<any>;
+  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
+  expandCollection(): void;
  collapseCollection(): void;
  getDatabase(): Database;
 }
@@ -137,14 +137,13 @@ export interface Collection extends CollectionBase {
  openTab(): void;

  onSettingsClick: () => Promise<void>;
-  onDeleteCollectionContextMenuClick(source: Collection, event: MouseEvent): void;

  onNewGraphClick(): void;
-  onNewMongoQueryClick(source: any, event: MouseEvent, queryText?: string): void;
+  onNewMongoQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
  onNewMongoShellClick(): void;
-  onNewStoredProcedureClick(source: Collection, event: MouseEvent): void;
-  onNewUserDefinedFunctionClick(source: Collection, event: MouseEvent): void;
-  onNewTriggerClick(source: Collection, event: MouseEvent): void;
+  onNewStoredProcedureClick(source: Collection, event?: MouseEvent): void;
+  onNewUserDefinedFunctionClick(source: Collection, event?: MouseEvent): void;
+  onNewTriggerClick(source: Collection, event?: MouseEvent): void;
  storedProcedures: ko.Computed<StoredProcedure[]>;
  userDefinedFunctions: ko.Computed<UserDefinedFunction[]>;
  triggers: ko.Computed<Trigger[]>;
@@ -175,9 +174,10 @@ export interface Collection extends CollectionBase {

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

  getLabel(): string;
+  getPendingThroughputSplitNotification(): Promise<DataModels.Notification>;
 }

 /**
@@ -195,7 +195,7 @@ export interface PaneOptions {
 export enum NeighborType {
  SOURCES_ONLY,
  TARGETS_ONLY,
-  BOTH
+  BOTH,
 }

 /**
@@ -292,10 +292,6 @@ export interface DocumentsTabOptions extends TabOptions {
  resourceTokenPartitionKey?: string;
 }

-export interface SettingsTabV2Options extends TabOptions {
-  getPendingNotification: Q.Promise<DataModels.Notification>;
-}
-
 export interface ConflictsTabOptions extends TabOptions {
  partitionKey: DataModels.PartitionKey;
  conflictIds: ko.ObservableArray<ConflictId>;
@@ -325,14 +321,14 @@ export enum DocumentExplorerState {
  newDocumentInvalid,
  exisitingDocumentNoEdits,
  exisitingDocumentDirtyValid,
-  exisitingDocumentDirtyInvalid
+  exisitingDocumentDirtyInvalid,
 }

 export enum IndexingPolicyEditorState {
  noCollectionSelected,
  noEdits,
  dirtyValid,
-  dirtyInvalid
+  dirtyInvalid,
 }

 export enum ScriptEditorState {
@@ -340,7 +336,7 @@ export enum ScriptEditorState {
  newValid,
  exisitingNoEdits,
  exisitingDirtyValid,
-  exisitingDirtyInvalid
+  exisitingDirtyInvalid,
 }

 export enum CollectionTabKind {
@@ -358,45 +354,54 @@ export enum CollectionTabKind {
  Notebook = 13 /* Deprecated */,
  Terminal = 14,
  NotebookV2 = 15,
-  SparkMasterTab = 16,
+  SparkMasterTab = 16 /* Deprecated */,
  Gallery = 17,
  NotebookViewer = 18,
  Schema = 19,
-  SettingsV2 = 20
+  CollectionSettingsV2 = 20,
+  DatabaseSettingsV2 = 21,
 }

 export enum TerminalKind {
  Default = 0,
  Mongo = 1,
-  Cassandra = 2
+  Cassandra = 2,
 }

 export interface DataExplorerInputsFrame {
  databaseAccount: any;
-  subscriptionId: string;
-  resourceGroup: string;
-  masterKey: string;
-  hasWriteAccess: boolean;
-  authorizationToken: string;
-  features: any;
-  csmEndpoint: string;
-  dnsSuffix: string;
-  serverId: string;
-  extensionEndpoint: string;
-  subscriptionType: SubscriptionType;
-  quotaId: string;
-  addCollectionDefaultFlight: string;
-  isTryCosmosDBSubscription: boolean;
+  subscriptionId?: string;
+  resourceGroup?: string;
+  masterKey?: string;
+  hasWriteAccess?: boolean;
+  authorizationToken?: string;
+  csmEndpoint?: string;
+  dnsSuffix?: string;
+  serverId?: string;
+  extensionEndpoint?: string;
+  subscriptionType?: SubscriptionType;
+  quotaId?: string;
+  addCollectionDefaultFlight?: string;
+  isTryCosmosDBSubscription?: boolean;
  loadDatabaseAccountTimestamp?: number;
  sharedThroughputMinimum?: number;
  sharedThroughputMaximum?: number;
  sharedThroughputDefault?: number;
  dataExplorerVersion?: string;
-  isAuthWithresourceToken?: boolean;
  defaultCollectionThroughput?: CollectionCreationDefaults;
  flights?: readonly string[];
 }

+export interface SelfServeFrameInputs {
+  selfServeType: SelfServeType;
+  databaseAccount: any;
+  subscriptionId: string;
+  resourceGroup: string;
+  authorizationToken: string;
+  csmEndpoint: string;
+  flights?: readonly string[];
+}
+
 export interface CollectionCreationDefaults {
  storage: string;
  throughput: ThroughputDefaults;
--- a/src/Controls/Heatmap/Heatmap.test.ts
+++ b/src/Controls/Heatmap/Heatmap.test.ts
@@ -6,19 +6,19 @@ describe("The Heatmap Control", () => {
  const dataPoints = {
    "1": {
      "2019-06-19T00:59:10Z": {
-        "Normalized Throughput": 0.35
+        "Normalized Throughput": 0.35,
      },
      "2019-06-19T00:48:10Z": {
-        "Normalized Throughput": 0.25
-      }
-    }
+        "Normalized Throughput": 0.25,
+      },
+    },
  };

  const chartCaptions = {
    chartTitle: "chart title",
    yAxisTitle: "YAxisTitle",
    tooltipText: "Tooltip text",
-    timeWindow: 123456789
+    timeWindow: 123456789,
  };

  let heatmap: Heatmap;
@@ -75,12 +75,12 @@ describe("The Heatmap Control", () => {
      if (dayjs().utcOffset()) {
        expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints).not.toEqual([
          "2019-06-19T00:48:10Z",
-          "2019-06-19T00:59:10Z"
+          "2019-06-19T00:59:10Z",
        ]);
      } else {
        expect(heatmap.generateMatrixFromMap(dataPoints).xAxisPoints).toEqual([
          "2019-06-19T00:48:10Z",
-          "2019-06-19T00:59:10Z"
+          "2019-06-19T00:59:10Z",
        ]);
      }
    });
@@ -106,9 +106,9 @@ describe("iframe rendering when there is no data", () => {
        data: {
          chartData: {},
          chartSettings: {},
-          theme: 4
-        }
-      }
+          theme: 4,
+        },
+      },
    };

    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
@@ -126,9 +126,9 @@ describe("iframe rendering when there is no data", () => {
        data: {
          chartData: {},
          chartSettings: {},
-          theme: 2
-        }
-      }
+          theme: 2,
+        },
+      },
    };

    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/src/Controls/Heatmap/Heatmap.ts
@@ -1,5 +1,10 @@
-import * as Plotly from "plotly.js-cartesian-dist-min";
 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 {
  ChartSettings,
  DataPayload,
@@ -9,13 +14,8 @@ import {
  HeatmapData,
  LayoutSettings,
  PartitionTimeStampToData,
-  PortalTheme
+  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";
@@ -43,7 +43,7 @@ export class Heatmap {
    return {
      family: StyleConstants.DataExplorerFont,
      size,
-      color
+      color,
    };
  }

@@ -73,7 +73,7 @@ export class Heatmap {
            return 0;
          }
        }
-      })
+      }),
    };
    // go thru all rows and create 2d matrix for heatmap...
    for (let i = 0; i < rows.length; i++) {
@@ -115,7 +115,7 @@ export class Heatmap {
          [0.7, "#E46612"],
          [0.8, "#E64914"],
          [0.9, "#B80016"],
-          [1.0, "#B80016"]
+          [1.0, "#B80016"],
        ],
        name: "",
        hovertemplate: this._heatmapCaptions.tooltipText,
@@ -123,11 +123,11 @@ export class Heatmap {
          thickness: 15,
          outlinewidth: 0,
          tickcolor: StyleConstants.BaseDark,
-          tickfont: this._getFontStyles(10, this._defaultFontColor)
+          tickfont: this._getFontStyles(10, this._defaultFontColor),
        },
        y: this._chartData.yAxisPoints,
-        x: this._chartData.xAxisPoints
-      }
+        x: this._chartData.xAxisPoints,
+      },
    ];
  }

@@ -138,7 +138,7 @@ export class Heatmap {
        r: 10,
        b: 35,
        t: 30,
-        pad: 0
+        pad: 0,
      },
      paper_bgcolor: "transparent",
      plot_bgcolor: "transparent",
@@ -154,7 +154,7 @@ export class Heatmap {
        autotick: true,
        fixedrange: true,
        ticks: "",
-        showticklabels: false
+        showticklabels: false,
      },
      xaxis: {
        fixedrange: true,
@@ -167,13 +167,13 @@ export class Heatmap {
        autotick: true,
        tickformat: this._heatmapCaptions.timeWindow > 7 ? "%I:%M %p" : "%b %e",
        showticklabels: true,
-        tickfont: this._getFontStyles(10)
+        tickfont: this._getFontStyles(10),
      },
      title: {
        text: this._heatmapCaptions.chartTitle,
        x: 0.01,
-        font: this._getFontStyles(13, this._defaultFontColor)
-      }
+        font: this._getFontStyles(13, this._defaultFontColor),
+      },
    };
  }

@@ -181,7 +181,7 @@ export class Heatmap {
    return {
      /* heatmap can be fully responsive however the min-height needed in that case is greater than the iframe portal height, hence explicit width + height have been set in _getLayoutSettings
      responsive: true,*/
-      displayModeBar: false
+      displayModeBar: false,
    };
  }

@@ -266,4 +266,4 @@ export function handleMessage(event: MessageEvent) {
 }

 window.addEventListener("message", handleMessage, false);
-sendMessage("ready");
+sendReadyMessage();
--- a/src/Controls/Heatmap/HeatmapDatatypes.ts
+++ b/src/Controls/Heatmap/HeatmapDatatypes.ts
@@ -8,7 +8,7 @@ export enum PortalTheme {
  blue = 1,
  azure,
  light,
-  dark
+  dark,
 }

 export interface HeatmapData {
--- a/src/DefaultAccountExperienceType.ts
+++ b/src/DefaultAccountExperienceType.ts
@@ -4,5 +4,5 @@ export enum DefaultAccountExperienceType {
  MongoDB = "MongoDB",
  Table = "Table",
  Cassandra = "Cassandra",
-  ApiForMongoDB = "Azure Cosmos DB for MongoDB API"
+  ApiForMongoDB = "Azure Cosmos DB for MongoDB API",
 }
--- a/src/Explorer/ComponentRegisterer.test.ts
+++ b/src/Explorer/ComponentRegisterer.test.ts
@@ -20,10 +20,6 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("graph-style")).toBe(true);
  });

-  it("should register collapsible-panel component", () => {
-    expect(ko.components.isRegistered("collapsible-panel")).toBe(true);
-  });
-
  it("should register json-editor component", () => {
    expect(ko.components.isRegistered("json-editor")).toBe(true);
  });
@@ -45,7 +41,8 @@ describe("Component Registerer", () => {
  });

  it("should register settings-tab-v2 component", () => {
-    expect(ko.components.isRegistered("settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("database-settings-tab-v2")).toBe(true);
+    expect(ko.components.isRegistered("collection-settings-tab-v2")).toBe(true);
  });

  it("should register query-tab component", () => {
@@ -68,10 +65,6 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("terminal-tab")).toBe(true);
  });

-  it("should register spark-master-tab component", () => {
-    expect(ko.components.isRegistered("spark-master-tab")).toBe(true);
-  });
-
  it("should register mongo-shell-tab component", () => {
    expect(ko.components.isRegistered("mongo-shell-tab")).toBe(true);
  });
@@ -84,10 +77,6 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("delete-collection-confirmation-pane")).toBe(true);
  });

-  it("should register delete-database-confirmation-pane component", () => {
-    expect(ko.components.isRegistered("delete-database-confirmation-pane")).toBe(true);
-  });
-
  it("should register save-query-pane component", () => {
    expect(ko.components.isRegistered("save-query-pane")).toBe(true);
  });
@@ -104,10 +93,6 @@ describe("Component Registerer", () => {
    expect(ko.components.isRegistered("graph-styling-pane")).toBe(true);
  });

-  it("should register upload-file-pane component", () => {
-    expect(ko.components.isRegistered("upload-file-pane")).toBe(true);
-  });
-
  it("should register string-input-pane component", () => {
    expect(ko.components.isRegistered("string-input-pane")).toBe(true);
  });
--- a/src/Explorer/ComponentRegisterer.ts
+++ b/src/Explorer/ComponentRegisterer.ts
@@ -1,50 +1,61 @@
 import * as ko from "knockout";
-import * as PaneComponents from "./Panes/PaneComponents";
-import * as TabComponents from "./Tabs/TabComponents";
-import { CollapsiblePanelComponent } from "./Controls/CollapsiblePanel/CollapsiblePanelComponent";
 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 { NewVertexComponent } from "./Graph/NewVertexComponent/NewVertexComponent";
+import * as PaneComponents from "./Panes/PaneComponents";
+import ConflictsTab from "./Tabs/ConflictsTab";
+import DatabaseSettingsTab from "./Tabs/DatabaseSettingsTab";
+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 { DatabaseSettingsTabV2, SettingsTabV2 } from "./Tabs/SettingsTabV2";
+import StoredProcedureTab from "./Tabs/StoredProcedureTab";
+import TabsManagerTemplate from "./Tabs/TabsManager.html";
+import TerminalTab from "./Tabs/TerminalTab";
+import TriggerTab from "./Tabs/TriggerTab";
+import UserDefinedFunctionTab from "./Tabs/UserDefinedFunctionTab";

 ko.components.register("input-typeahead", new InputTypeaheadComponent());
 ko.components.register("new-vertex-form", NewVertexComponent);
 ko.components.register("error-display", new ErrorDisplayComponent());
 ko.components.register("graph-style", GraphStyleComponent);
-ko.components.register("collapsible-panel", new CollapsiblePanelComponent());
 ko.components.register("editor", new EditorComponent());
 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());
+ko.components.register("tabs-manager", { template: TabsManagerTemplate });

 // Collection Tabs
-ko.components.register("documents-tab", new TabComponents.DocumentsTab());
-ko.components.register("mongo-documents-tab", new TabComponents.MongoDocumentsTab());
-ko.components.register("stored-procedure-tab", new TabComponents.StoredProcedureTab());
-ko.components.register("trigger-tab", new TabComponents.TriggerTab());
-ko.components.register("user-defined-function-tab", new TabComponents.UserDefinedFunctionTab());
-ko.components.register("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("spark-master-tab", new TabComponents.SparkMasterTab());
-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());
+[
+  DocumentsTab,
+  StoredProcedureTab,
+  TriggerTab,
+  UserDefinedFunctionTab,
+  SettingsTabV2,
+  QueryTab,
+  QueryTablesTab,
+  GraphTab,
+  MongoShellTab,
+  ConflictsTab,
+  NotebookTabV2,
+  TerminalTab,
+  GalleryTab,
+  NotebookViewerTab,
+  DatabaseSettingsTab,
+  DatabaseSettingsTabV2,
+].forEach(({ component: { name, template } }) => ko.components.register(name, { template }));

 // Panes
 ko.components.register("add-database-pane", new PaneComponents.AddDatabasePaneComponent());
@@ -53,10 +64,7 @@ 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());
@@ -64,14 +72,9 @@ ko.components.register("table-edit-entity-pane", new PaneComponents.TableEditEnt
 ko.components.register("table-column-options-pane", new PaneComponents.TableColumnOptionsPaneComponent());
 ko.components.register("table-query-select-pane", new PaneComponents.TableQuerySelectPaneComponent());
 ko.components.register("cassandra-add-collection-pane", new PaneComponents.CassandraAddCollectionPaneComponent());
-ko.components.register("settings-pane", new PaneComponents.SettingsPaneComponent());
-ko.components.register("execute-sproc-params-pane", new PaneComponents.ExecuteSprocParamsComponent());
-ko.components.register("renew-adhoc-access-pane", new PaneComponents.RenewAdHocAccessPane());
-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/Show More
+++ b/Show More