Bump jpeg-js from 0.4.3 to 0.4.4

Bumps [jpeg-js](https://github.com/eugeneware/jpeg-js) from 0.4.3 to 0.4.4. - [Release notes](https://github.com/eugeneware/jpeg-js/releases) - [Commits](https://github.com/eugeneware/jpeg-js/compare/v0.4.3...v0.4.4) --- updated-dependencies: - dependency-name: jpeg-js dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>
Enable phoenix based of allowed subscription and flights (#1291 )
2025-12-23 10:51:30 +00:00 · 2022-06-17 02:45:44 +00:00 · 2022-06-15 17:08:06 -04:00 · 2022-06-09 02:30:49 +05:30 · 2022-06-08 10:16:43 -07:00 · 2022-06-03 13:19:29 -07:00
441 changed files with 58024 additions and 28230 deletions
--- a/.env.example
+++ b/.env.example
@@ -1,16 +1 @@
-PORTAL_RUNNER_USERNAME=
-PORTAL_RUNNER_PASSWORD=
-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=
-NOTEBOOKS_TEST_RUNNER_CLIENT_SECRET=
-CASSANDRA_CONNECTION_STRING=
-MONGO_CONNECTION_STRING=
-TABLES_CONNECTION_STRING=
 DATA_EXPLORER_ENDPOINT=https://localhost:1234/hostedExplorer.html
--- a/.eslintignore
+++ b/.eslintignore
@@ -21,16 +21,8 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Config.ts
-src/Contracts/ActionContracts.ts
-src/Contracts/DataModels.ts
-src/Contracts/Diagnostics.ts
-src/Contracts/ExplorerContracts.ts
-src/Contracts/Versions.ts
-src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
-src/Controls/Heatmap/HeatmapDatatypes.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -44,35 +36,14 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.ts
-src/Explorer/ContextMenuButtonFactory.ts
-src/Explorer/Controls/CollapsiblePanel/CollapsiblePanelComponent.ts
 src/Explorer/Controls/DiffEditor/DiffEditorComponent.ts
-src/Explorer/Controls/DynamicList/DynamicList.test.ts
-src/Explorer/Controls/DynamicList/DynamicListComponent.ts
+
 src/Explorer/Controls/Editor/EditorComponent.ts
-src/Explorer/Controls/ErrorDisplayComponent/ErrorDisplayComponent.ts
-src/Explorer/Controls/InputTypeahead/InputTypeahead.ts
 src/Explorer/Controls/JsonEditor/JsonEditorComponent.ts
-src/Explorer/Controls/Notebook/NotebookAppMessageHandler.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponent.ts
-src/Explorer/Controls/ThroughputInput/ThroughputInputComponentAutoPilotV3.ts
-src/Explorer/Controls/Toolbar/IToolbarAction.ts
-src/Explorer/Controls/Toolbar/IToolbarDisplayable.ts
-src/Explorer/Controls/Toolbar/IToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/IToolbarItem.ts
-src/Explorer/Controls/Toolbar/IToolbarSeperator.ts
-src/Explorer/Controls/Toolbar/IToolbarToggle.ts
-src/Explorer/Controls/Toolbar/KeyCodes.ts
-src/Explorer/Controls/Toolbar/Toolbar.ts
-src/Explorer/Controls/Toolbar/ToolbarAction.ts
-src/Explorer/Controls/Toolbar/ToolbarDropDown.ts
-src/Explorer/Controls/Toolbar/ToolbarToggle.ts
-src/Explorer/Controls/Toolbar/Utilities.ts
 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.tsx
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.test.ts
 src/Explorer/Graph/GraphExplorerComponent/ArraysByKeyCache.ts
 src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts
@@ -84,11 +55,6 @@ src/Explorer/Graph/GraphExplorerComponent/GremlinClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinClient.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.test.ts
 src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
-# src/Explorer/Graph/GraphStyleComponent/GraphStyle.test.ts
-# src/Explorer/Graph/GraphStyleComponent/GraphStyleComponent.ts
-
-src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.test.ts
-src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
 src/Explorer/Notebook/NotebookClientV2.ts
@@ -105,40 +71,19 @@ src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
 src/Explorer/Notebook/NotebookContentItem.ts
 src/Explorer/Notebook/NotebookUtil.ts
-src/Explorer/OpenActions.test.ts
-src/Explorer/OpenActions.ts
 src/Explorer/OpenActionsStubs.ts
-src/Explorer/Panes/AddDatabasePane.ts
-src/Explorer/Panes/AddDatabasePane.test.ts
-src/Explorer/Panes/BrowseQueriesPane.ts
-src/Explorer/Panes/ContextualPaneBase.ts
-# src/Explorer/Panes/GraphStylingPane.ts
-# src/Explorer/Panes/NewVertexPane.ts
-src/Explorer/Panes/RenewAdHocAccessPane.ts
-src/Explorer/Panes/SetupNotebooksPane.ts
-src/Explorer/Panes/SwitchDirectoryPane.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
 src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
-src/Explorer/Tables/Constants.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts
 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/DataTableViewModel.ts
-src/Explorer/Tables/DataTable/TableCommands.ts
-src/Explorer/Tables/DataTable/TableEntityCache.ts
 src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
-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/QueryBuilderViewModel.ts
-src/Explorer/Tables/QueryBuilder/QueryClauseViewModel.ts
-src/Explorer/Tables/QueryBuilder/QueryViewModel.ts
 src/Explorer/Tables/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
@@ -148,170 +93,55 @@ src/Explorer/Tabs/DocumentsTab.test.ts
 src/Explorer/Tabs/DocumentsTab.ts
 src/Explorer/Tabs/GraphTab.ts
 src/Explorer/Tabs/MongoDocumentsTab.ts
-src/Explorer/Tabs/MongoQueryTab.ts
-src/Explorer/Tabs/MongoShellTab.ts
 src/Explorer/Tabs/NotebookV2Tab.ts
-src/Explorer/Tabs/QueryTab.test.ts
-src/Explorer/Tabs/QueryTab.ts
-src/Explorer/Tabs/QueryTablesTab.ts
 src/Explorer/Tabs/ScriptTabBase.ts
-src/Explorer/Tabs/StoredProcedureTab.ts
 src/Explorer/Tabs/TabComponents.ts
 src/Explorer/Tabs/TabsBase.ts
 src/Explorer/Tabs/TriggerTab.ts
 src/Explorer/Tabs/UserDefinedFunctionTab.ts
 src/Explorer/Tree/AccessibleVerticalList.ts
-src/Explorer/Tree/Collection.test.ts
 src/Explorer/Tree/Collection.ts
 src/Explorer/Tree/ConflictId.ts
-src/Explorer/Tree/Database.ts
 src/Explorer/Tree/DocumentId.ts
 src/Explorer/Tree/ObjectId.ts
 src/Explorer/Tree/ResourceTokenCollection.ts
 src/Explorer/Tree/StoredProcedure.ts
 src/Explorer/Tree/TreeComponents.ts
-src/Explorer/Tree/Trigger.ts
-src/Explorer/Tree/UserDefinedFunction.ts
 src/Explorer/WaitsForTemplateViewModel.ts
 src/GitHub/GitHubClient.test.ts
 src/GitHub/GitHubClient.ts
-src/GitHub/GitHubConnector.ts
-src/GitHub/GitHubContentProvider.test.ts
-src/GitHub/GitHubContentProvider.ts
-src/GitHub/GitHubOAuthService.ts
-src/HostedExplorer.ts
 src/Index.ts
-src/Juno/JunoClient.test.ts
-src/Juno/JunoClient.ts
-src/Main.ts
-src/NotebookWorkspaceManager/NotebookWorkspaceManager.ts
-src/NotebookWorkspaceManager/NotebookWorkspaceResourceProviderMockClients.ts
-src/Platform/Emulator/DataAccessUtility.ts
-src/Platform/Emulator/ExplorerFactory.ts
-src/Platform/Emulator/Main.ts
-src/Platform/Emulator/NotificationsClient.ts
-src/Platform/Hosted/ArmResourceUtils.ts
 src/Platform/Hosted/Authorization.ts
-src/Platform/Hosted/DataAccessUtility.ts
-src/Platform/Hosted/ExplorerFactory.ts
-src/Platform/Hosted/Helpers/ConnectionStringParser.test.ts
-src/Platform/Hosted/Main.ts
-src/Platform/Hosted/Maint.test.ts
-src/Platform/Hosted/NotificationsClient.ts
-src/Platform/Portal/DataAccessUtility.ts
-src/Platform/Portal/ExplorerFactory.ts
-src/Platform/Portal/Main.ts
-src/Platform/Portal/NotificationsClient.ts
-src/PlatformType.ts
 src/ReactDevTools.ts
-src/ResourceProvider/IResourceProviderClient.test.ts
-src/ResourceProvider/IResourceProviderClient.ts
-src/ResourceProvider/ResourceProviderClient.ts
-src/ResourceProvider/ResourceProviderClientFactory.ts
-src/RouteHandlers/RouteHandler.ts
-src/RouteHandlers/TabRouteHandler.test.ts
-src/RouteHandlers/TabRouteHandler.ts
 src/Shared/Constants.ts
 src/Shared/DefaultExperienceUtility.test.ts
 src/Shared/DefaultExperienceUtility.ts
-src/Shared/ExplorerSettings.ts
-src/Shared/PriceEstimateCalculator.ts
-src/Shared/StorageUtility.test.ts
-src/Shared/StorageUtility.ts
 src/Shared/appInsights.ts
 src/SparkClusterManager/ArcadiaResourceManager.ts
 src/SparkClusterManager/SparkClusterManager.ts
 src/Terminal/JupyterLabAppFactory.ts
 src/Terminal/NotebookAppContracts.d.ts
-src/Terminal/index.ts
-src/TokenProviders/PortalTokenProvider.ts
-src/TokenProviders/TokenProviderFactory.ts
-src/Utils/PricingUtils.test.ts
-src/Utils/QueryUtils.test.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
-src/Explorer/Controls/AccessibleElement/AccessibleElement.tsx
-src/Explorer/Controls/Accordion/AccordionComponent.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.test.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponent.tsx
-src/Explorer/Controls/AccountSwitch/AccountSwitchComponentAdapter.tsx
-src/Explorer/Controls/Arcadia/ArcadiaMenuPicker.tsx
-src/Explorer/Controls/CollapsiblePanel/CollapsiblePanel.tsx
-src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
-src/Explorer/Controls/DialogReactComponent/DialogComponent.tsx
-src/Explorer/Controls/DialogReactComponent/DialogComponentAdapter.tsx
-src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.test.tsx
-src/Explorer/Controls/Directory/DefaultDirectoryDropdownComponent.tsx
-src/Explorer/Controls/Directory/DirectoryComponentAdapter.tsx
-src/Explorer/Controls/Directory/DirectoryListComponent.test.tsx
-src/Explorer/Controls/Directory/DirectoryListComponent.tsx
-src/Explorer/Controls/Editor/EditorReact.tsx
 src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
 src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
-src/Explorer/Controls/NotebookViewer/NotebookMetadataComponent.tsx
-src/NotebookViewer/NotebookViewer.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
-src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponentAdapter.tsx
-src/Explorer/Controls/ResizeSensorReactComponent/ResizeSensorComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponent.tsx
-src/Explorer/Controls/Spark/ClusterSettingsComponentAdapter.tsx
-src/Explorer/Controls/Tabs/TabComponent.tsx
-src/Explorer/Controls/TreeComponent/TreeComponent.test.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNeighborsComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.test.tsx
-src/Explorer/Graph/GraphExplorerComponent/EditorNodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphExplorerAdapter.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
-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/CommandBarUtil.tsx
-src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.test.tsx
-src/Explorer/Notebook/NotebookComponent/NotebookComponent.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
-src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
 src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
-src/Explorer/Notebook/NotebookComponent/contents/file/index.tsx
-src/Explorer/Notebook/NotebookComponent/contents/file/text-file.tsx
 src/Explorer/Notebook/NotebookComponent/contents/index.tsx
-src/Explorer/Notebook/NotebookRenderer/AzureTheme.tsx
-src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
-src/Explorer/Notebook/NotebookRenderer/Prompt.tsx
-src/Explorer/Notebook/NotebookRenderer/PromptContent.tsx
-src/Explorer/Notebook/NotebookRenderer/StatusBar.test.tsx
-src/Explorer/Notebook/NotebookRenderer/StatusBar.tsx
-src/Explorer/Notebook/NotebookRenderer/Toolbar.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/CellCreator.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/CellLabeler.tsx
-src/Explorer/Notebook/NotebookRenderer/decorators/HoverableCell.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/kbd-shortcuts/index.tsx
 src/Explorer/Notebook/temp/inputs/connected-editors/codemirror.tsx
-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/SplashScreen.tsx
-src/Explorer/Tabs/GalleryTab.tsx
-src/Explorer/Tabs/NotebookViewerTab.tsx
-src/Explorer/Tabs/TerminalTab.tsx
 src/Explorer/Tree/ResourceTreeAdapter.tsx
-src/Explorer/Tree/ResourceTreeAdapterForResourceToken.tsx
-src/GalleryViewer/Cards/GalleryCardComponent.tsx
-src/GalleryViewer/GalleryViewer.tsx
-src/GalleryViewer/GalleryViewerComponent.tsx
 __mocks__/monaco-editor.ts
-src/Explorer/Tree/ResourceTreeAdapterForResourceToken.test.tsx
+src/Explorer/Tree/ResourceTree.tsx
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -39,7 +39,6 @@ module.exports = {
    "@typescript-eslint/switch-exhaustiveness-check": "error",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-extraneous-class": "error",
-    "no-null/no-null": "error",
    "@typescript-eslint/no-explicit-any": "error",
    "prefer-arrow/prefer-arrow-functions": ["error", { allowStandaloneDeclarations: true }],
    eqeqeq: "error",
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -92,11 +92,11 @@ jobs:
          name: dist
          path: dist/
      - name: Upload build to preview blob storage
-        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload-batch -d '$web' -s 'dist' --account-name cosmosexplorerpreview --destination-path "${{github.event.pull_request.head.sha || github.sha}}" --account-key="${PREVIEW_STORAGE_KEY}"
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
      - name: Upload preview config to blob storage
-        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --subscription cosmosdb-portalteam-generaldemo --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
+        run: az storage blob upload -c '$web' -f ./preview/config.json --account-name cosmosexplorerpreview --name "${{github.event.pull_request.head.sha || github.sha}}/config.json" --account-key="${PREVIEW_STORAGE_KEY}"
        env:
          PREVIEW_STORAGE_KEY: ${{ secrets.PREVIEW_STORAGE_KEY }}
  endtoendemulator:
@@ -143,7 +143,7 @@ jobs:
          - ./test/mongo/container.spec.ts
          - ./test/mongo/container32.spec.ts
          - ./test/selfServe/selfServeExample.spec.ts
-          - ./test/notebooks/upload.spec.ts
+          # - ./test/notebooks/upload.spec.ts // TEMP disabled since notebooks service is off
          - ./test/sql/resourceToken.spec.ts
          - ./test/tables/container.spec.ts
    steps:
--- a/.github/workflows/cleanup.yml
+++ b/.github/workflows/cleanup.yml
@@ -7,7 +7,7 @@ on:
  workflow_dispatch:
  schedule:
    # Once every hour
-    - cron: "0 * * * *"
+    - cron: "0 15 * * *"

 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -12,7 +12,8 @@
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand",
-        "--coverage", "false"
+        "--coverage",
+        "false"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
@@ -26,7 +27,8 @@
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "${fileBasenameNoExtension}",
-        "--coverage", "false",
+        "--coverage",
+        "false",
        // "--watch",
        // // --no-cache only used to make --watch work. Otherwise jest ignores the breakpoints.
        // // https://github.com/facebook/jest/issues/6683
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -22,5 +22,6 @@
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
-  }
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }
--- a/configs/mpac.json
+++ b/configs/mpac.json
@@ -1,4 +1,5 @@
 {
  "JUNO_ENDPOINT": "https://tools-staging.cosmos.azure.com",
-  "enableSchemaAnalyzer": true
+  "isTerminalEnabled" : true,
+  "isPhoenixEnabled" : true
 }
--- a/configs/prod.json
+++ b/configs/prod.json
@@ -1,3 +1,5 @@
 {
- "JUNO_ENDPOINT": "https://tools.cosmos.azure.com"
+ "JUNO_ENDPOINT": "https://tools.cosmos.azure.com",
+ "isTerminalEnabled" : false,
+ "isPhoenixEnabled" : false
 }
--- a/images/CarouselImage1.svg
+++ b/images/CarouselImage1.svg
--- a/images/CarouselImage2.svg
+++ b/images/CarouselImage2.svg
--- a/images/Clear-1.svg
+++ b/images/Clear-1.svg
--- a/images/Connect_color.svg
+++ b/images/Connect_color.svg
@@ -0,0 +1,23 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_480_185430)">
+<path d="M35.4911 6.39638L33.4106 4.31591L37.559 0.167553C37.6611 0.0654497 37.7996 0.00808785 37.944 0.00808785C38.0884 0.00808801 38.2269 0.0654482 38.329 0.167551L39.641 1.47963C39.7431 1.58173 39.8005 1.72021 39.8005 1.86461C39.8005 2.009 39.7431 2.14749 39.641 2.24959L35.4927 6.39795L35.4911 6.39638Z" fill="#32BEDD"/>
+<path d="M4.45313 33.6455L6.53988 35.7323L2.44494 39.8272C2.34367 39.9285 2.20632 39.9853 2.06311 39.9853C1.91989 39.9853 1.78254 39.9285 1.68127 39.8272L0.364478 38.5104C0.312974 38.4606 0.271905 38.401 0.243665 38.3351C0.215426 38.2692 0.20058 38.1984 0.199995 38.1267C0.19941 38.0551 0.213098 37.984 0.240258 37.9177C0.267419 37.8514 0.307509 37.7911 0.358193 37.7404L4.45313 33.6455Z" fill="#0078D4"/>
+<path d="M5.09381 25.0287C3.78099 26.3415 3.04346 28.1221 3.04346 29.9787C3.04346 31.8353 3.78099 33.6159 5.09381 34.9287C6.40664 36.2415 8.1872 36.9791 10.0438 36.9791C11.9004 36.9791 13.681 36.2415 14.9938 34.9287L18.2027 31.7176L8.30492 21.8198L5.09381 25.0287Z" fill="url(#paint0_linear_480_185430)"/>
+<path d="M17.4209 18.1581L17.6157 18.353C17.8133 18.5505 17.9242 18.8185 17.9242 19.0978C17.9242 19.3772 17.8133 19.6451 17.6157 19.8426L13.6009 23.8574L11.918 22.1745L15.9344 18.1581C16.1319 17.9606 16.3998 17.8496 16.6792 17.8496C16.9586 17.8496 17.2265 17.9606 17.424 18.1581L17.4209 18.1581Z" fill="#C3F1FF"/>
+<path d="M21.5835 22.32L21.7783 22.5149C21.9759 22.7124 22.0868 22.9803 22.0868 23.2597C22.0868 23.539 21.9759 23.807 21.7783 24.0045L17.7588 28.024L16.0759 26.3411L20.097 22.32C20.2945 22.1225 20.5624 22.0115 20.8418 22.0115C21.1212 22.0115 21.3891 22.1225 21.5866 22.32L21.5835 22.32Z" fill="#C3F1FF"/>
+<path d="M20.9363 30.0618L9.87241 18.9979C9.66673 18.7922 9.33327 18.7922 9.12759 18.9979L7.67566 20.4498C7.46999 20.6555 7.46999 20.989 7.67566 21.1946L18.7395 32.2585C18.9452 32.4642 19.2787 32.4642 19.4843 32.2585L20.9363 30.8066C21.1419 30.6009 21.1419 30.2674 20.9363 30.0618Z" fill="#5EA0EF"/>
+<path d="M34.9067 14.9711C36.2196 13.6583 36.9571 11.8777 36.9571 10.0211C36.9571 8.1645 36.2196 6.38393 34.9067 5.07111C33.5939 3.75829 31.8134 3.02075 29.9567 3.02075C28.1001 3.02075 26.3196 3.75829 25.0067 5.07111L21.7979 8.28222L31.6956 18.18L34.9067 14.9711Z" fill="#ECF4FD"/>
+<path d="M22.5828 21.8375L22.388 21.6426C22.1904 21.4451 22.0795 21.1772 22.0795 20.8978C22.0795 20.6184 22.1904 20.3505 22.388 20.153L26.4075 16.1335L28.092 17.8179L24.0677 21.8422C23.8698 22.0376 23.6025 22.1469 23.3243 22.146C23.0461 22.1451 22.7795 22.0342 22.5828 21.8375Z" fill="#ECF4FD"/>
+<path d="M18.4178 17.6802L18.2229 17.4854C18.0254 17.2878 17.9144 17.0199 17.9144 16.7406C17.9144 16.4612 18.0254 16.1933 18.2229 15.9957L22.2409 11.9778L23.9254 13.6623L19.909 17.6787C19.7115 17.8762 19.4435 17.9872 19.1642 17.9872C18.8848 17.9872 18.6169 17.8762 18.4194 17.6787L18.4178 17.6802Z" fill="#ECF4FD"/>
+<path d="M19.0642 9.93799L30.1281 21.0019C30.3338 21.2075 30.6672 21.2075 30.8729 21.0019L32.3248 19.5499C32.5305 19.3443 32.5305 19.0108 32.3248 18.8051L21.261 7.74125C21.0553 7.53557 20.7218 7.53557 20.5161 7.74125L19.0642 9.19317C18.8585 9.39885 18.8585 9.73232 19.0642 9.93799Z" fill="#ECF4FD"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_480_185430" x1="10.6227" y1="21.8179" x2="10.6227" y2="36.9783" gradientUnits="userSpaceOnUse">
+<stop stop-color="#5EA0EF"/>
+<stop offset="0.997" stop-color="#0078D4"/>
+</linearGradient>
+<clipPath id="clip0_480_185430">
+<rect width="40" height="40" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/images/Containers.svg
+++ b/images/Containers.svg
@@ -0,0 +1,8 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 34.635C24 34.8143 23.9647 34.9918 23.8961 35.1574C23.8275 35.323 23.727 35.4734 23.6002 35.6002C23.4734 35.727 23.323 35.8275 23.1574 35.8961C22.9918 35.9647 22.8143 36 22.635 36H1.365C1.18575 36 1.00825 35.9647 0.842637 35.8961C0.677028 35.8275 0.526551 35.727 0.399799 35.6002C0.273047 35.4734 0.172502 35.323 0.103904 35.1574C0.0353068 34.9918 0 34.8143 0 34.635L0 13.365C0 13.003 0.143812 12.6558 0.399799 12.3998C0.655786 12.1438 1.00298 12 1.365 12H22.635C22.997 12 23.3442 12.1438 23.6002 12.3998C23.8562 12.6558 24 13.003 24 13.365V34.635Z" fill="#005BA1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M30 28.635C30 28.997 29.8562 29.3442 29.6002 29.6002C29.3442 29.8562 28.997 30 28.635 30H7.365C7.00298 30 6.65579 29.8562 6.3998 29.6002C6.14381 29.3442 6 28.997 6 28.635V7.365C6 7.00298 6.14381 6.65579 6.3998 6.3998C6.65579 6.14381 7.00298 6 7.365 6H28.635C28.997 6 29.3442 6.14381 29.6002 6.3998C29.8562 6.65579 30 7.00298 30 7.365V28.635Z" fill="#5EA0EF"/>
+<path d="M22.635 12H6V28.635C6 28.997 6.14381 29.3442 6.3998 29.6002C6.65579 29.8562 7.00298 30 7.365 30H24V13.365C24 13.003 23.8562 12.6558 23.6002 12.3998C23.3442 12.1438 22.997 12 22.635 12Z" fill="#0078D4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M36 22.635C36 22.8143 35.9647 22.9918 35.8961 23.1574C35.8275 23.323 35.727 23.4734 35.6002 23.6002C35.4734 23.727 35.323 23.8275 35.1574 23.8961C34.9918 23.9647 34.8143 24 34.635 24H13.365C13.003 24 12.6558 23.8562 12.3998 23.6002C12.1438 23.3442 12 22.997 12 22.635V1.365C12 1.00298 12.1438 0.655786 12.3998 0.399799C12.6558 0.143812 13.003 0 13.365 0L34.635 0C34.8143 0 34.9918 0.0353068 35.1574 0.103904C35.323 0.172502 35.4734 0.273047 35.6002 0.399799C35.727 0.526551 35.8275 0.677028 35.8961 0.842637C35.9647 1.00825 36 1.18575 36 1.365V22.635Z" fill="#E6E7E8"/>
+<path d="M22.635 12H12V22.635C12 22.997 12.1438 23.3442 12.3998 23.6002C12.6558 23.8562 13.003 24 13.365 24H24V13.365C24 13.003 23.8562 12.6558 23.6002 12.3998C23.3442 12.1438 22.997 12 22.635 12Z" fill="#BCBEC0"/>
+<path d="M28.635 6H12V12H22.635C22.997 12 23.3442 12.1438 23.6002 12.3998C23.8562 12.6558 24 13.003 24 13.365V24H30V7.365C30 7.00298 29.8562 6.65579 29.6002 6.3998C29.3442 6.14381 28.997 6 28.635 6Z" fill="#D1D3D4"/>
+</svg>
--- a/images/Link_blue.svg
+++ b/images/Link_blue.svg
@@ -0,0 +1,3 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6H11V11H0V0H5V1H1V10H10V6ZM11 0V5H10V1.71094L5.35156 6.35156L4.64844 5.64844L9.28906 1H6V0H11Z" fill="#0078D4"/>
+</svg>
--- a/images/Notebooks.svg
+++ b/images/Notebooks.svg
@@ -0,0 +1,23 @@
+<svg width="32" height="36" viewBox="0 0 32 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30.1809 0H5.6045C5.45725 -2.06304e-07 5.31144 0.0290347 5.17541 0.0854435C5.03939 0.141852 4.91583 0.224528 4.81179 0.32874C4.70775 0.432952 4.62528 0.556655 4.5691 0.692771C4.51292 0.828887 4.48413 0.974745 4.48438 1.122V31.7149C4.48438 32.0121 4.60234 32.2972 4.81236 32.5075C5.02238 32.7178 5.30729 32.8361 5.6045 32.8365H30.1809C30.4781 32.8362 30.7631 32.7179 30.9731 32.5076C31.1832 32.2972 31.3011 32.0121 31.301 31.7149V1.122C31.301 0.824752 31.1831 0.53965 30.973 0.329288C30.763 0.118926 30.4781 0.000496739 30.1809 0V0Z" fill="url(#paint0_linear_1311_8669)"/>
+<path d="M16.1495 3.22485H2.17401C1.8837 3.22485 1.60528 3.34018 1.39999 3.54546C1.19471 3.75074 1.07939 4.02917 1.07939 4.31948V34.465C1.07815 34.6087 1.10524 34.7513 1.15912 34.8845C1.21299 35.0178 1.2926 35.1391 1.39338 35.2416C1.49416 35.3441 1.61414 35.4257 1.74648 35.4818C1.87881 35.5379 2.0209 35.5674 2.16464 35.5686H26.3926C26.6829 35.5686 26.9614 35.4533 27.1667 35.248C27.3719 35.0427 27.4873 34.7643 27.4873 34.474V14.5202C27.4874 14.3764 27.4591 14.234 27.4042 14.1011C27.3492 13.9682 27.2686 13.8475 27.1669 13.7457C27.0653 13.644 26.9446 13.5633 26.8117 13.5082C26.6788 13.4532 26.5364 13.4249 26.3926 13.4249H18.3549C18.0642 13.422 17.7865 13.3045 17.5819 13.098C17.3774 12.8915 17.2626 12.6126 17.2625 12.322V4.33185C17.2628 4.03998 17.1477 3.75982 16.9423 3.55245C16.7369 3.34508 16.4579 3.22733 16.166 3.22485H16.1495Z" fill="white"/>
+<path d="M16.175 3.16357H1.99513C1.69791 3.16397 1.41301 3.28232 1.20299 3.49262C0.992965 3.70292 0.875 3.98799 0.875 4.2852V34.8781C0.875 35.1753 0.992953 35.4604 1.20296 35.6708C1.41297 35.8812 1.69788 35.9996 1.99513 36.0001H26.5715C26.8687 35.9996 27.1537 35.8812 27.3637 35.6708C27.5737 35.4604 27.6916 35.1753 27.6916 34.8781V14.6307C27.6916 14.3336 27.5736 14.0487 27.3635 13.8387C27.1535 13.6286 26.8686 13.5106 26.5715 13.5106H18.4134C18.1163 13.5106 17.8314 13.3926 17.6213 13.1825C17.4113 12.9724 17.2933 12.6875 17.2933 12.3905V4.2852C17.2924 3.98858 17.1744 3.70432 16.9649 3.49426C16.7555 3.2842 16.4716 3.16535 16.175 3.16357Z" fill="url(#paint1_linear_1311_8669)"/>
+<path d="M27.2629 13.7335L16.9065 3.4082V11.8213C16.9035 12.3253 17.1007 12.8097 17.4548 13.1684C17.8088 13.527 18.2907 13.7304 18.7947 13.7338L27.2629 13.7335Z" fill="#83B9F9"/>
+<path d="M17.744 16.4092H4.76108C4.47196 16.4092 4.23608 16.5543 4.23608 16.7332V17.5323C4.23608 17.7112 4.47046 17.8559 4.76108 17.8559H17.744C18.0331 17.8559 18.269 17.7112 18.269 17.5323V16.7332C18.2675 16.5543 18.0331 16.4092 17.744 16.4092Z" fill="#83B9F9"/>
+<path d="M17.744 20.7498H4.76108C4.47196 20.7498 4.23608 20.8945 4.23608 21.0734V21.8725C4.23608 22.0514 4.47046 22.1965 4.76108 22.1965H17.744C18.0331 22.1965 18.269 22.0514 18.269 21.8725V21.0749C18.2675 20.8945 18.0331 20.7498 17.744 20.7498Z" fill="#83B9F9"/>
+<path d="M17.744 25.0906H4.76108C4.47196 25.0906 4.23608 25.2353 4.23608 25.4142V26.2126C4.23608 26.3915 4.47046 26.5366 4.76108 26.5366H17.744C18.0331 26.5366 18.269 26.3915 18.269 26.2126V25.4142C18.2675 25.2353 18.0331 25.0906 17.744 25.0906Z" fill="#83B9F9"/>
+<path d="M12.4729 29.4312H4.90167C4.53492 29.4312 4.23755 29.5759 4.23755 29.7548V30.5539C4.23755 30.7328 4.53492 30.8779 4.90167 30.8779H12.4729C12.8397 30.8779 13.137 30.7328 13.137 30.5539V29.7548C13.1374 29.5759 12.8397 29.4312 12.4729 29.4312Z" fill="#83B9F9"/>
+<defs>
+<linearGradient id="paint0_linear_1311_8669" x1="17.8925" y1="2.19225" x2="17.8925" y2="35.1225" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DCDCDC"/>
+<stop offset="1" stop-color="#AAAAAA"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1311_8669" x1="14.2831" y1="5.35582" x2="14.2831" y2="38.2857" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0078D7"/>
+<stop offset="0.327" stop-color="#0076D4"/>
+<stop offset="0.576" stop-color="#0071CA"/>
+<stop offset="0.799" stop-color="#0068BA"/>
+<stop offset="1" stop-color="#005BA4"/>
+</linearGradient>
+</defs>
+</svg>
--- a/images/Quickstart_Lightning.svg
+++ b/images/Quickstart_Lightning.svg
@@ -0,0 +1,11 @@
+<svg width="30" height="34" viewBox="0 0 30 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.6457 18.9089H0.67782C0.520018 18.9215 0.361625 18.8893 0.235445 18.819C0.109264 18.7487 0.0249634 18.6456 0 18.5312C0.000766863 18.4748 0.0212497 18.4196 0.0595033 18.3706L14.4179 0.229509C14.4859 0.156313 14.5784 0.0970502 14.6866 0.0573734C14.7949 0.0176966 14.9152 -0.00107025 15.0362 0.00286318H29.1877C29.3456 -0.0102086 29.5043 0.0218054 29.6306 0.0922084C29.757 0.162611 29.8411 0.26595 29.8655 0.380607C29.8655 0.463721 29.823 0.54385 29.7465 0.605364L12.8941 14.7991H29.3222C29.48 14.7865 29.6384 14.8187 29.7646 14.889C29.8907 14.9593 29.975 15.0624 30 15.1768C29.998 15.2265 29.9814 15.2752 29.9516 15.3198C29.9217 15.3645 29.8791 15.4039 29.8267 15.4356L2.51725 33.5994C2.25854 33.6957 0.447568 34.6608 1.33236 33.1952L12.6457 18.9089Z" fill="url(#paint0_radial_480_182017)"/>
+<defs>
+<radialGradient id="paint0_radial_480_182017" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(15.0039 17.0718) scale(23.6442 13.4446)">
+<stop offset="0.196" stop-color="#FFD70F"/>
+<stop offset="0.438" stop-color="#FFCB12"/>
+<stop offset="0.873" stop-color="#FEAC19"/>
+<stop offset="1" stop-color="#FEA11B"/>
+</radialGradient>
+</defs>
+</svg>
--- a/images/check-1.svg
+++ b/images/check-1.svg
--- a/images/close-black.svg
+++ b/images/close-black.svg
@@ -1,16 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg
-    width="16" 
-    height="16"
-     version="1.1" 
-    viewBox="0 0 16 16" 
-    xmlns="http://www.w3.org/2000/svg" 
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <path 
-        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z" 
-        transform="scale(0.5)" 
-        fill="#000"
-        stroke="#CCC" 
-        >
+    <path
+        d="M14,2.691l-5.301,5.309l5.301,5.309l-0.691,0.691l-5.309,-5.301l-5.309,5.301l-0.691,-0.691l5.301,-5.309l-5.301,-5.309l0.691,-0.691l5.309,5.301l5.309,-5.301l0.691,0.691Z"
+        transform="scale(0.5)" fill="#000" stroke="#000">
    </path>
 </svg>
--- a/images/edit-1.svg
+++ b/images/edit-1.svg
--- a/jest.config.js
+++ b/jest.config.js
@@ -37,8 +37,8 @@ module.exports = {
    global: {
      branches: 25,
      functions: 25,
-      lines: 30,
-      statements: 30,
+      lines: 29,
+      statements: 29,
    },
  },

@@ -129,6 +129,8 @@ module.exports = {
  // The test environment that will be used for testing
  // testEnvironment: "jest-environment-jsdom",

+  modulePaths: ["node_modules", "<rootDir>/src"],
+
  // Options that will be passed to the testEnvironment
  // testEnvironmentOptions: {},

--- a/less/Common/Constants.less
+++ b/less/Common/Constants.less
@@ -9,6 +9,7 @@

@DataExplorerFont: wf_segoe-ui_normal, "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
@SemiboldFont: "Segoe UI Semibold", "Segoe UI", "Segoe WP", Tahoma, Arial, sans-serif;
+@GrayScale: "grayscale()";

@xSmallFontSize: 4px;
@smallFontSize: 8px;
--- a/less/documentDB.less
+++ b/less/documentDB.less
@@ -724,45 +724,24 @@ execute-sproc-params-pane {

  .results-container,
  .errors-container {
-    padding: @MediumSpace 0px 0px @MediumSpace;
    height: 100%;
    .flex-display();
    .flex-direction();
    overflow: hidden;

-    .toggles {
-      height: @ToggleHeight;
-      width: @ToggleWidth;
-      margin-left: @MediumSpace;
-
-      &:focus {
-        .focus();
-      }
-
-      .tab {
-        margin-right: @MediumSpace;
-      }
-
-      .toggleSwitch {
-        .toggleSwitch();
-      }
-
-      .selectedToggle {
-        .selectedToggle();
-      }
-
-      .unselectedToggle {
-        .unselectedToggle();
-      }
-    }
-
    .enterInputParameters {
      padding: @LargeSpace @MediumSpace;
    }
+
+    div[role="tabpanel"] {
+      height: 100%;
+      padding-bottom: 50px;
+    }
  }

  .errors-container {
    padding-left: (2 * @MediumSpace);
+    padding: @MediumSpace 0px 0px @MediumSpace;
    .errors-header {
      font-weight: 700;
      font-size: @DefaultFontSize;
@@ -2098,7 +2077,7 @@ a:link {
 .resourceTreeAndTabs {
  display: flex;
  flex: 1 1 auto;
-  overflow-x: auto;
+  overflow-x: clip;
  overflow-y: auto;
  height: 100%;
 }
@@ -2266,7 +2245,7 @@ a:link {
 }

 .refreshColHeader {
-  padding: 3px 6px 6px 6px;
+  padding: 3px 6px 10px 0px !important;
 }

 .refreshColHeader:hover {
@@ -2378,6 +2357,8 @@ a:link {
  height: 100%;
  flex-grow: 1;
  overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }

 .tabs {
@@ -2853,6 +2834,8 @@ a:link {

 #explorerNotificationConsole {
  z-index: 1000;
+  overflow-y: auto;
+  overflow-x: clip;
 }

 .uniqueIndexesContainer {
@@ -2886,31 +2869,39 @@ a:link {
  }
 }

-settings-pane {
-  .settingsSection {
-    border-bottom: 1px solid @BaseMedium;
-    margin-right: 24px;
-    padding: @MediumSpace 0px;
+.settingsSection {
+  border-bottom: 1px solid @BaseMedium;
+  margin-right: 24px;
+  padding: @MediumSpace 0px;

-    &:first-child {
-      padding-top: 0px;
-    }
+  &:first-child {
+    padding-top: 0px;
+    padding-bottom: 10px;
+  }

-    &:last-child {
-      border-bottom: none;
-    }
+  &:last-child {
+    border-bottom: none;
+  }

-    .settingsSectionPart {
-      padding-left: 8px;
-    }
+  .settingsSectionPart {
+    padding-left: 8px;
+  }

-    .settingsSectionLabel {
-      margin-bottom: @DefaultSpace;
-    }
+  .settingsSectionLabel {
+    margin-bottom: @DefaultSpace;
+    margin-right: 5px;
+  }

-    .pageOptionsPart {
-      padding-bottom: @MediumSpace;
-    }
+  .pageOptionsPart {
+    padding-bottom: @MediumSpace;
+  }
+
+  .legendLabel {
+    border-bottom: 0px;
+    width: auto;
+    font-size: @mediumFontSize;
+    display: inline !important;
+    float: left;
  }
 }

@@ -3088,4 +3079,11 @@ settings-pane {
 .hiddenMain {
  display: none;
  height: 0px;
-}
+}
+.spinner {
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  background: white;
+  height: 100%;
+}
--- a/less/forms.less
+++ b/less/forms.less
@@ -200,4 +200,12 @@

 .migration:disabled {
    background-color: #ccc;
+}
+
+.trigger-field {
+    width: 40%;
+    margin-top: 10px
+}
+.trigger-form {
+    padding: 10px 30px 10px 30px;
 }
--- a/less/resourceTree.less
+++ b/less/resourceTree.less
@@ -2,6 +2,7 @@

 .dataResourceTree {
  margin-left: @MediumSpace;
+  overflow: auto;

  .databaseHeader {
    font-size: 14px;
@@ -18,6 +19,10 @@
  .notebookHeader {
    font-size: 12px;
  }
+
+  .clickDisabled {
+    pointer-events: none;
+  }
 }


--- a/less/tree.less
+++ b/less/tree.less
@@ -1,273 +1,270 @@
@import "./Common/Constants";

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

 .resourceTreeScroll {
-    height: 100%;
-    display: flex;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding-right: 10px;
+  height: 100%;
+  display: flex;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 10px;
 }

 .userSelectNone {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
 }

 .treeHovermargin {
-    margin-left: 16px;
+  margin-left: 16px;
 }

 .highlight {
-    padding: @SmallSpace 2px;
-    outline: 0;
+  padding: @SmallSpace 2px;
+  outline: 0;

-    &:hover {
-        .hover();
-    }
+  &:hover {
+    .hover();
+  }

-    &:active {
-        .active();
-    }
+  &:active {
+    .active();
+  }

-    &:focus {
-        .focus();
-    }
+  &:focus {
+    .focus();
+  }
 }

 .contextmenushowing {
-    background-color: #EEE;
+  background-color: #eee;
 }

 .collectionstree {
-    width: 100%;
-    margin-top: @DefaultSpace;
+  width: 100%;
+  margin-top: @DefaultSpace;

+  .databaseList {
+    list-style-type: none;
+    padding-left: 0px;

-    .databaseList {
-        list-style-type: none;
-        padding-left: 0px;
-
-        .collectionList {
-            padding-left:(2 * @MediumSpace);
-        }
-
-        .collectionChildList {
-            padding-left: @LargeSpace;
-        }
-
-        .databaseDocuments {
-            padding-left: (5 * @MediumSpace);
-        }
+    .collectionList {
+      padding-left: (2 * @MediumSpace);
    }
+
+    .collectionChildList {
+      padding-left: @LargeSpace;
+    }
+
+    .databaseDocuments {
+      padding-left: (5 * @MediumSpace);
+    }
+  }
 }

 .pointerCursor {
-    cursor: pointer;
+  cursor: pointer;
 }

 .menuEllipsis {
-    padding-right: 6px;
-    font-weight: bold;
-    font-size: 18px;
-    position: relative;
-    top: -5px;
-    left: 0px;
-    float: right;
-    display: none;
-    padding-left: 6px!important;
-    line-height: @TreeLineHeight;
+  padding-right: 6px;
+  font-weight: bold;
+  font-size: 18px;
+  position: relative;
+  top: -5px;
+  left: 0px;
+  float: right;
+  display: none;
+  padding-left: 6px !important;
+  line-height: @TreeLineHeight;
 }

 .databaseMenu {
-    .flex-display();
+  .flex-display();
 }

 .databaseMenu:hover .menuEllipsis,
 .databaseMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseCollChildTextOverflow {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-    flex: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  flex: 1;
 }

 .collectionMenu {
-    .flex-display();
+  .flex-display();
 }

 .collectionMenu:hover .menuEllipsis,
 .collectionMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .documentsMenu:hover .menuEllipsis,
 .documentsMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .treeChildMenu {
-    display: flex;
+  display: flex;
 }

 .storedProcedureMenu:hover .menuEllipsis,
 .storedProcedureMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .childMenu {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    padding-left: (6 * @MediumSpace);
-    width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-left: (6 * @MediumSpace);
+  width: 100%;
 }

 .storedChildMenu:hover .menuEllipsis,
 .storedChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .contextmenu6 {
-    top: -29px;
+  top: -29px;
 }

 .userDefinedMenu:hover .contextmenu6 {
-    display: block;
+  display: block;
 }

 .userDefinedchildMenu:hover .menuEllipsis,
 .userDefinedchildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersMenu:hover .menuEllipsis,
 .triggersMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .triggersChildMenu:hover .menuEllipsis,
 .triggersChildMenu:focus .menuEllipsis {
-    display: block;
+  display: block;
 }

 .databaseId {
-    font-size: 14px;
+  font-size: 14px;
 }

 .storedUdfTriggerMenu {
-    padding-left: 0px;
+  padding-left: 0px;
 }

 .collectionstree img {
-    width: 16px;
-    height: 16px;
-    vertical-align: text-top;
+  width: 16px;
+  height: 16px;
+  vertical-align: text-top;
 }

 img.collectionsTreeCollapseExpand {
-    width: 10px;
-    height: 10px;
-    vertical-align: middle;
-    margin-bottom: 5px;
+  width: 10px;
+  height: 10px;
+  vertical-align: middle;
+  margin-bottom: 5px;
 }

 .collapsed::before {
-    content: "\23F5";
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F5";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .expanded::before {
-    content: '\23F7';
-    margin-left: 0px;
-    font-size: 15px;
+  content: "\23F7";
+  margin-left: 0px;
+  font-size: 15px;
 }

 .collectionMenuChildren {
-    padding-left: 42px;
+  padding-left: 42px;
 }

 .main-nav {
-    width: 100vh;
-    height: 40px;
-    background: white;
-    transform-origin: left top;
-    -webkit-transform-origin: left top;
-    -ms-transform-origin: left top;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
-    border-bottom: 1px solid #CCC;
+  width: 100vh;
+  height: 40px;
+  background: white;
+  transform-origin: left top;
+  -webkit-transform-origin: left top;
+  -ms-transform-origin: left top;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
+  border-bottom: 1px solid #ccc;
 }

 .main-nav-img {
-    width: 16px;
-    height: 16px;
-    margin: -32px 0 0 0;
-    transform: rotate(-90deg) translateX(-100%);
-    -webkit-transform: rotate(-90deg) translateX(-100%);
-    -ms-transform: rotate(-90deg) translateX(-100%);
+  width: 16px;
+  height: 16px;
+  margin: -32px 0 0 0;
+  transform: rotate(-90deg) translateX(-100%);
+  -webkit-transform: rotate(-90deg) translateX(-100%);
+  -ms-transform: rotate(-90deg) translateX(-100%);
 }

 .main-nav-img.main-nav-sub-img {
-    width: 16px;
-    height: 16px;
-    margin: 0px 0px 0 0;
-    transform: rotate(180deg) translateX(0%);
-    -webkit-transform: rotate(180deg) translateX(0%);
-    -ms-transform: rotate(180deg) translateX(0%);
-    position: absolute;
-    right: -8px;
-    top: 16px;
+  width: 16px;
+  height: 16px;
+  margin: 0px 0px 0 0;
+  transform: rotate(180deg) translateX(0%);
+  -webkit-transform: rotate(180deg) translateX(0%);
+  -ms-transform: rotate(180deg) translateX(0%);
+  position: absolute;
+  right: -8px;
+  top: 16px;
 }

 ul.nav {
-    margin: 0 auto;
-    margin-top: 0px;
-    margin-left: 0px;
+  margin: 0 auto;
+  margin-top: 0px;
+  margin-left: 0px;
 }

 .mini ul.nav li {
-    float: right;
-    line-height: 25px;
-    height: auto;
-    margin-top: 3px;
+  float: right;
+  line-height: 25px;
+  height: auto;
+  margin-top: 3px;
 }

 .spancolchildstyle {
-    padding: 4px;
+  padding: 4px;
 }

 .contextmenubutton {
-    float: right;
-    display: none;
+  float: right;
+  display: none;
 }

-.highlight:hover>.contextmenubutton {
-    display: unset;
+.highlight:hover > .contextmenubutton {
+  display: unset;
 }

-.highlight:hover>.contextmenubutton::after {
-    content: "\2026";
-    font-size: 12px;
+.highlight:hover > .contextmenubutton::after {
+  content: "\2026";
+  font-size: 12px;
 }

 .showEllipsis {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-}
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "main": "index.js",
  "dependencies": {
    "@azure/arm-cosmosdb": "9.1.0",
-    "@azure/cosmos": "3.10.5",
+    "@azure/cosmos": "3.16.1",
    "@azure/cosmos-language-service": "0.0.5",
    "@azure/identity": "1.2.1",
    "@azure/ms-rest-nodeauth": "3.0.7",
@@ -22,7 +22,7 @@
    "@nteract/data-explorer": "8.0.3",
    "@nteract/directory-listing": "2.0.6",
    "@nteract/dropdown-menu": "1.0.1",
-    "@nteract/editor": "10.1.2",
+    "@nteract/editor": "10.1.12",
    "@nteract/fixtures": "2.3.0",
    "@nteract/iron-icons": "1.0.0",
    "@nteract/jupyter-widgets": "2.0.0",
@@ -42,14 +42,15 @@
    "@octokit/rest": "17.9.2",
    "@phosphor/widgets": "1.9.3",
    "@testing-library/jest-dom": "5.11.9",
+    "@types/lodash": "4.14.171",
    "@types/mkdirp": "1.0.1",
    "@types/node-fetch": "2.5.7",
    "applicationinsights": "1.8.0",
    "bootstrap": "3.4.1",
    "canvas": "file:./canvas",
-    "clean-webpack-plugin": "0.1.19",
+    "clean-webpack-plugin": "3.0.0",
    "clipboard-copy": "4.0.1",
-    "copy-webpack-plugin": "6.0.2",
+    "copy-webpack-plugin": "9.0.1",
    "crossroads": "0.12.2",
    "css-element-queries": "1.1.1",
    "d3": "6.1.1",
@@ -80,15 +81,17 @@
    "plotly.js-cartesian-dist-min": "1.52.3",
    "post-robot": "10.0.42",
    "q": "1.5.1",
-    "react": "16.13.1",
+    "react": "16.14.0",
    "react-animate-height": "2.0.8",
-    "react-dnd": "9.4.0",
-    "react-dnd-html5-backend": "9.4.0",
+    "react-dnd": "14.0.2",
+    "react-dnd-html5-backend": "14.0.0",
    "react-dom": "16.13.1",
    "react-hotkeys": "2.0.0",
    "react-i18next": "11.8.5",
    "react-notification-system": "0.2.17",
    "react-redux": "7.1.3",
+    "react-splitter-layout": "4.0.0",
+    "react-youtube": "9.0.1",
    "redux": "4.0.4",
    "reflect-metadata": "0.1.13",
    "rx-jupyter": "5.5.12",
@@ -96,7 +99,7 @@
    "sanitize-html": "2.3.3",
    "styled-components": "4.3.2",
    "swr": "0.4.0",
-    "terser-webpack-plugin": "3.1.0",
+    "terser-webpack-plugin": "5.1.4",
    "underscore": "1.9.1",
    "utility-types": "3.10.0",
    "zustand": "3.5.0"
@@ -123,12 +126,15 @@
    "@types/react-dom": "17.0.3",
    "@types/react-notification-system": "0.2.39",
    "@types/react-redux": "7.1.7",
+    "@types/react-splitter-layout": "3.0.1",
    "@types/sanitize-html": "1.27.2",
    "@types/sinon": "2.3.3",
    "@types/styled-components": "5.1.1",
    "@types/underscore": "1.7.36",
+    "@types/youtube-player": "5.5.6",
    "@typescript-eslint/eslint-plugin": "4.22.0",
    "@typescript-eslint/parser": "4.22.0",
+    "@webpack-cli/serve": "1.5.2",
    "babel-jest": "24.9.0",
    "babel-loader": "8.1.0",
    "buffer": "5.1.0",
@@ -150,44 +156,45 @@
    "html-inline-css-webpack-plugin": "1.11.0",
    "html-loader": "0.5.5",
    "html-loader-jest": "0.2.1",
-    "html-webpack-plugin": "4.5.2",
-    "jest": "25.5.4",
-    "jest-canvas-mock": "2.1.0",
+    "html-webpack-plugin": "5.3.2",
+    "jest": "26.6.3",
+    "jest-canvas-mock": "2.3.1",
    "jest-playwright-preset": "1.5.1",
    "jest-trx-results-processor": "0.0.7",
    "less": "3.8.1",
    "less-loader": "4.1.0",
    "less-vars-loader": "1.1.0",
-    "mini-css-extract-plugin": "0.4.3",
+    "mini-css-extract-plugin": "2.1.0",
    "monaco-editor-webpack-plugin": "1.7.0",
    "node-fetch": "2.6.1",
-    "playwright": "1.10.0",
+    "playwright": "1.13.0",
    "prettier": "2.2.1",
+    "process": "0.11.10",
    "raw-loader": "0.5.1",
    "react-dev-utils": "11.0.4",
    "rimraf": "3.0.0",
    "sinon": "3.2.1",
    "style-loader": "0.23.0",
-    "ts-loader": "6.2.2",
+    "ts-loader": "9.2.4",
    "tslint": "5.11.0",
    "tslint-microsoft-contrib": "6.0.0",
    "typedoc": "0.20.36",
-    "typescript": "4.2.4",
+    "typescript": "4.3.4",
    "url-loader": "1.1.1",
    "wait-on": "4.0.2",
-    "webpack": "4.46.0",
-    "webpack-bundle-analyzer": "3.6.1",
-    "webpack-cli": "3.3.10",
-    "webpack-dev-server": "3.11.0"
+    "webpack": "5.47.0",
+    "webpack-bundle-analyzer": "4.4.2",
+    "webpack-cli": "4.7.2",
+    "webpack-dev-server": "3.11.2"
  },
  "scripts": {
-    "start": "node --max-old-space-size=10196 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
+    "start": "webpack serve --mode development",
    "dev": "echo \"WARNING: npm run dev has been deprecated\" && npm run build",
    "build:dataExplorer:ci": "npm run build:ci",
    "build": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:prod && npm run copyToConsumers",
    "build:ci": "npm run format:check && npm run lint && npm run compile && npm run compile:strict && npm run pack:fast",
-    "pack:prod": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode production",
-    "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
+    "pack:prod": "webpack  --mode production",
+    "pack:fast": "webpack  --mode development --progress",
    "copyToConsumers": "node copyToConsumers",
    "test": "rimraf coverage && jest",
    "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
--- a/preview/config.json
+++ b/preview/config.json
@@ -1,3 +1,4 @@
 {
-  "PROXY_PATH": "/proxy"
+  "PROXY_PATH": "/proxy",
+  "msalRedirectURI": "https://cosmos-explorer-preview.azurewebsites.net/"
 }
--- a/preview/index.js
+++ b/preview/index.js
@@ -62,6 +62,17 @@ app.get("/pull/:pr(\\d+)", (req, res) => {
    })
    .catch(() => res.sendStatus(500));
 });
+app.get("/", (req, res) => {
+  fetch("https://api.github.com/repos/Azure/cosmos-explorer/branches/master")
+    .then((response) => response.json())
+    .then(({ commit: { sha } }) => {
+      const explorer = new URL(
+        "https://cosmos-explorer-preview.azurewebsites.net/commit/" + sha + "/hostedExplorer.html"
+      );
+      return res.redirect(explorer.href);
+    })
+    .catch(() => res.sendStatus(500));
+});

 app.listen(port, () => {
  console.log(`Example app listening on port: ${port}`);
--- a/preview/package.json
+++ b/preview/package.json
@@ -4,7 +4,7 @@
  "description": "",
  "main": "index.js",
  "scripts": {
-    "deploy": "az webapp up -n cosmos-explorer-preview --subscription cosmosdb-portalteam-generaldemo -g stfaul",
+    "deploy": "az webapp up --name \"cosmos-explorer-preview\" --subscription \"cosmosdb-portalteam-generaltest-msft\" --resource-group \"stfaul\"",
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
@@ -15,4 +15,4 @@
    "http-proxy-middleware": "^1.1.0",
    "node-fetch": "^2.6.1"
  }
-}
+}
--- a/sampleData/sqlSampleData.json
+++ b/sampleData/sqlSampleData.json
@@ -1,26 +1,25 @@
 {
-  "databaseId": "SampleDB",
-  "offerThroughput": 400,
-  "databaseLevelThroughput": false,
-  "collectionId": "Persons",
-  "createNewDatabase": true,
-  "partitionKey": { "kind": "Hash", "paths": ["/firstname"], "version": 1 },
  "data": [
-    {
-      "firstname": "Eva",
-      "age": 44
-    },
-    {
-      "firstname": "Véronique",
-      "age": 50
-    },
-    {
-      "firstname": "亜妃子",
-      "age": 5
-    },
-    {
-      "firstname": "John",
-      "age": 23
-    }
+    { "address": "2007, NE 37TH PL" },
+    { "address": "11635, SE MAY CREEK PARK DR" },
+    { "address": "8923, 133RD AVE SE" },
+    { "address": "1124, N 33RD ST" },
+    { "address": "4288, 131ST PL SE" },
+    { "address": "10900, SE 66TH ST" },
+    { "address": "6260, 139TH AVE NE" },
+    { "address": "13427, NE SPRING BLVD" },
+    { "address": "13812, NE SPRING BLVD" },
+    { "address": "5029, 159TH PL SE" },
+    { "address": "8604, 117TH AVE SE" },
+    { "address": "1561, 139TH LN NE" },
+    { "address": "1575, 139TH CT NE" },
+    { "address": "13901, NE 15TH CT" },
+    { "address": "16365, NE 12TH PL" },
+    { "address": "12226, NE 37TH ST" },
+    { "address": "4021, 129TH CT SE" },
+    { "address": "1455, 159TH PL NE" },
+    { "address": "15825, NE 14TH RD" },
+    { "address": "1418, 157TH CT NE" },
+    { "address": "889, 131ST PL NE" }
  ]
 }
--- a/src/Common/CollapsedResourceTree.tsx
+++ b/src/Common/CollapsedResourceTree.tsx
@@ -1,6 +1,7 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import { userContext } from "../UserContext";
+import { NormalizedEventKey } from "./Constants";

 export interface CollapsedResourceTreeProps {
  toggleLeftPaneExpanded: () => void;
@@ -11,6 +12,21 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
  toggleLeftPaneExpanded,
  isLeftPaneExpanded,
 }: CollapsedResourceTreeProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (focusButton.current) {
+      focusButton.current.focus();
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
+
  return (
    <div id="mini" className={!isLeftPaneExpanded ? "mini toggle-mini" : "hiddenMain"}>
      <div className="main-nav nav">
@@ -21,11 +37,14 @@ export const CollapsedResourceTree: FunctionComponent<CollapsedResourceTreeProps
            role="button"
            tabIndex={0}
            aria-label="Expand Tree"
+            onClick={toggleLeftPaneExpanded}
+            onKeyPress={onKeyPressToggleLeftPaneExpanded}
+            ref={focusButton}
          >
-            <span className="leftarrowCollapsed" onClick={toggleLeftPaneExpanded}>
+            <span className="leftarrowCollapsed">
              <img className="arrowCollapsed" src={arrowLeftImg} alt="Expand" />
            </span>
-            <span className="collectionCollapsed" onClick={toggleLeftPaneExpanded}>
+            <span className="collectionCollapsed">
              <span>{userContext.apiType} API</span>
            </span>
          </li>
--- a/src/Common/Constants.ts
+++ b/src/Common/Constants.ts
@@ -94,7 +94,12 @@ export class Flights {
  public static readonly MongoIndexEditor = "mongoindexeditor";
  public static readonly MongoIndexing = "mongoindexing";
  public static readonly AutoscaleTest = "autoscaletest";
-  public static readonly SchemaAnalyzer = "schemaanalyzer";
+  public static readonly PartitionKeyTest = "partitionkeytest";
+  public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
+  public static readonly PhoenixNotebooks = "phoenixnotebooks";
+  public static readonly PhoenixFeatures = "phoenixfeatures";
+  public static readonly NotebooksDownBanner = "notebooksdownbanner";
+  public static readonly PublicGallery = "publicgallery";
 }

 export class AfecFeatures {
@@ -158,16 +163,6 @@ export class DocumentsGridMetrics {
  public static DocumentEditorMaxWidthRatio: number = 0.4;
 }

-export class ExplorerMetrics {
-  public static SplitterMinWidth: number = 240;
-  public static SplitterMaxWidth: number = 400;
-  public static CollapsedResourceTreeWidth: number = 36;
-}
-
-export class SplitterMetrics {
-  public static CollapsedPositionLeft: number = ExplorerMetrics.CollapsedResourceTreeWidth;
-}
-
 export class Areas {
  public static ResourceTree: string = "Resource Tree";
  public static ContextualPane: string = "Contextual Pane";
@@ -346,6 +341,19 @@ export enum ConflictOperationType {
  Delete = "delete",
 }

+export enum ConnectionStatusType {
+  Connect = "Connect",
+  Connecting = "Connecting",
+  Connected = "Connected",
+  Failed = "Connection Failed",
+  Reconnect = "Reconnect",
+}
+
+export enum ContainerStatusType {
+  Active = "Active",
+  Disconnected = "Disconnected",
+}
+
 export const EmulatorMasterKey =
  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
@@ -355,10 +363,37 @@ export const StyleConstants = require("less-vars-loader!../../less/Common/Consta

 export class Notebook {
  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
+  public static readonly heartbeatDelayMs = 60000;
+  public static readonly containerStatusHeartbeatDelayMs = 30000;
  public static readonly kernelRestartInitialDelayMs = 1000;
  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
+  public static readonly autoSaveIntervalMs = 300000;
+  public static readonly memoryGuageToGB = 1048576;
+  public static readonly lowMemoryThreshold = 0.8;
+  public static readonly remainingTimeForAlert = 10;
+  public static readonly retryAttempts = 3;
+  public static readonly retryAttemptDelayMs = 5000;
+  public static readonly temporarilyDownMsg = "Notebooks is currently not available. We are working on it.";
+  public static readonly mongoShellTemporarilyDownMsg =
+    "We have identified an issue with the Mongo Shell and it is unavailable right now. We are actively working on the mitigation.";
+  public static readonly cassandraShellTemporarilyDownMsg =
+    "We have identified an issue with the Cassandra Shell and it is unavailable right now. We are actively working on the mitigation.";
+  public static saveNotebookModalTitle = "Save notebook in temporary workspace";
+  public static saveNotebookModalContent =
+    "This notebook will be saved in the temporary workspace and will be removed when the session expires.";
+  public static newNotebookModalTitle = "Create notebook in temporary workspace";
+  public static newNotebookUploadModalTitle = "Upload notebook to temporary workspace";
+  public static newNotebookModalContent1 =
+    "A temporary workspace will be created to enable you to work with notebooks. When the session expires, any notebooks in the workspace will be removed.";
+  public static newNotebookModalContent2 =
+    "To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends. ";
+  public static galleryNotebookDownloadContent1 =
+    "To download, run, and make changes to this sample notebook, a temporary workspace will be created. When the session expires, any notebooks in the workspace will be removed.";
+  public static galleryNotebookDownloadContent2 =
+    "To save your work permanently, save your notebooks to a GitHub repository or download the Notebooks to your local machine before the session ends. ";
+  public static cosmosNotebookHomePageUrl = "https://aka.ms/cosmos-notebooks-limits";
+  public static cosmosNotebookGitDocumentationUrl = "https://aka.ms/cosmos-notebooks-github";
+  public static learnMore = "Learn more.";
 }

 export class SparkLibrary {
@@ -379,3 +414,11 @@ export class TerminalQueryParams {
  public static readonly SubscriptionId = "subscriptionId";
  public static readonly TerminalEndpoint = "terminalEndpoint";
 }
+
+export class JunoEndpoints {
+  public static readonly Test = "https://juno-test.documents-dev.windows-int.net";
+  public static readonly Test2 = "https://juno-test2.documents-dev.windows-int.net";
+  public static readonly Test3 = "https://juno-test3.documents-dev.windows-int.net";
+  public static readonly Prod = "https://tools.cosmos.azure.com";
+  public static readonly Stage = "https://tools-staging.cosmos.azure.com";
+}
--- a/src/Common/CosmosClient.test.ts
+++ b/src/Common/CosmosClient.test.ts
@@ -1,4 +1,4 @@
-import { ResourceType } from "@azure/cosmos/dist-esm/common/constants";
+import { ResourceType } from "@azure/cosmos";
 import { Platform, resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { updateUserContext } from "../UserContext";
 import { endpoint, getTokenFromAuthService, requestPlugin, tokenProvider } from "./CosmosClient";
--- a/src/Common/CosmosClient.ts
+++ b/src/Common/CosmosClient.ts
@@ -1,5 +1,4 @@
 import * as Cosmos from "@azure/cosmos";
-import { RequestInfo, setAuthorizationTokenHeaderUsingMasterKey } from "@azure/cosmos";
 import { configContext, Platform } from "../ConfigContext";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
@@ -8,7 +7,7 @@ import { getErrorMessage } from "./ErrorHandlingUtils";

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

-export const tokenProvider = async (requestInfo: RequestInfo) => {
+export const tokenProvider = async (requestInfo: Cosmos.RequestInfo) => {
  const { verb, resourceId, resourceType, headers } = requestInfo;

  if (userContext.features.enableAadDataPlane && userContext.aadToken) {
@@ -19,13 +18,13 @@ export const tokenProvider = async (requestInfo: RequestInfo) => {

  if (configContext.platform === Platform.Emulator) {
    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
    return decodeURIComponent(headers.authorization);
  }

  if (userContext.masterKey) {
    // TODO This SDK method mutates the headers object. Find a better one or fix the SDK.
-    await setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
+    await Cosmos.setAuthorizationTokenHeaderUsingMasterKey(verb, resourceId, resourceType, headers, EmulatorMasterKey);
    return decodeURIComponent(headers.authorization);
  }

@@ -77,18 +76,30 @@ export async function getTokenFromAuthService(verb: string, resourceType: string
  }
 }

+// The Capability is a bitmap, which cosmosdb backend decodes as per the below enum
+enum SDKSupportedCapabilities {
+  None = 0,
+  PartitionMerge = 1 << 0,
+}
+
 let _client: Cosmos.CosmosClient;

 export function client(): Cosmos.CosmosClient {
  if (_client) return _client;
+
+  let _defaultHeaders: Cosmos.CosmosHeaders = {};
+  _defaultHeaders["x-ms-cosmos-sdk-supportedcapabilities"] =
+    SDKSupportedCapabilities.None | SDKSupportedCapabilities.PartitionMerge;
+
  const options: Cosmos.CosmosClientOptions = {
    endpoint: endpoint() || "https://cosmos.azure.com", // CosmosClient gets upset if we pass a bad URL. This should never actually get called
-    ...(!userContext.features.enableAadDataPlane && { key: userContext.masterKey }),
+    key: userContext.masterKey,
    tokenProvider,
    connectionPolicy: {
      enableEndpointDiscovery: false,
    },
    userAgentSuffix: "Azure Portal",
+    defaultHeaders: _defaultHeaders,
  };

  if (configContext.PROXY_PATH !== undefined) {
--- a/src/Common/HeadersUtility.test.ts
+++ b/src/Common/HeadersUtility.test.ts
@@ -1,6 +1,6 @@
-import * as HeadersUtility from "./HeadersUtility";
-import { ExplorerSettings } from "../Shared/ExplorerSettings";
+import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { LocalStorageUtility, StorageKey } from "../Shared/StorageUtility";
+import * as HeadersUtility from "./HeadersUtility";

 describe("Headers Utility", () => {
  describe("shouldEnableCrossPartitionKeyForResourceWithPartitionKey()", () => {
--- a/src/Common/MongoProxyClient.test.ts
+++ b/src/Common/MongoProxyClient.test.ts
@@ -3,9 +3,16 @@ import { resetConfigContext, updateConfigContext } from "../ConfigContext";
 import { DatabaseAccount } from "../Contracts/DataModels";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { extractFeatures } from "../Platform/Hosted/extractFeatures";
 import { updateUserContext } from "../UserContext";
-import { deleteDocument, getEndpoint, queryDocuments, readDocument, updateDocument } from "./MongoProxyClient";
-jest.mock("../ResourceProvider/ResourceProviderClient.ts");
+import {
+  deleteDocument,
+  getEndpoint,
+  getFeatureEndpointOrDefault,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "./MongoProxyClient";

 const databaseId = "testDB";

@@ -18,12 +25,12 @@ const fetchMock = () => {
  });
 };

-const partitionKeyProperty = "pk";
+const partitionKeyProperties = ["pk"];

 const collection = {
  id: () => "testCollection",
  rid: "testCollectionrid",
-  partitionKeyProperty,
+  partitionKeyProperties,
  partitionKey: {
    paths: ["/pk"],
    kind: "Hash",
@@ -34,7 +41,7 @@ const collection = {
 const documentId = ({
  partitionKeyHeader: () => "[]",
  self: "db/testDB/db/testCollection/docs/testId",
-  partitionKeyProperty,
+  partitionKeyProperties,
  partitionKey: {
    paths: ["/pk"],
    kind: "Hash",
@@ -229,13 +236,12 @@ describe("MongoProxyClient", () => {
    });

    it("returns a production endpoint", () => {
-      const endpoint = getEndpoint();
+      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
    });

    it("returns a development endpoint", () => {
-      updateConfigContext({ MONGO_BACKEND_ENDPOINT: "https://localhost:1234" });
-      const endpoint = getEndpoint();
+      const endpoint = getEndpoint("https://localhost:1234");
      expect(endpoint).toEqual("https://localhost:1234/api/mongo/explorer");
    });

@@ -243,8 +249,35 @@ describe("MongoProxyClient", () => {
      updateUserContext({
        authType: AuthType.EncryptedToken,
      });
-      const endpoint = getEndpoint();
+      const endpoint = getEndpoint("https://main.documentdb.ext.azure.com");
      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/guest/mongo/explorer");
    });
  });
+  describe("getFeatureEndpointOrDefault", () => {
+    beforeEach(() => {
+      resetConfigContext();
+      updateConfigContext({
+        BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
+      });
+      const params = new URLSearchParams({
+        "feature.mongoProxyEndpoint": "https://localhost:12901",
+        "feature.mongoProxyAPIs": "readDocument|createDocument",
+      });
+      const features = extractFeatures(params);
+      updateUserContext({
+        authType: AuthType.AAD,
+        features: features,
+      });
+    });
+
+    it("returns a local endpoint", () => {
+      const endpoint = getFeatureEndpointOrDefault("readDocument");
+      expect(endpoint).toEqual("https://localhost:12901/api/mongo/explorer");
+    });
+
+    it("returns a production endpoint", () => {
+      const endpoint = getFeatureEndpointOrDefault("deleteDocument");
+      expect(endpoint).toEqual("https://main.documentdb.ext.azure.com/api/mongo/explorer");
+    });
+  });
 });
--- a/src/Common/MongoProxyClient.ts
+++ b/src/Common/MongoProxyClient.ts
@@ -1,11 +1,13 @@
 import { Constants as CosmosSDKConstants } from "@azure/cosmos";
 import queryString from "querystring";
+import { allowedMongoProxyEndpoints, validateEndpoint } from "Utils/EndpointValidation";
 import { AuthType } from "../AuthType";
 import { configContext } from "../ConfigContext";
 import * as DataModels from "../Contracts/DataModels";
 import { MessageTypes } from "../Contracts/ExplorerContracts";
 import { Collection } from "../Contracts/ViewModels";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { hasFlag } from "../Platform/Hosted/extractFeatures";
 import { userContext } from "../UserContext";
 import { logConsoleError } from "../Utils/NotificationConsoleUtils";
 import { ApiType, HttpHeaders, HttpStatusCodes } from "./Constants";
@@ -74,11 +76,11 @@ export function queryDocuments(
    dba: databaseAccount.name,
    pk:
      collection && collection.partitionKey && !collection.partitionKey.systemKey
-        ? collection.partitionKeyProperty
+        ? collection.partitionKeyProperties?.[0]
        : "",
  };

-  const endpoint = getEndpoint() || "";
+  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";

  const headers = {
    ...defaultHeaders,
@@ -111,7 +113,7 @@ export function queryDocuments(
          headers: response.headers,
        };
      }
-      errorHandling(response, "querying documents", params);
+      await errorHandling(response, "querying documents", params);
      return undefined;
    });
 }
@@ -137,11 +139,12 @@ export function readDocument(
    dba: databaseAccount.name,
    pk:
      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperty
+        ? documentId.partitionKeyProperties?.[0]
        : "",
  };

-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("readDocument");
+
  return window
    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
      method: "GET",
@@ -153,11 +156,11 @@ export function readDocument(
        ),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "reading document", params);
+      return await errorHandling(response, "reading document", params);
    });
 }

@@ -181,7 +184,7 @@ export function createDocument(
    pk: collection && collection.partitionKey && !collection.partitionKey.systemKey ? partitionKeyProperty : "",
  };

-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("createDocument");

  return window
    .fetch(`${endpoint}/resourcelist?${queryString.stringify(params)}`, {
@@ -192,11 +195,11 @@ export function createDocument(
        ...authHeaders(),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "creating document", params);
+      return await errorHandling(response, "creating document", params);
    });
 }

@@ -222,10 +225,10 @@ export function updateDocument(
    dba: databaseAccount.name,
    pk:
      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperty
+        ? documentId.partitionKeyProperties?.[0]
        : "",
  };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("updateDocument");

  return window
    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -238,11 +241,11 @@ export function updateDocument(
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "updating document", params);
+      return await errorHandling(response, "updating document", params);
    });
 }

@@ -263,10 +266,10 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
    dba: databaseAccount.name,
    pk:
      documentId && documentId.partitionKey && !documentId.partitionKey.systemKey
-        ? documentId.partitionKeyProperty
+        ? documentId.partitionKeyProperties?.[0]
        : "",
  };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("deleteDocument");

  return window
    .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -278,11 +281,11 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
        [CosmosSDKConstants.HttpHeaders.PartitionKey]: JSON.stringify(documentId.partitionKeyHeader()),
      },
    })
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return undefined;
      }
-      return errorHandling(response, "deleting document", params);
+      return await errorHandling(response, "deleting document", params);
    });
 }

@@ -309,7 +312,7 @@ export function createMongoCollectionWithProxy(
    autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
  };

-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");

  return window
    .fetch(
@@ -325,16 +328,26 @@ export function createMongoCollectionWithProxy(
        },
      }
    )
-    .then((response) => {
+    .then(async (response) => {
      if (response.ok) {
        return response.json();
      }
-      return errorHandling(response, "creating collection", mongoParams);
+      return await errorHandling(response, "creating collection", mongoParams);
    });
 }

-export function getEndpoint(): string {
-  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
+export function getFeatureEndpointOrDefault(feature: string): string {
+  const endpoint =
+    hasFlag(userContext.features.mongoProxyAPIs, feature) &&
+    validateEndpoint(userContext.features.mongoProxyEndpoint, allowedMongoProxyEndpoints)
+      ? userContext.features.mongoProxyEndpoint
+      : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
+
+  return getEndpoint(endpoint);
+}
+
+export function getEndpoint(endpoint: string): string {
+  let url = endpoint + "/api/mongo/explorer";

  if (userContext.authType === AuthType.EncryptedToken) {
    url = url.replace("api/mongo", "api/guest/mongo");
--- a/src/Common/QueriesClient.ts
+++ b/src/Common/QueriesClient.ts
@@ -1,19 +1,17 @@
-import { ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as _ from "underscore";
 import * as DataModels from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import Explorer from "../Explorer/Explorer";
 import DocumentsTab from "../Explorer/Tabs/DocumentsTab";
 import DocumentId from "../Explorer/Tree/DocumentId";
+import { useDatabases } from "../Explorer/useDatabases";
 import { userContext } from "../UserContext";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
-import * as QueryUtils from "../Utils/QueryUtils";
 import { BackendDefaults, HttpStatusCodes, SavedQueries } from "./Constants";
 import { createCollection } from "./dataAccess/createCollection";
 import { createDocument } from "./dataAccess/createDocument";
 import { deleteDocument } from "./dataAccess/deleteDocument";
 import { queryDocuments } from "./dataAccess/queryDocuments";
-import { queryDocumentsPage } from "./dataAccess/queryDocumentsPage";
 import { handleError } from "./ErrorHandlingUtils";

 export class QueriesClient {
@@ -100,45 +98,35 @@ export class QueriesClient {

    const options: any = { enableCrossPartitionQuery: true };
    const clearMessage = NotificationConsoleUtils.logConsoleProgress("Fetching saved queries");
-    const queryIterator: QueryIterator<ItemDefinition & Resource> = queryDocuments(
+    const results = await queryDocuments(
      SavedQueries.DatabaseName,
      SavedQueries.CollectionName,
      this.fetchQueriesQuery(),
      options
-    );
-    const fetchQueries = async (firstItemIndex: number): Promise<ViewModels.QueryResults> =>
-      await queryDocumentsPage(queriesCollection.id(), queryIterator, firstItemIndex);
-    return QueryUtils.queryAllPages(fetchQueries)
-      .then(
-        (results: ViewModels.QueryResults) => {
-          let queries: DataModels.Query[] = _.map(results.documents, (document: DataModels.Query) => {
-            if (!document) {
-              return undefined;
-            }
-            const { id, resourceId, query, queryName } = document;
-            const parsedQuery: DataModels.Query = {
-              resourceId: resourceId,
-              queryName: queryName,
-              query: query,
-              id: id,
-            };
-            try {
-              this.validateQuery(parsedQuery);
-              return parsedQuery;
-            } catch (error) {
-              return undefined;
-            }
-          });
-          queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
-          NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
-          return Promise.resolve(queries);
-        },
-        (error: any) => {
-          handleError(error, "getSavedQueries", "Failed to fetch saved queries");
-          return Promise.reject(error);
-        }
-      )
-      .finally(() => clearMessage());
+    ).fetchAll();
+
+    let queries: DataModels.Query[] = _.map(results.resources, (document: DataModels.Query) => {
+      if (!document) {
+        return undefined;
+      }
+      const { id, resourceId, query, queryName } = document;
+      const parsedQuery: DataModels.Query = {
+        resourceId: resourceId,
+        queryName: queryName,
+        query: query,
+        id: id,
+      };
+      try {
+        this.validateQuery(parsedQuery);
+        return parsedQuery;
+      } catch (error) {
+        return undefined;
+      }
+    });
+    queries = _.reject(queries, (parsedQuery: DataModels.Query) => !parsedQuery);
+    NotificationConsoleUtils.logConsoleInfo("Successfully fetched saved queries");
+    clearMessage();
+    return queries;
  }

  public async deleteQuery(query: DataModels.Query): Promise<void> {
@@ -161,10 +149,10 @@ export class QueriesClient {
    const documentId = new DocumentId(
      {
        partitionKey: QueriesClient.PartitionKey,
-        partitionKeyProperty: "id",
+        partitionKeyProperties: ["id"],
      } as DocumentsTab,
      query,
-      query.queryName
+      [query.queryName]
    ); // TODO: Remove DocumentId's dependency on DocumentsTab
    const options: any = { partitionKey: query.resourceId };
    return deleteDocument(queriesCollection, documentId)
@@ -189,7 +177,7 @@ export class QueriesClient {

  private findQueriesCollection(): ViewModels.Collection {
    const queriesDatabase: ViewModels.Database = _.find(
-      this.container.databases(),
+      useDatabases.getState().databases,
      (database: ViewModels.Database) => database.id() === SavedQueries.DatabaseName
    );
    if (!queriesDatabase) {
--- a/src/Common/ResourceTreeContainer.tsx
+++ b/src/Common/ResourceTreeContainer.tsx
@@ -1,18 +1,40 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, MutableRefObject, useEffect, useRef } from "react";
 import arrowLeftImg from "../../images/imgarrowlefticon.svg";
 import refreshImg from "../../images/refresh-cosmos.svg";
 import { AuthType } from "../AuthType";
+import Explorer from "../Explorer/Explorer";
+import { ResourceTokenTree } from "../Explorer/Tree/ResourceTokenTree";
+import { ResourceTree } from "../Explorer/Tree/ResourceTree";
 import { userContext } from "../UserContext";
+import { NormalizedEventKey } from "./Constants";

-export interface ResourceTreeProps {
+export interface ResourceTreeContainerProps {
  toggleLeftPaneExpanded: () => void;
  isLeftPaneExpanded: boolean;
+  container: Explorer;
 }

-export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
+export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps> = ({
  toggleLeftPaneExpanded,
  isLeftPaneExpanded,
-}: ResourceTreeProps): JSX.Element => {
+  container,
+}: ResourceTreeContainerProps): JSX.Element => {
+  const focusButton = useRef<HTMLLIElement>() as MutableRefObject<HTMLLIElement>;
+
+  useEffect(() => {
+    if (isLeftPaneExpanded) {
+      if (focusButton.current) {
+        focusButton.current.focus();
+      }
+    }
+  });
+
+  const onKeyPressToggleLeftPaneExpanded = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      toggleLeftPaneExpanded();
+      event.stopPropagation();
+    }
+  };
  return (
    <div id="main" className={isLeftPaneExpanded ? "main" : "hiddenMain"}>
      {/* Collections Window - - Start */}
@@ -38,9 +60,11 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
                id="expandToggleLeftPaneButton"
                role="button"
                onClick={toggleLeftPaneExpanded}
+                onKeyPress={onKeyPressToggleLeftPaneExpanded}
                tabIndex={0}
                aria-label="Collapse Tree"
                title="Collapse Tree"
+                ref={focusButton}
              >
                <img className="refreshcol1" src={arrowLeftImg} alt="Hide" />
              </span>
@@ -48,9 +72,11 @@ export const ResourceTree: FunctionComponent<ResourceTreeProps> = ({
          </div>
        </div>
        {userContext.authType === AuthType.ResourceToken ? (
-          <div style={{ overflowY: "auto" }} data-bind="react:resourceTreeForResourceToken" />
-        ) : (
+          <ResourceTokenTree />
+        ) : userContext.features.enableKoResourceTree ? (
          <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
+        ) : (
+          <ResourceTree container={container} />
        )}
      </div>
      {/*  Collections Window - End */}
--- a/src/Common/Splitter.ts
+++ b/src/Common/Splitter.ts
@@ -1,7 +1,3 @@
-import * as ko from "knockout";
-
-import { SplitterMetrics } from "./Constants";
-
 export enum SplitterDirection {
  Horizontal = "horizontal",
  Vertical = "vertical",
@@ -28,14 +24,12 @@ export class Splitter {
  public lastX!: number;
  public lastWidth!: number;

-  private isCollapsed: ko.Observable<boolean>;
  private bounds: SplitterBounds;
  private direction: SplitterDirection;

  constructor(options: SplitterOptions) {
    this.splitterId = options.splitterId;
    this.leftSideId = options.leftId;
-    this.isCollapsed = ko.observable<boolean>(false);
    this.bounds = options.bounds;
    this.direction = options.direction;
    this.initialize();
@@ -83,23 +77,4 @@ export class Splitter {
  };

  private onResizeStop: JQueryUI.ResizableEvent = () => $("iframe").css("pointer-events", "auto");
-
-  public collapseLeft() {
-    this.lastX = $(this.splitter).position().left;
-    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.splitter).removeClass("ui-resizable-e");
-    this.isCollapsed(true);
-  }
-
-  public expandLeft() {
-    $(this.splitter).addClass("ui-resizable-e");
-    $(this.leftSide).css("width", this.lastWidth);
-    $(this.splitter).css("left", this.lastX);
-    $(this.splitter).css("left", ""); // this ensures the splitter's position is not fixed and enables movement during resizing
-    $(this.leftSide).resizable("enable");
-    this.isCollapsed(false);
-  }
 }
--- a/src/Common/Tooltip/InfoTooltip.tsx
+++ b/src/Common/Tooltip/InfoTooltip.tsx
@@ -9,7 +9,7 @@ export const InfoTooltip: React.FunctionComponent<TooltipProps> = ({ children }:
  return (
    <span>
      <TooltipHost content={children}>
-        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" />
+        <Icon iconName="Info" ariaLabel="Info" className="panelInfoIcon" tabIndex={0} />
      </TooltipHost>
    </span>
  );
--- a/src/Common/dataAccess/createCollection.test.ts
+++ b/src/Common/dataAccess/createCollection.test.ts
@@ -1,7 +1,10 @@
 jest.mock("../../Utils/arm/request");
 jest.mock("../CosmosClient");
+import ko from "knockout";
 import { AuthType } from "../../AuthType";
 import { CreateCollectionParams, DatabaseAccount } from "../../Contracts/DataModels";
+import { Database } from "../../Contracts/ViewModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { updateUserContext } from "../../UserContext";
 import { armRequest } from "../../Utils/arm/request";
 import { client } from "../CosmosClient";
@@ -23,6 +26,15 @@ describe("createCollection", () => {
      } as DatabaseAccount,
      apiType: "SQL",
    });
+    useDatabases.setState({
+      databases: [
+        {
+          id: ko.observable("testDatabase"),
+          loadCollections: () => undefined,
+          collections: ko.observableArray([]),
+        } as Database,
+      ],
+    });
  });

  it("should call ARM if logged in with AAD", async () => {
--- a/src/Common/dataAccess/createCollection.ts
+++ b/src/Common/dataAccess/createCollection.ts
@@ -1,23 +1,16 @@
-import { ContainerResponse, DatabaseResponse } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
-import { ContainerRequest } from "@azure/cosmos/dist-esm/client/Container/ContainerRequest";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { ContainerRequest, ContainerResponse, DatabaseRequest, DatabaseResponse, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
-import {
-  createUpdateCassandraTable,
-  getCassandraTable,
-} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
-import { createUpdateGremlinGraph, getGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
-import {
-  createUpdateMongoDBCollection,
-  getMongoDBCollection,
-} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import { createUpdateSqlContainer, getSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
-import { createUpdateTable, getTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
+import { getCollectionName } from "../../Utils/APITypeUtils";
+import { createUpdateCassandraTable } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinGraph } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { createUpdateMongoDBCollection } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlContainer } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { createUpdateTable } from "../../Utils/arm/generatedClients/cosmos/tableResources";
 import * as ARMTypes from "../../Utils/arm/generatedClients/cosmos/types";
 import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
@@ -59,6 +52,16 @@ export const createCollection = async (params: DataModels.CreateCollectionParams
 };

 const createCollectionWithARM = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
+  if (!params.createNewDatabase) {
+    const isValid = await useDatabases.getState().validateCollectionId(params.databaseId, params.collectionId);
+    if (!isValid) {
+      const collectionName = getCollectionName().toLocaleLowerCase();
+      throw new Error(
+        `Create ${collectionName} failed: ${collectionName} with id ${params.collectionId} already exists`
+      );
+    }
+  }
+
  const { apiType } = userContext;
  switch (apiType) {
    case "SQL":
@@ -77,23 +80,6 @@ const createCollectionWithARM = async (params: DataModels.CreateCollectionParams
 };

 const createSqlContainer = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getSqlContainer(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create container failed: container with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.SqlContainerResource = {
    id: params.collectionId,
@@ -131,23 +117,6 @@ const createSqlContainer = async (params: DataModels.CreateCollectionParams): Pr

 const createMongoCollection = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
  const mongoWildcardIndexOnAllFields: ARMTypes.MongoIndex[] = [{ key: { keys: ["$**"] } }, { key: { keys: ["_id"] } }];
-  try {
-    const getResponse = await getMongoDBCollection(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create collection failed: collection with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.MongoDBCollectionResource = {
    id: params.collectionId,
@@ -189,23 +158,6 @@ const createMongoCollection = async (params: DataModels.CreateCollectionParams):
 };

 const createCassandraTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getCassandraTable(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.CassandraTableResource = {
    id: params.collectionId,
@@ -233,23 +185,6 @@ const createCassandraTable = async (params: DataModels.CreateCollectionParams):
 };

 const createGraph = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getGremlinGraph(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create graph failed: graph with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.GremlinGraphResource = {
    id: params.collectionId,
@@ -284,22 +219,6 @@ const createGraph = async (params: DataModels.CreateCollectionParams): Promise<D
 };

 const createTable = async (params: DataModels.CreateCollectionParams): Promise<DataModels.Collection> => {
-  try {
-    const getResponse = await getTable(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.collectionId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create table failed: table with id ${params.collectionId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: ARMTypes.CreateUpdateOptions = constructRpOptions(params);
  const resource: ARMTypes.TableResource = {
    id: params.collectionId,
--- a/src/Common/dataAccess/createDatabase.ts
+++ b/src/Common/dataAccess/createDatabase.ts
@@ -1,21 +1,13 @@
-import { DatabaseResponse } from "@azure/cosmos";
-import { DatabaseRequest } from "@azure/cosmos/dist-esm/client/Database/DatabaseRequest";
+import { DatabaseRequest, DatabaseResponse } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import * as DataModels from "../../Contracts/DataModels";
+import { useDatabases } from "../../Explorer/useDatabases";
 import { userContext } from "../../UserContext";
-import {
-  createUpdateCassandraKeyspace,
-  getCassandraKeyspace,
-} from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
-import {
-  createUpdateGremlinDatabase,
-  getGremlinDatabase,
-} from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
-import {
-  createUpdateMongoDBDatabase,
-  getMongoDBDatabase,
-} from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
-import { createUpdateSqlDatabase, getSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
+import { getDatabaseName } from "../../Utils/APITypeUtils";
+import { createUpdateCassandraKeyspace } from "../../Utils/arm/generatedClients/cosmos/cassandraResources";
+import { createUpdateGremlinDatabase } from "../../Utils/arm/generatedClients/cosmos/gremlinResources";
+import { createUpdateMongoDBDatabase } from "../../Utils/arm/generatedClients/cosmos/mongoDBResources";
+import { createUpdateSqlDatabase } from "../../Utils/arm/generatedClients/cosmos/sqlResources";
 import {
  CassandraKeyspaceCreateUpdateParameters,
  CreateUpdateOptions,
@@ -48,6 +40,11 @@ export async function createDatabase(params: DataModels.CreateDatabaseParams): P
 }

 async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
+  if (!useDatabases.getState().validateDatabaseId(params.databaseId)) {
+    const databaseName = getDatabaseName().toLocaleLowerCase();
+    throw new Error(`Create ${databaseName} failed: ${databaseName} with id ${params.databaseId} already exists`);
+  }
+
  const { apiType } = userContext;

  switch (apiType) {
@@ -65,22 +62,6 @@ async function createDatabaseWithARM(params: DataModels.CreateDatabaseParams): P
 }

 async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getSqlDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: CreateUpdateOptions = constructRpOptions(params);
  const rpPayload: SqlDatabaseCreateUpdateParameters = {
    properties: {
@@ -101,22 +82,6 @@ async function createSqlDatabase(params: DataModels.CreateDatabaseParams): Promi
 }

 async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getMongoDBDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: CreateUpdateOptions = constructRpOptions(params);
  const rpPayload: MongoDBDatabaseCreateUpdateParameters = {
    properties: {
@@ -137,22 +102,6 @@ async function createMongoDatabase(params: DataModels.CreateDatabaseParams): Pro
 }

 async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getCassandraKeyspace(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: CreateUpdateOptions = constructRpOptions(params);
  const rpPayload: CassandraKeyspaceCreateUpdateParameters = {
    properties: {
@@ -173,22 +122,6 @@ async function createCassandraKeyspace(params: DataModels.CreateDatabaseParams):
 }

 async function createGremlineDatabase(params: DataModels.CreateDatabaseParams): Promise<DataModels.Database> {
-  try {
-    const getResponse = await getGremlinDatabase(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      userContext.databaseAccount.name,
-      params.databaseId
-    );
-    if (getResponse?.properties?.resource) {
-      throw new Error(`Create database failed: database with id ${params.databaseId} already exists`);
-    }
-  } catch (error) {
-    if (error.code !== "NotFound") {
-      throw error;
-    }
-  }
-
  const options: CreateUpdateOptions = constructRpOptions(params);
  const rpPayload: GremlinDatabaseCreateUpdateParameters = {
    properties: {
--- a/src/Common/dataAccess/deleteDocument.ts
+++ b/src/Common/dataAccess/deleteDocument.ts
@@ -1,9 +1,9 @@
 import { CollectionBase } from "../../Contracts/ViewModels";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";

 export const deleteDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<void> => {
  const entityName: string = getEntityName();
@@ -13,7 +13,7 @@ export const deleteDocument = async (collection: CollectionBase, documentId: Doc
    await client()
      .database(collection.databaseId)
      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
+      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
      .delete();
    logConsoleInfo(`Successfully deleted ${entityName} ${documentId.id()}`);
  } catch (error) {
--- a/src/Common/dataAccess/readDocument.ts
+++ b/src/Common/dataAccess/readDocument.ts
@@ -1,21 +1,29 @@
-import { Item } from "@azure/cosmos";
+import { Item, RequestOptions } from "@azure/cosmos";
 import { CollectionBase } from "../../Contracts/ViewModels";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";

 export const readDocument = async (collection: CollectionBase, documentId: DocumentId): Promise<Item> => {
  const entityName = getEntityName();
  const clearMessage = logConsoleProgress(`Reading ${entityName} ${documentId.id()}`);

  try {
+    const options: RequestOptions =
+      documentId.partitionKey.kind === "MultiHash"
+        ? {
+            [HttpHeaders.partitionKey]: documentId.partitionKeyValue,
+          }
+        : {};
    const response = await client()
      .database(collection.databaseId)
      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
-      .read();
+      // use undefined if the partitionKeyValue is empty
+      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .read(options);

    return response?.resource;
  } catch (error) {
--- a/src/Common/dataAccess/readOfferWithSDK.ts
+++ b/src/Common/dataAccess/readOfferWithSDK.ts
@@ -1,6 +1,6 @@
-import { HttpHeaders } from "../Constants";
+import { RequestOptions } from "@azure/cosmos";
 import { Offer } from "../../Contracts/DataModels";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { HttpHeaders } from "../Constants";
 import { client } from "../CosmosClient";
 import { parseSDKOfferResponse } from "../OfferUtility";
 import { readOffers } from "./readOffers";
--- a/src/Common/dataAccess/updateCollection.ts
+++ b/src/Common/dataAccess/updateCollection.ts
@@ -1,5 +1,4 @@
-import { ContainerDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { ContainerDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Collection } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
--- a/src/Common/dataAccess/updateDocument.ts
+++ b/src/Common/dataAccess/updateDocument.ts
@@ -1,10 +1,11 @@
+import { Item, RequestOptions } from "@azure/cosmos";
+import { HttpHeaders } from "Common/Constants";
 import { CollectionBase } from "../../Contracts/ViewModels";
-import { Item } from "@azure/cosmos";
+import DocumentId from "../../Explorer/Tree/DocumentId";
+import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
 import { client } from "../CosmosClient";
 import { getEntityName } from "../DocumentUtility";
 import { handleError } from "../ErrorHandlingUtils";
-import { logConsoleInfo, logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
-import DocumentId from "../../Explorer/Tree/DocumentId";

 export const updateDocument = async (
  collection: CollectionBase,
@@ -15,11 +16,17 @@ export const updateDocument = async (
  const clearMessage = logConsoleProgress(`Updating ${entityName} ${documentId.id()}`);

  try {
+    const options: RequestOptions =
+      documentId.partitionKey.kind === "MultiHash"
+        ? {
+            [HttpHeaders.partitionKey]: documentId.partitionKeyValue,
+          }
+        : {};
    const response = await client()
      .database(collection.databaseId)
      .container(collection.id())
-      .item(documentId.id(), documentId.partitionKeyValue)
-      .replace(newDocument);
+      .item(documentId.id(), documentId.partitionKeyValue?.length === 0 ? undefined : documentId.partitionKeyValue)
+      .replace(newDocument, options);

    logConsoleInfo(`Successfully updated ${entityName} ${documentId.id()}`);
    return response?.resource;
--- a/src/Common/dataAccess/updateOffer.ts
+++ b/src/Common/dataAccess/updateOffer.ts
@@ -1,5 +1,4 @@
-import { OfferDefinition } from "@azure/cosmos";
-import { RequestOptions } from "@azure/cosmos/dist-esm";
+import { OfferDefinition, RequestOptions } from "@azure/cosmos";
 import { AuthType } from "../../AuthType";
 import { Offer, SDKOfferDefinition, UpdateOfferParams } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
--- a/src/ConfigContext.ts
+++ b/src/ConfigContext.ts
@@ -1,3 +1,17 @@
+import {
+  allowedAadEndpoints,
+  allowedArcadiaEndpoints,
+  allowedArmEndpoints,
+  allowedBackendEndpoints,
+  allowedEmulatorEndpoints,
+  allowedGraphEndpoints,
+  allowedHostedExplorerEndpoints,
+  allowedJunoOrigins,
+  allowedMongoBackendEndpoints,
+  allowedMsalRedirectEndpoints,
+  validateEndpoint,
+} from "Utils/EndpointValidation";
+
 export enum Platform {
  Portal = "Portal",
  Hosted = "Hosted",
@@ -6,7 +20,7 @@ export enum Platform {

 export interface ConfigContext {
  platform: Platform;
-  allowedParentFrameOrigins: string[];
+  allowedParentFrameOrigins: ReadonlyArray<string>;
  gitSha?: string;
  proxyPath?: string;
  AAD_ENDPOINT: string;
@@ -23,11 +37,13 @@ export interface ConfigContext {
  PROXY_PATH?: string;
  JUNO_ENDPOINT: string;
  GITHUB_CLIENT_ID: string;
+  GITHUB_TEST_ENV_CLIENT_ID: string;
  GITHUB_CLIENT_SECRET?: string; // No need to inject secret for prod. Juno already knows it.
+  isTerminalEnabled: boolean;
+  isPhoenixEnabled: boolean;
  hostedExplorerURL: string;
  armAPIVersion?: string;
-  allowedJunoOrigins: string[];
-  enableSchemaAnalyzer: boolean;
+  msalRedirectURI?: string;
 }

 // Default configuration
@@ -36,12 +52,11 @@ let configContext: Readonly<ConfigContext> = {
  allowedParentFrameOrigins: [
    `^https:\\/\\/cosmos\\.azure\\.(com|cn|us)$`,
    `^https:\\/\\/[\\.\\w]*portal\\.azure\\.(com|cn|us)$`,
-    `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure.de$`,
+    `^https:\\/\\/[\\.\\w]*portal\\.microsoftazure\\.de$`,
    `^https:\\/\\/[\\.\\w]*ext\\.azure\\.(com|cn|us)$`,
    `^https:\\/\\/[\\.\\w]*\\.ext\\.microsoftazure\\.de$`,
-    `^https://cosmos-db-dataexplorer-germanycentral.azurewebsites.de$`,
-  ],
-  // Webpack injects this at build time
+    `^https:\\/\\/cosmos-db-dataexplorer-germanycentral\\.azurewebsites\\.de$`,
+  ], // Webpack injects this at build time
  gitSha: process.env.GIT_SHA,
  hostedExplorerURL: "https://cosmos.azure.com/",
  AAD_ENDPOINT: "https://login.microsoftonline.com/",
@@ -52,17 +67,12 @@ let configContext: Readonly<ConfigContext> = {
  GRAPH_API_VERSION: "1.6",
  ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
  ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
-  GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/settings/applications/1189306
+  GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
+  GITHUB_TEST_ENV_CLIENT_ID: "b63fc8cbf87fd3c6e2eb", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1777772
  JUNO_ENDPOINT: "https://tools.cosmos.azure.com",
  BACKEND_ENDPOINT: "https://main.documentdb.ext.azure.com",
-  allowedJunoOrigins: [
-    "https://juno-test.documents-dev.windows-int.net",
-    "https://juno-test2.documents-dev.windows-int.net",
-    "https://tools.cosmos.azure.com",
-    "https://tools-staging.cosmos.azure.com",
-    "https://localhost",
-  ],
-  enableSchemaAnalyzer: false,
+  isTerminalEnabled: false,
+  isPhoenixEnabled: false,
 };

 export function resetConfigContext(): void {
@@ -73,6 +83,50 @@ export function resetConfigContext(): void {
 }

 export function updateConfigContext(newContext: Partial<ConfigContext>): void {
+  if (!newContext) {
+    return;
+  }
+
+  if (!validateEndpoint(newContext.ARM_ENDPOINT, allowedArmEndpoints)) {
+    delete newContext.ARM_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.AAD_ENDPOINT, allowedAadEndpoints)) {
+    delete newContext.AAD_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.EMULATOR_ENDPOINT, allowedEmulatorEndpoints)) {
+    delete newContext.EMULATOR_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.GRAPH_ENDPOINT, allowedGraphEndpoints)) {
+    delete newContext.GRAPH_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.ARCADIA_ENDPOINT, allowedArcadiaEndpoints)) {
+    delete newContext.ARCADIA_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.BACKEND_ENDPOINT, allowedBackendEndpoints)) {
+    delete newContext.BACKEND_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.MONGO_BACKEND_ENDPOINT, allowedMongoBackendEndpoints)) {
+    delete newContext.MONGO_BACKEND_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.JUNO_ENDPOINT, allowedJunoOrigins)) {
+    delete newContext.JUNO_ENDPOINT;
+  }
+
+  if (!validateEndpoint(newContext.hostedExplorerURL, allowedHostedExplorerEndpoints)) {
+    delete newContext.hostedExplorerURL;
+  }
+
+  if (!validateEndpoint(newContext.msalRedirectURI, allowedMsalRedirectEndpoints)) {
+    delete newContext.msalRedirectURI;
+  }
+
  Object.assign(configContext, newContext);
 }

@@ -96,18 +150,8 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
    });
    if (response.status === 200) {
      try {
-        const { allowedParentFrameOrigins, allowedJunoOrigins, ...externalConfig } = await response.json();
-        Object.assign(configContext, externalConfig);
-        if (allowedParentFrameOrigins && allowedParentFrameOrigins.length > 0) {
-          updateConfigContext({
-            allowedParentFrameOrigins: [...configContext.allowedParentFrameOrigins, ...allowedParentFrameOrigins],
-          });
-        }
-        if (allowedJunoOrigins && allowedJunoOrigins.length > 0) {
-          updateConfigContext({
-            allowedJunoOrigins: [...configContext.allowedJunoOrigins, ...allowedJunoOrigins],
-          });
-        }
+        const { ...externalConfig } = await response.json();
+        updateConfigContext(externalConfig);
      } catch (error) {
        console.error("Unable to parse json in config file");
        console.error(error);
@@ -119,6 +163,14 @@ export async function initializeConfiguration(): Promise<ConfigContext> {
      const armAPIVersion = params.get("armAPIVersion") || "";
      updateConfigContext({ armAPIVersion });
    }
+    if (params.has("armEndpoint")) {
+      const ARM_ENDPOINT = params.get("armEndpoint") || "";
+      updateConfigContext({ ARM_ENDPOINT });
+    }
+    if (params.has("aadEndpoint")) {
+      const AAD_ENDPOINT = params.get("aadEndpoint") || "";
+      updateConfigContext({ AAD_ENDPOINT });
+    }
    if (params.has("platform")) {
      const platform = params.get("platform");
      switch (platform) {
--- a/src/Contracts/DataModels.ts
+++ b/src/Contracts/DataModels.ts
@@ -1,3 +1,5 @@
+import { ConnectionStatusType, ContainerStatusType } from "../Common/Constants";
+
 export interface DatabaseAccount {
  id: string;
  name: string;
@@ -5,10 +7,16 @@ export interface DatabaseAccount {
  type: string;
  kind: string;
  properties: DatabaseAccountExtendedProperties;
+  systemData?: DatabaseAccountSystemData;
+}
+
+export interface DatabaseAccountSystemData {
+  createdAt: string;
 }

 export interface DatabaseAccountExtendedProperties {
  documentEndpoint?: string;
+  disableLocalAuth?: boolean;
  tableEndpoint?: string;
  gremlinEndpoint?: string;
  cassandraEndpoint?: string;
@@ -23,6 +31,8 @@ export interface DatabaseAccountExtendedProperties {
  isVirtualNetworkFilterEnabled?: boolean;
  ipRules?: IpRule[];
  privateEndpointConnections?: unknown[];
+  capacity?: { totalThroughputLimit: number };
+  locations?: DatabaseAccountResponseLocation[];
 }

 export interface DatabaseAccountResponseLocation {
@@ -423,6 +433,56 @@ export interface OperationStatus {
 export interface NotebookWorkspaceConnectionInfo {
  authToken: string;
  notebookServerEndpoint: string;
+  forwardingId: string;
+}
+
+export interface ContainerInfo {
+  durationLeftInMinutes: number;
+  notebookServerInfo: NotebookWorkspaceConnectionInfo;
+  status: ContainerStatusType;
+}
+
+export interface IProvisionData {
+  cosmosEndpoint: string;
+}
+
+export interface IContainerData {
+  forwardingId: string;
+}
+
+export interface IDbAccountAllow {
+  status: number;
+  message?: string;
+  type?: string;
+}
+
+export interface IResponse<T> {
+  status: number;
+  data: T;
+}
+
+export interface IPhoenixError {
+  message: string;
+  type: string;
+}
+
+export interface IMaxAllocationTimeExceeded extends IPhoenixError {
+  earliestAllocationTimestamp: string;
+  maxAllocationTimePerDayPerUserInMinutes: string;
+}
+
+export interface IMaxDbAccountsPerUserExceeded extends IPhoenixError {
+  maxSimultaneousConnectionsPerUser: string;
+}
+
+export interface IMaxUsersPerDbAccountExceeded extends IPhoenixError {
+  maxSimultaneousUsersPerDbAccount: string;
+}
+
+export interface IPhoenixConnectionInfoResult {
+  readonly notebookAuthToken?: string;
+  readonly notebookServerUrl?: string;
+  readonly forwardingId?: string;
 }

 export interface NotebookWorkspaceFeedResponse {
@@ -495,3 +555,19 @@ export interface MemoryUsageInfo {
  freeKB: number;
  totalKB: number;
 }
+
+export interface ContainerConnectionInfo {
+  status: ConnectionStatusType;
+  //need to add ram and rom info
+}
+
+export enum PhoenixErrorType {
+  MaxAllocationTimeExceeded = "MaxAllocationTimeExceeded",
+  MaxDbAccountsPerUserExceeded = "MaxDbAccountsPerUserExceeded",
+  MaxUsersPerDbAccountExceeded = "MaxUsersPerDbAccountExceeded",
+  AllocationValidationResult = "AllocationValidationResult",
+  RegionNotServicable = "RegionNotServicable",
+  SubscriptionNotAllowed = "SubscriptionNotAllowed",
+  UnknownError = "UnknownError",
+  PhoenixFlightFallback = "PhoenixFlightFallback",
+}
--- a/src/Contracts/ExplorerContracts.ts
+++ b/src/Contracts/ExplorerContracts.ts
@@ -33,6 +33,8 @@ export enum MessageTypes {
  CreateWorkspace,
  CreateSparkPool,
  RefreshDatabaseAccount,
+  CloseTab,
+  OpenQuickstartBlade,
 }

 export { Versions, ActionContracts, Diagnostics };
--- a/src/Contracts/ViewModels.ts
+++ b/src/Contracts/ViewModels.ts
@@ -5,9 +5,8 @@ import {
  TriggerDefinition,
  UserDefinedFunctionDefinition,
 } from "@azure/cosmos";
-import { CommandButtonComponentProps } from "../Explorer/Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../Explorer/Explorer";
-import { ConsoleData } from "../Explorer/Menus/NotificationConsole/NotificationConsoleComponent";
+import { ConsoleData } from "../Explorer/Menus/NotificationConsole/ConsoleData";
 import { CassandraTableKey, CassandraTableKeys } from "../Explorer/Tables/TableDataClient";
 import ConflictId from "../Explorer/Tree/ConflictId";
 import DocumentId from "../Explorer/Tree/DocumentId";
@@ -87,10 +86,10 @@ export interface Database extends TreeNode {
  offer: ko.Observable<DataModels.Offer>;
  isDatabaseExpanded: ko.Observable<boolean>;
  isDatabaseShared: ko.Computed<boolean>;
+  isSampleDB?: boolean;

  selectedSubnodeKind: ko.Observable<CollectionTabKind>;

-  selectDatabase(): void;
  expandDatabase(): Promise<void>;
  collapseDatabase(): void;

@@ -108,12 +107,13 @@ export interface CollectionBase extends TreeNode {
  self: string;
  rawDataModel: DataModels.Collection;
  partitionKey: DataModels.PartitionKey;
-  partitionKeyProperty: string;
-  partitionKeyPropertyHeader: string;
+  partitionKeyProperties: string[];
+  partitionKeyPropertyHeaders: string[];
  id: ko.Observable<string>;
  selectedSubnodeKind: ko.Observable<CollectionTabKind>;
  children: ko.ObservableArray<TreeNode>;
  isCollectionExpanded: ko.Observable<boolean>;
+  isSampleCollection?: boolean;

  onDocumentDBDocumentsClick(): void;
  onNewQueryClick(source: any, event?: MouseEvent, queryText?: string): void;
@@ -276,8 +276,6 @@ export interface TabOptions {
  tabKind: CollectionTabKind;
  title: string;
  tabPath: string;
-  hashLocation: string;
-  onUpdateTabsButtons: (buttons: CommandButtonComponentProps[]) => void;
  isTabsContentExpanded?: ko.Observable<boolean>;
  onLoadStartKey?: number;

@@ -288,6 +286,7 @@ export interface TabOptions {
  rid?: string;
  node?: TreeNode;
  theme?: string;
+  index?: number;
 }

 export interface DocumentsTabOptions extends TabOptions {
--- a/src/Controls/Heatmap/Heatmap.test.ts
+++ b/src/Controls/Heatmap/Heatmap.test.ts
@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
  };

  let heatmap: Heatmap;
-  let theme: PortalTheme = 1;
-  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  const theme: PortalTheme = 1;
+  const divElement = `<div id="${Heatmap.elementId}"></div>`;

  describe("drawHeatmap rendering", () => {
    beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
  });

  it("should show a no data message with a dark theme", () => {
-    let data = {
+    const data = {
      data: {
        signature: "pcIframe",
        data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
      },
    };

-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
    document.body.innerHTML = divElement;

    handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
  });

  it("should show a no data message with a white theme", () => {
-    let data = {
+    const data = {
      data: {
        signature: "pcIframe",
        data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
      },
    };

-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
    document.body.innerHTML = divElement;

    handleMessage(data as MessageEvent);
--- a/src/Controls/Heatmap/Heatmap.ts
+++ b/src/Controls/Heatmap/Heatmap.ts
@@ -39,7 +39,7 @@ export class Heatmap {
    }
  }

-  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color: string = "#838383"): FontSettings {
+  private _getFontStyles(size: number = StyleConstants.MediumFontSize, color = "#838383"): FontSettings {
    return {
      family: StyleConstants.DataExplorerFont,
      size,
@@ -78,9 +78,9 @@ export class Heatmap {
    // go thru all rows and create 2d matrix for heatmap...
    for (let i = 0; i < rows.length; i++) {
      output.yAxisPoints.push(rows[i]);
-      let dataPoints: number[] = [];
+      const dataPoints: number[] = [];
      for (let a = 0; a < output.xAxisPoints.length; a++) {
-        let row: PartitionTimeStampToData = data[rows[i]];
+        const row: PartitionTimeStampToData = data[rows[i]];
        dataPoints.push(row[output.xAxisPoints[a]]["Normalized Throughput"]);
      }
      output.dataPoints.push(dataPoints);
@@ -193,7 +193,7 @@ export class Heatmap {
      this._getLayoutSettings(),
      this._getChartDisplaySettings()
    );
-    let plotDiv: any = document.getElementById(Heatmap.elementId);
+    const plotDiv: any = document.getElementById(Heatmap.elementId);
    plotDiv.on("plotly_click", (data: any) => {
      let timeSelected: string = data.points[0].x;
      timeSelected = timeSelected.replace(" ", "T");
@@ -205,7 +205,7 @@ export class Heatmap {
          break;
        }
      }
-      let output = [];
+      const output = [];
      for (let i = 0; i < this._chartData.dataPoints.length; i++) {
        output.push(this._chartData.dataPoints[i][xAxisIndex]);
      }
--- a/src/Explorer/ContextMenuButtonFactory.ts
+++ b/src/Explorer/ContextMenuButtonFactory.ts
@@ -1,172 +0,0 @@
-import AddCollectionIcon from "../../images/AddCollection.svg";
-import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
-import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
-import AddTriggerIcon from "../../images/AddTrigger.svg";
-import AddUdfIcon from "../../images/AddUdf.svg";
-import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
-import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
-import DeleteSprocIcon from "../../images/DeleteSproc.svg";
-import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
-import DeleteUDFIcon from "../../images/DeleteUDF.svg";
-import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
-import * as ViewModels from "../Contracts/ViewModels";
-import { userContext } from "../UserContext";
-import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
-import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
-import Explorer from "./Explorer";
-import StoredProcedure from "./Tree/StoredProcedure";
-import Trigger from "./Tree/Trigger";
-import UserDefinedFunction from "./Tree/UserDefinedFunction";
-export interface CollectionContextMenuButtonParams {
-  databaseId: string;
-  collectionId: string;
-}
-
-export interface DatabaseContextMenuButtonParams {
-  databaseId: string;
-}
-/**
- * New resource tree (in ReactJS)
- */
-export class ResourceTreeContextMenuButtonFactory {
-  public static createDatabaseContextMenu(container: Explorer, databaseId: string): TreeNodeMenuItem[] {
-    const items: TreeNodeMenuItem[] = [
-      {
-        iconSrc: AddCollectionIcon,
-        onClick: () => container.onNewCollectionClicked(databaseId),
-        label: `New ${getCollectionName()}`,
-      },
-    ];
-
-    if (userContext.apiType !== "Tables") {
-      items.push({
-        iconSrc: DeleteDatabaseIcon,
-        onClick: () => container.openDeleteDatabaseConfirmationPane(),
-        label: `Delete ${getDatabaseName()}`,
-        styleClass: "deleteDatabaseMenuItem",
-      });
-    }
-    return items;
-  }
-
-  public static createCollectionContextMenuButton(
-    container: Explorer,
-    selectedCollection: ViewModels.Collection
-  ): TreeNodeMenuItem[] {
-    const items: TreeNodeMenuItem[] = [];
-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
-      items.push({
-        iconSrc: AddSqlQueryIcon,
-        onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, null),
-        label: "New SQL Query",
-      });
-    }
-
-    if (userContext.apiType === "Mongo") {
-      items.push({
-        iconSrc: AddSqlQueryIcon,
-        onClick: () => selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, null),
-        label: "New Query",
-      });
-
-      items.push({
-        iconSrc: HostedTerminalIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          if (container.isShellEnabled()) {
-            container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
-          } else {
-            selectedCollection && selectedCollection.onNewMongoShellClick();
-          }
-        },
-        label: container.isShellEnabled() ? "Open Mongo Shell" : "New Shell",
-      });
-    }
-
-    if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
-      items.push({
-        iconSrc: AddStoredProcedureIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, null);
-        },
-        label: "New Stored Procedure",
-      });
-
-      items.push({
-        iconSrc: AddUdfIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection, null);
-        },
-        label: "New UDF",
-      });
-
-      items.push({
-        iconSrc: AddTriggerIcon,
-        onClick: () => {
-          const selectedCollection: ViewModels.Collection = container.findSelectedCollection();
-          selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, null);
-        },
-        label: "New Trigger",
-      });
-    }
-
-    items.push({
-      iconSrc: DeleteCollectionIcon,
-      onClick: () => container.openDeleteCollectionConfirmationPane(),
-      label: `Delete ${getCollectionName()}`,
-      styleClass: "deleteCollectionMenuItem",
-    });
-
-    return items;
-  }
-
-  public static createStoreProcedureContextMenuItems(
-    container: Explorer,
-    storedProcedure: StoredProcedure
-  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteSprocIcon,
-        onClick: () => storedProcedure.delete(),
-        label: "Delete Store Procedure",
-      },
-    ];
-  }
-
-  public static createTriggerContextMenuItems(container: Explorer, trigger: Trigger): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteTriggerIcon,
-        onClick: () => trigger.delete(),
-        label: "Delete Trigger",
-      },
-    ];
-  }
-
-  public static createUserDefinedFunctionContextMenuItems(
-    container: Explorer,
-    userDefinedFunction: UserDefinedFunction
-  ): TreeNodeMenuItem[] {
-    if (userContext.apiType === "Cassandra") {
-      return [];
-    }
-
-    return [
-      {
-        iconSrc: DeleteUDFIcon,
-        onClick: () => userDefinedFunction.delete(),
-        label: "Delete User Defined Function",
-      },
-    ];
-  }
-}
--- a/src/Explorer/ContextMenuButtonFactory.tsx
+++ b/src/Explorer/ContextMenuButtonFactory.tsx
@@ -0,0 +1,189 @@
+import React from "react";
+import AddCollectionIcon from "../../images/AddCollection.svg";
+import AddSqlQueryIcon from "../../images/AddSqlQuery_16x16.svg";
+import AddStoredProcedureIcon from "../../images/AddStoredProcedure.svg";
+import AddTriggerIcon from "../../images/AddTrigger.svg";
+import AddUdfIcon from "../../images/AddUdf.svg";
+import DeleteCollectionIcon from "../../images/DeleteCollection.svg";
+import DeleteDatabaseIcon from "../../images/DeleteDatabase.svg";
+import DeleteSprocIcon from "../../images/DeleteSproc.svg";
+import DeleteTriggerIcon from "../../images/DeleteTrigger.svg";
+import DeleteUDFIcon from "../../images/DeleteUDF.svg";
+import HostedTerminalIcon from "../../images/Hosted-Terminal.svg";
+import * as ViewModels from "../Contracts/ViewModels";
+import { useSidePanel } from "../hooks/useSidePanel";
+import { userContext } from "../UserContext";
+import { getCollectionName, getDatabaseName } from "../Utils/APITypeUtils";
+import { TreeNodeMenuItem } from "./Controls/TreeComponent/TreeComponent";
+import Explorer from "./Explorer";
+import { useNotebook } from "./Notebook/useNotebook";
+import { DeleteCollectionConfirmationPane } from "./Panes/DeleteCollectionConfirmationPane/DeleteCollectionConfirmationPane";
+import { DeleteDatabaseConfirmationPanel } from "./Panes/DeleteDatabaseConfirmationPanel";
+import StoredProcedure from "./Tree/StoredProcedure";
+import Trigger from "./Tree/Trigger";
+import UserDefinedFunction from "./Tree/UserDefinedFunction";
+import { useSelectedNode } from "./useSelectedNode";
+
+export interface CollectionContextMenuButtonParams {
+  databaseId: string;
+  collectionId: string;
+}
+
+export interface DatabaseContextMenuButtonParams {
+  databaseId: string;
+}
+/**
+ * New resource tree (in ReactJS)
+ */
+export const createDatabaseContextMenu = (container: Explorer, databaseId: string): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [
+    {
+      iconSrc: AddCollectionIcon,
+      onClick: () => container.onNewCollectionClicked({ databaseId }),
+      label: `New ${getCollectionName()}`,
+    },
+  ];
+
+  if (userContext.apiType !== "Tables") {
+    items.push({
+      iconSrc: DeleteDatabaseIcon,
+      onClick: () =>
+        useSidePanel
+          .getState()
+          .openSidePanel(
+            "Delete " + getDatabaseName(),
+            <DeleteDatabaseConfirmationPanel refreshDatabases={() => container.refreshAllDatabases()} />
+          ),
+      label: `Delete ${getDatabaseName()}`,
+      styleClass: "deleteDatabaseMenuItem",
+    });
+  }
+  return items;
+};
+
+export const createCollectionContextMenuButton = (
+  container: Explorer,
+  selectedCollection: ViewModels.Collection
+): TreeNodeMenuItem[] => {
+  const items: TreeNodeMenuItem[] = [];
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    items.push({
+      iconSrc: AddSqlQueryIcon,
+      onClick: () => selectedCollection && selectedCollection.onNewQueryClick(selectedCollection, undefined),
+      label: "New SQL Query",
+    });
+  }
+
+  if (userContext.apiType === "Mongo") {
+    items.push({
+      iconSrc: AddSqlQueryIcon,
+      onClick: () => selectedCollection && selectedCollection.onNewMongoQueryClick(selectedCollection, undefined),
+      label: "New Query",
+    });
+
+    items.push({
+      iconSrc: HostedTerminalIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        if (useNotebook.getState().isShellEnabled) {
+          container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+        } else {
+          selectedCollection && selectedCollection.onNewMongoShellClick();
+        }
+      },
+      label: useNotebook.getState().isShellEnabled ? "Open Mongo Shell" : "New Shell",
+    });
+  }
+
+  if (userContext.apiType === "SQL" || userContext.apiType === "Gremlin") {
+    items.push({
+      iconSrc: AddStoredProcedureIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewStoredProcedureClick(selectedCollection, undefined);
+      },
+      label: "New Stored Procedure",
+    });
+
+    items.push({
+      iconSrc: AddUdfIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewUserDefinedFunctionClick(selectedCollection);
+      },
+      label: "New UDF",
+    });
+
+    items.push({
+      iconSrc: AddTriggerIcon,
+      onClick: () => {
+        const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
+        selectedCollection && selectedCollection.onNewTriggerClick(selectedCollection, undefined);
+      },
+      label: "New Trigger",
+    });
+  }
+
+  items.push({
+    iconSrc: DeleteCollectionIcon,
+    onClick: () =>
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          "Delete " + getCollectionName(),
+          <DeleteCollectionConfirmationPane refreshDatabases={() => container.refreshAllDatabases()} />
+        ),
+    label: `Delete ${getCollectionName()}`,
+    styleClass: "deleteCollectionMenuItem",
+  });
+
+  return items;
+};
+
+export const createStoreProcedureContextMenuItems = (
+  container: Explorer,
+  storedProcedure: StoredProcedure
+): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteSprocIcon,
+      onClick: () => storedProcedure.delete(),
+      label: "Delete Store Procedure",
+    },
+  ];
+};
+
+export const createTriggerContextMenuItems = (container: Explorer, trigger: Trigger): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteTriggerIcon,
+      onClick: () => trigger.delete(),
+      label: "Delete Trigger",
+    },
+  ];
+};
+
+export const createUserDefinedFunctionContextMenuItems = (
+  container: Explorer,
+  userDefinedFunction: UserDefinedFunction
+): TreeNodeMenuItem[] => {
+  if (userContext.apiType === "Cassandra") {
+    return [];
+  }
+
+  return [
+    {
+      iconSrc: DeleteUDFIcon,
+      onClick: () => userDefinedFunction.delete(),
+      label: "Delete User Defined Function",
+    },
+  ];
+};
--- a/src/Explorer/Controls/Accordion/AccordionComponent.tsx
+++ b/src/Explorer/Controls/Accordion/AccordionComponent.tsx
@@ -8,7 +8,9 @@ import TriangleDownIcon from "../../../../images/Triangle-down.svg";
 import TriangleRightIcon from "../../../../images/Triangle-right.svg";
 import * as Constants from "../../../Common/Constants";

-export interface AccordionComponentProps {}
+export interface AccordionComponentProps {
+  children: React.ReactNode;
+}

 export class AccordionComponent extends React.Component<AccordionComponentProps> {
  public render(): JSX.Element {
@@ -78,7 +80,7 @@ export class AccordionItemComponent extends React.Component<AccordionItemCompone
    );
  }

-  private onHeaderClick = (_event: React.MouseEvent<HTMLDivElement>): void => {
+  private onHeaderClick = (): void => {
    this.setState({ isExpanded: !this.state.isExpanded });
  };

--- a/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
+++ b/src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
@@ -1,5 +1,6 @@
 import { Icon, Label, Stack } from "@fluentui/react";
 import * as React from "react";
+import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";

 export interface CollapsibleSectionProps {
@@ -30,6 +31,13 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
    }
  }

+  private onKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === NormalizedEventKey.Space || event.key === NormalizedEventKey.Enter) {
+      this.toggleCollapsed();
+      event.stopPropagation();
+    }
+  };
+
  public render(): JSX.Element {
    return (
      <>
@@ -39,6 +47,11 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
          verticalAlign="center"
          tokens={accordionStackTokens}
          onClick={this.toggleCollapsed}
+          onKeyPress={this.onKeyPress}
+          tabIndex={0}
+          aria-name="Advanced"
+          role="button"
+          aria-expanded={this.state.isExpanded}
        >
          <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
          <Label>{this.props.title}</Label>
--- a/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
+++ b/src/Explorer/Controls/CollapsiblePanel/snapshots/CollapsibleSectionComponent.test.tsx.snap
@@ -3,9 +3,14 @@
 exports[`CollapsibleSectionComponent renders 1`] = `
 <Fragment>
  <Stack
+    aria-expanded={true}
+    aria-name="Advanced"
    className="collapsibleSection"
    horizontal={true}
    onClick={[Function]}
+    onKeyPress={[Function]}
+    role="button"
+    tabIndex={0}
    tokens={
      Object {
        "childrenGap": 10,
--- a/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
+++ b/src/Explorer/Controls/CommandButton/CommandButtonComponent.tsx
@@ -121,8 +121,7 @@ export class CommandButtonComponent extends React.Component<CommandButtonCompone
    if (!this.dropdownElt || !this.expandButtonElt) {
      return;
    }
-
-    const dropdownElt = $(this.dropdownElt).offset({ left: $(this.expandButtonElt).offset().left });
+    $(this.dropdownElt).offset({ left: $(this.expandButtonElt).offset().left });
  }

  private onKeyPress(event: React.KeyboardEvent): boolean {
--- a/src/Explorer/Controls/Dialog.tsx
+++ b/src/Explorer/Controls/Dialog.tsx
@@ -23,13 +23,78 @@ export interface DialogState {
  dialogProps?: DialogProps;
  openDialog: (props: DialogProps) => void;
  closeDialog: () => void;
+  showOkCancelModalDialog: (
+    title: string,
+    subText: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    contentHtml?: JSX.Element,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
+  ) => void;
+  showOkModalDialog: (title: string, subText: string) => void;
 }

-export const useDialog: UseStore<DialogState> = create((set) => ({
+export const useDialog: UseStore<DialogState> = create((set, get) => ({
  visible: false,
  openDialog: (props: DialogProps) => set(() => ({ visible: true, dialogProps: props })),
  closeDialog: () =>
-    set((state) => ({ visible: false, openDialog: state.openDialog, closeDialog: state.closeDialog }), true),
+    set(
+      (state) => ({
+        visible: false,
+        openDialog: state.openDialog,
+        closeDialog: state.closeDialog,
+        showOkCancelModalDialog: state.showOkCancelModalDialog,
+        showOkModalDialog: state.showOkModalDialog,
+      }),
+      true // TODO: This probably should not be true but its causing a prod bug so easier to just set the proper state above
+    ),
+  showOkCancelModalDialog: (
+    title: string,
+    subText: string,
+    okLabel: string,
+    onOk: () => void,
+    cancelLabel: string,
+    onCancel: () => void,
+    contentHtml?: JSX.Element,
+    choiceGroupProps?: IChoiceGroupProps,
+    textFieldProps?: TextFieldProps,
+    primaryButtonDisabled?: boolean
+  ): void =>
+    get().openDialog({
+      isModal: true,
+      title,
+      subText,
+      primaryButtonText: okLabel,
+      secondaryButtonText: cancelLabel,
+      onPrimaryButtonClick: () => {
+        get().closeDialog();
+        onOk && onOk();
+      },
+      onSecondaryButtonClick: () => {
+        get().closeDialog();
+        onCancel && onCancel();
+      },
+      contentHtml,
+      choiceGroupProps,
+      textFieldProps,
+      primaryButtonDisabled,
+    }),
+  showOkModalDialog: (title: string, subText: string): void =>
+    get().openDialog({
+      isModal: true,
+      title,
+      subText,
+      primaryButtonText: "Close",
+      secondaryButtonText: undefined,
+      onPrimaryButtonClick: () => {
+        get().closeDialog();
+      },
+      onSecondaryButtonClick: undefined,
+    }),
 }));

 export interface TextFieldProps extends ITextFieldProps {
@@ -62,6 +127,7 @@ export interface DialogProps {
  type?: DialogType;
  showCloseButton?: boolean;
  onDismiss?: () => void;
+  contentHtml?: JSX.Element;
 }

 const DIALOG_MIN_WIDTH = "400px";
@@ -88,6 +154,7 @@ export const Dialog: FC = () => {
    type,
    showCloseButton,
    onDismiss,
+    contentHtml,
  } = props || {};

  const dialogProps: IDialogProps = {
@@ -119,8 +186,7 @@ export const Dialog: FC = () => {
          text: secondaryButtonText,
          onClick: onSecondaryButtonClick,
        }
-      : {};
-
+      : undefined;
  return visible ? (
    <FluentDialog {...dialogProps}>
      {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
@@ -130,6 +196,7 @@ export const Dialog: FC = () => {
          {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
        </Link>
      )}
+      {contentHtml}
      {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
      <DialogFooter>
        <PrimaryButton {...primaryButtonProps} />
--- a/src/Explorer/Controls/Editor/EditorReact.tsx
+++ b/src/Explorer/Controls/Editor/EditorReact.tsx
@@ -1,6 +1,11 @@
+import { Spinner, SpinnerSize } from "@fluentui/react";
 import * as React from "react";
 import { loadMonaco, monaco } from "../../LazyMonaco";
+// import "./EditorReact.less";

+interface EditorReactStates {
+  showEditor: boolean;
+}
 export interface EditorReactProps {
  language: string;
  content: string;
@@ -12,22 +17,26 @@ export interface EditorReactProps {
  theme?: string; // Monaco editor theme
 }

-export class EditorReact extends React.Component<EditorReactProps> {
+export class EditorReact extends React.Component<EditorReactProps, EditorReactStates> {
  private rootNode: HTMLElement;
  private editor: monaco.editor.IStandaloneCodeEditor;
  private selectionListener: monaco.IDisposable;

  public constructor(props: EditorReactProps) {
    super(props);
+    this.state = {
+      showEditor: false,
+    };
  }

  public componentDidMount(): void {
    this.createEditor(this.configureEditor.bind(this));
  }

-  public shouldComponentUpdate(): boolean {
-    // Prevents component re-rendering
-    return false;
+  public componentDidUpdate(previous: EditorReactProps) {
+    if (this.props.content !== previous.content) {
+      this.editor.setValue(this.props.content);
+    }
  }

  public componentWillUnmount(): void {
@@ -35,14 +44,19 @@ export class EditorReact extends React.Component<EditorReactProps> {
  }

  public render(): JSX.Element {
-    return <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />;
+    return (
+      <React.Fragment>
+        {!this.state.showEditor && <Spinner size={SpinnerSize.large} className="spinner" />}
+        <div className="jsonEditor" ref={(elt: HTMLElement) => this.setRef(elt)} />
+      </React.Fragment>
+    );
  }

  protected configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {
    this.editor = editor;
    const queryEditorModel = this.editor.getModel();
    if (!this.props.isReadOnly && this.props.onContentChanged) {
-      queryEditorModel.onDidChangeContent((e: monaco.editor.IModelContentChangedEvent) => {
+      queryEditorModel.onDidChangeContent(() => {
        const queryEditorModel = this.editor.getModel();
        this.props.onContentChanged(queryEditorModel.getValue());
      });
@@ -76,6 +90,12 @@ export class EditorReact extends React.Component<EditorReactProps> {
    this.rootNode.innerHTML = "";
    const monaco = await loadMonaco();
    createCallback(monaco.editor.create(this.rootNode, options));
+
+    if (this.rootNode.innerHTML) {
+      this.setState({
+        showEditor: true,
+      });
+    }
  }

  private setRef(element: HTMLElement): void {
--- a/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
+++ b/src/Explorer/Controls/GitHub/AddRepoComponent.tsx
@@ -1,14 +1,14 @@
 import { DefaultButton, IButtonProps, ITextFieldProps, TextField } from "@fluentui/react";
 import * as React from "react";
 import * as Constants from "../../../Common/Constants";
+import * as UrlUtility from "../../../Common/UrlUtility";
+import { IGitHubRepo } from "../../../GitHub/GitHubClient";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
+import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import Explorer from "../../Explorer";
 import { RepoListItem } from "./GitHubReposComponent";
 import { ChildrenMargin } from "./GitHubStyleConstants";
-import * as GitHubUtils from "../../../Utils/GitHubUtils";
-import { IGitHubRepo } from "../../../GitHub/GitHubClient";
-import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
-import * as UrlUtility from "../../../Common/UrlUtility";
-import Explorer from "../../Explorer";

 export interface AddRepoComponentProps {
  container: Explorer;
@@ -27,7 +27,6 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
  private static readonly ButtonText = "Add";
  private static readonly TextFieldPlaceholder = "https://github.com/owner/repo/tree/branch";
  private static readonly TextFieldErrorMessage = "Invalid url";
-  private static readonly DefaultBranchName = "master";

  constructor(props: AddRepoComponentProps) {
    super(props);
@@ -78,7 +77,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
    });
    let enteredUrl = this.state.textFieldValue;
    if (enteredUrl.indexOf("/tree/") === -1) {
-      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/${AddRepoComponent.DefaultBranchName}`);
+      enteredUrl = UrlUtility.createUri(enteredUrl, `tree/`);
    }

    const repoInfo = GitHubUtils.fromRepoUri(enteredUrl);
@@ -93,11 +92,7 @@ export class AddRepoComponent extends React.Component<AddRepoComponentProps, Add
        const item: RepoListItem = {
          key: GitHubUtils.toRepoFullName(repo.owner, repo.name),
          repo,
-          branches: [
-            {
-              name: repoInfo.branch,
-            },
-          ],
+          branches: repoInfo.branch ? [{ name: repoInfo.branch }] : [],
        };

        TelemetryProcessor.traceSuccess(
--- a/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
+++ b/src/Explorer/Controls/GitHub/GitHubReposComponent.tsx
@@ -56,7 +56,7 @@ export class GitHubReposComponent extends React.Component<GitHubReposComponentPr

    return (
      <>
-        <div className={"paneMainContent"}>{content}</div>
+        <div>{content}</div>
        {!this.props.showAuthorizeAccess && (
          <>
            <div className={"paneFooter"} style={ContentFooterStyle}>
--- a/src/Explorer/Controls/GitHub/GitHubReposComponentAdapter.tsx
+++ b/src/Explorer/Controls/GitHub/GitHubReposComponentAdapter.tsx
@@ -1,20 +0,0 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { GitHubReposComponent, GitHubReposComponentProps } from "./GitHubReposComponent";
-
-export class GitHubReposComponentAdapter implements ReactAdapter {
-  public parameters: ko.Observable<number>;
-
-  constructor(private props: GitHubReposComponentProps) {
-    this.parameters = ko.observable<number>(Date.now());
-  }
-
-  public renderComponent(): JSX.Element {
-    return <GitHubReposComponent {...this.props} />;
-  }
-
-  public triggerRender(): void {
-    window.requestAnimationFrame(() => this.parameters(Date.now()));
-  }
-}
--- a/src/Explorer/Controls/GitHub/ReposListComponent.tsx
+++ b/src/Explorer/Controls/GitHub/ReposListComponent.tsx
@@ -24,11 +24,11 @@ import { RepoListItem } from "./GitHubReposComponent";
 import {
  BranchesDropdownCheckboxStyles,
  BranchesDropdownOptionContainerStyle,
+  BranchesDropdownStyles,
+  BranchesDropdownWidth,
+  ReposListBranchesColumnWidth,
  ReposListCheckboxStyles,
  ReposListRepoColumnMinWidth,
-  ReposListBranchesColumnWidth,
-  BranchesDropdownWidth,
-  BranchesDropdownStyles,
 } from "./GitHubStyleConstants";

 export interface ReposListComponentProps {
@@ -44,6 +44,7 @@ export interface BranchesProps {
  lastPageInfo?: IGitHubPageInfo;
  hasMore: boolean;
  isLoading: boolean;
+  defaultBranchName: string;
  loadMore: () => void;
 }

@@ -64,7 +65,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
  private static readonly BranchesColumnName = "Branches";
  private static readonly LoadingText = "Loading...";
  private static readonly LoadMoreText = "Load more";
-  private static readonly DefaultBranchName = "master";
+  private static readonly DefaultBranchNames = "master/main";
  private static readonly FooterIndex = -1;

  public render(): JSX.Element {
@@ -155,6 +156,10 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
    }

    const branchesProps = this.props.branchesProps[GitHubUtils.toRepoFullName(item.repo.owner, item.repo.name)];
+    if (item.branches.length === 0 && branchesProps.defaultBranchName) {
+      item.branches = [{ name: branchesProps.defaultBranchName }];
+    }
+
    const options: IDropdownOption[] = branchesProps.branches.map((branch) => ({
      key: branch.name,
      text: branch.name,
@@ -198,7 +203,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
    const dropdownProps: IDropdownProps = {
      styles: BranchesDropdownStyles,
      options: [],
-      placeholder: ReposListComponent.DefaultBranchName,
+      placeholder: ReposListComponent.DefaultBranchNames,
      disabled: true,
    };

@@ -272,7 +277,7 @@ export class ReposListComponent extends React.Component<ReposListComponentProps>
      styles: ReposListCheckboxStyles,
      onChange: () => {
        const repoListItem = { ...item };
-        repoListItem.branches = [{ name: ReposListComponent.DefaultBranchName }];
+        repoListItem.branches = [];
        this.props.pinRepo(repoListItem);
      },
    };
--- a/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeahead.less
@@ -5,6 +5,12 @@
    display: inline-block;
    width: 100%;

+    .input-type-head-text-field {
+        width: 100%;
+    }
+    .input-query-form {
+        width: 100%;
+    }
    textarea {
        width: 100%;
        line-height: 1;
@@ -21,4 +27,11 @@
        }
    }
 }
-
+.input-typeahead-chocies-container {
+    border: 1px solid lightgrey;
+    padding: 5px 10px 5px 10px;
+    cursor: pointer;
+    .choice-caption{
+        font-size: 14px;
+    }
+}
--- a/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
+++ b/src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
@@ -6,14 +6,13 @@
 *   typeaheadOverrideOptions: { dynamic:false }
 *
 */
-import "jquery-typeahead";
+import { getTheme, IconButton, IIconProps, List, Stack, TextField } from "@fluentui/react";
 import * as React from "react";
-import { KeyCodes } from "../../../Common/Constants";
 import "./InputTypeahead.less";

 export interface Item {
  caption: string;
-  value: any;
+  value: string;
 }

 /**
@@ -75,170 +74,128 @@ export interface InputTypeaheadComponentProps {
  useTextarea?: boolean;
 }

-interface OnClickItem {
-  matchedKey: string;
-  value: any;
-  caption: string;
-  group: string;
+interface InputTypeaheadComponentState {
+  isSuggestionVisible: boolean;
+  selectedChoice: Item;
+  filteredChoices: Item[];
 }

-interface Cache {
-  inputValue: string;
-  selection: Item;
-}
-
-interface InputTypeaheadComponentState {}
-
 export class InputTypeaheadComponent extends React.Component<
  InputTypeaheadComponentProps,
  InputTypeaheadComponentState
 > {
-  private inputElt: HTMLElement;
-  private containerElt: HTMLElement;
-
-  private cache: Cache;
-  private inputValue: string;
-  private selection: Item;
-
-  public constructor(props: InputTypeaheadComponentProps) {
+  constructor(props: InputTypeaheadComponentProps) {
    super(props);
-    this.cache = {
-      inputValue: null,
-      selection: null,
+    this.state = {
+      isSuggestionVisible: false,
+      filteredChoices: [],
+      selectedChoice: {
+        caption: "",
+        value: "",
+      },
    };
  }

-  /**
-   * Props have changed
-   * @param prevProps
-   * @param prevState
-   * @param snapshot
-   */
-  public componentDidUpdate(
-    prevProps: InputTypeaheadComponentProps,
-    prevState: InputTypeaheadComponentState,
-    snapshot: any
-  ): void {
-    if (prevProps.defaultValue !== this.props.defaultValue) {
-      $(this.inputElt).val(this.props.defaultValue);
-      this.initializeTypeahead();
-    }
-  }
-
-  /**
-   * Executed once react is done building the DOM for this component
-   */
-  public componentDidMount(): void {
-    this.initializeTypeahead();
-  }
-
-  public render(): JSX.Element {
+  private onRenderCell = (item: Item): JSX.Element => {
    return (
-      <span className="input-typeahead-container">
-        <div
-          className="input-typehead"
-          onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => this.onKeyDown(event)}
-        >
-          <div className="typeahead__container" ref={(input) => (this.containerElt = input)}>
-            <div className="typeahead__field">
-              <span className="typeahead__query">
-                {this.props.useTextarea ? (
-                  <textarea
-                    rows={1}
-                    name="q"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                ) : (
-                  <input
-                    name="q"
-                    type="search"
-                    autoComplete="off"
-                    aria-label="Input query"
-                    ref={(input) => (this.inputElt = input)}
-                    defaultValue={this.props.defaultValue}
-                  />
-                )}
-              </span>
-              {this.props.showSearchButton && (
-                <span className="typeahead__button">
-                  <button type="submit">
-                    <span className="typeahead__search-icon" />
-                  </button>
-                </span>
-              )}
-            </div>
-          </div>
-        </div>
-      </span>
+      <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
+        <p className="choice-caption">{item.caption}</p>
+        <span>{item.value}</span>
+      </div>
    );
-  }
+  };

-  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-    if (event.keyCode === KeyCodes.Enter) {
+  private onChoiceClick = (item: Item): void => {
+    this.props.onNewValue(item.caption);
+    this.setState({ isSuggestionVisible: false, selectedChoice: item });
+  };
+
+  private handleChange = (value: string): void => {
+    if (!value) {
+      this.setState({ isSuggestionVisible: true });
+    }
+    this.props.onNewValue(value);
+    const filteredChoices = this.filterChoiceByValue(this.props.choices, value);
+    this.setState({ filteredChoices });
+  };
+
+  private onSubmit = (event: React.KeyboardEvent<HTMLElement>): void => {
+    if (event.key === "Enter") {
      if (this.props.submitFct) {
        event.preventDefault();
        event.stopPropagation();
-        this.props.submitFct(this.cache.inputValue, this.cache.selection);
-        $(this.containerElt).children(".typeahead__result").hide();
+        this.props.submitFct(this.props.defaultValue, this.state.selectedChoice);
+        this.setState({ isSuggestionVisible: false });
      }
    }
-  }
+  };

-  /**
-   * Must execute once ko is rendered, so that it can find the input element by id
-   */
-  private initializeTypeahead(): void {
-    const props = this.props;
-    let cache = this.cache;
-    let options: any = {
-      input: this.inputElt,
-      order: "asc",
-      minLength: 0,
-      searchOnFocus: true,
-      source: {
-        display: "caption",
-        data: () => {
-          return props.choices;
-        },
-      },
-      callback: {
-        onClick: (node: any, a: any, item: OnClickItem, event: any) => {
-          cache.selection = item;
+  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
+    return choices.filter((choice) =>
+      // @ts-ignore
+      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
+    );
+  };

-          if (props.onSelected) {
-            props.onSelected(item);
-          }
-        },
-        onResult(node: any, query: any, result: any, resultCount: any, resultCountPerGroup: any) {
-          cache.inputValue = query;
-          if (props.onNewValue) {
-            props.onNewValue(query);
-          }
-        },
+  public render(): JSX.Element {
+    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
+    const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
+    const theme = getTheme();
+
+    const iconButtonStyles = {
+      root: {
+        color: theme.palette.neutralPrimary,
+        marginLeft: "10px !important",
+        marginTop: "0px",
+        marginRight: "2px",
+        width: "42px",
      },
-      template: (query: string, item: any) => {
-        // Don't display id if caption *IS* the id
-        return item.caption === item.value
-          ? "<span>{{caption}}</span>"
-          : "<span><div>{{caption}}</div><div><small>{{value}}</small></div></span>";
+      rootHovered: {
+        color: theme.palette.neutralDark,
      },
-      dynamic: true,
    };
+    const cancelIcon: IIconProps = { iconName: "cancel" };
+    const searchIcon: IIconProps = { iconName: "Search" };

-    // Override options
-    if (props.typeaheadOverrideOptions) {
-      for (const p in props.typeaheadOverrideOptions) {
-        options[p] = props.typeaheadOverrideOptions[p];
-      }
-    }
-
-    if (props.hasOwnProperty("showCancelButton")) {
-      options.cancelButton = props.showCancelButton;
-    }
-
-    $(this.inputElt).typeahead(options);
+    return (
+      <div className="input-typeahead-container">
+        <Stack horizontal>
+          <form aria-labelledby="input" className="input-query-form">
+            <TextField
+              multiline={useTextarea}
+              rows={1}
+              id="input"
+              defaultValue={defaultValue}
+              ariaLabel="Input query"
+              placeholder={placeholder}
+              className="input-type-head-text-field"
+              value={defaultValue}
+              onKeyDown={this.onSubmit}
+              onFocus={() => this.setState({ isSuggestionVisible: true })}
+              onChange={(_event, newValue?: string) => this.handleChange(newValue)}
+            />
+          </form>
+          {this.props.showCancelButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={cancelIcon}
+              ariaLabel="cancel Button"
+              onClick={() => onNewValue("")}
+            />
+          )}
+          {this.props.showSearchButton && (
+            <IconButton
+              styles={iconButtonStyles}
+              iconProps={searchIcon}
+              ariaLabel="Search Button"
+              onClick={() => this.props.submitFct(defaultValue, selectedChoice)}
+            />
+          )}
+        </Stack>
+        {filteredChoices.length && isSuggestionVisible ? (
+          <List items={filteredChoices} onRenderCell={this.onRenderCell} />
+        ) : undefined}
+      </div>
+    );
  }
 }
--- a/src/Explorer/Controls/InputTypeahead/snapshots/InputTypeaheadComponent.test.tsx.snap
+++ b/src/Explorer/Controls/InputTypeahead/snapshots/InputTypeaheadComponent.test.tsx.snap
@@ -1,61 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`inputTypeahead renders <input /> 1`] = `
-<span
+<div
  className="input-typeahead-container"
 >
-  <div
-    className="input-typehead"
-    onKeyDown={[Function]}
+  <Stack
+    horizontal={true}
  >
-    <div
-      className="typeahead__container"
+    <form
+      aria-labelledby="input"
+      className="input-query-form"
    >
-      <div
-        className="typeahead__field"
-      >
-        <span
-          className="typeahead__query"
-        >
-          <input
-            aria-label="Input query"
-            autoComplete="off"
-            name="q"
-            type="search"
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
+      <StyledTextFieldBase
+        ariaLabel="Input query"
+        className="input-type-head-text-field"
+        id="input"
+        multiline={false}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder"
+        rows={1}
+      />
+    </form>
+  </Stack>
+</div>
 `;

 exports[`inputTypeahead renders <textarea /> 1`] = `
-<span
+<div
  className="input-typeahead-container"
 >
-  <div
-    className="input-typehead"
-    onKeyDown={[Function]}
+  <Stack
+    horizontal={true}
  >
-    <div
-      className="typeahead__container"
+    <form
+      aria-labelledby="input"
+      className="input-query-form"
    >
-      <div
-        className="typeahead__field"
-      >
-        <span
-          className="typeahead__query"
-        >
-          <textarea
-            aria-label="Input query"
-            autoComplete="off"
-            name="q"
-            rows={1}
-          />
-        </span>
-      </div>
-    </div>
-  </div>
-</span>
+      <StyledTextFieldBase
+        ariaLabel="Input query"
+        className="input-type-head-text-field"
+        id="input"
+        multiline={true}
+        onChange={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        placeholder="placeholder"
+        rows={1}
+      />
+    </form>
+  </Stack>
+</div>
 `;
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
@@ -1,154 +1,97 @@
+import { shallow } from "enzyme";
+import React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import { NotebookTerminalComponent } from "./NotebookTerminalComponent";
+import { NotebookTerminalComponent, NotebookTerminalComponentProps } from "./NotebookTerminalComponent";

-const createTestDatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
-    properties: {
-      cassandraEndpoint: null,
-      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
-    },
-    type: "testType",
-  };
+const testAccount: DataModels.DatabaseAccount = {
+  id: "id",
+  kind: "kind",
+  location: "location",
+  name: "name",
+  properties: {
+    documentEndpoint: "https://testDocumentEndpoint.azure.com/",
+  },
+  type: "type",
 };

-const createTestMongo32DatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
-    properties: {
-      cassandraEndpoint: null,
-      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
-    },
-    type: "testType",
-  };
+const testMongo32Account: DataModels.DatabaseAccount = {
+  ...testAccount,
 };

-const createTestMongo36DatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
-    properties: {
-      cassandraEndpoint: null,
-      documentEndpoint: "https://testDocumentEndpoint.azure.com/",
-      gremlinEndpoint: null,
-      tableEndpoint: null,
-      mongoEndpoint: "https://testMongoEndpoint.azure.com/",
-    },
-    type: "testType",
-  };
+const testMongo36Account: DataModels.DatabaseAccount = {
+  ...testAccount,
+  properties: {
+    mongoEndpoint: "https://testMongoEndpoint.azure.com/",
+  },
 };

-const createTestCassandraDatabaseAccount = (): DataModels.DatabaseAccount => {
-  return {
-    id: "testId",
-    kind: "testKind",
-    location: "testLocation",
-    name: "testName",
-    properties: {
-      cassandraEndpoint: "https://testCassandraEndpoint.azure.com/",
-      documentEndpoint: null,
-      gremlinEndpoint: null,
-      tableEndpoint: null,
-    },
-    type: "testType",
-  };
+const testCassandraAccount: DataModels.DatabaseAccount = {
+  ...testAccount,
+  properties: {
+    cassandraEndpoint: "https://testCassandraEndpoint.azure.com/",
+  },
 };

-const createTerminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/",
-    },
-    databaseAccount: createTestDatabaseAccount(),
-  });
+const testNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com",
+  forwardingId: "Id",
 };

-const createMongo32Terminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
-    },
-    databaseAccount: createTestMongo32DatabaseAccount(),
-  });
+const testMongoNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
+  forwardingId: "Id",
 };

-const createMongo36Terminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/mongo",
-    },
-    databaseAccount: createTestMongo36DatabaseAccount(),
-  });
-};
-
-const createCassandraTerminal = (): NotebookTerminalComponent => {
-  return new NotebookTerminalComponent({
-    notebookServerInfo: {
-      authToken: "testAuthToken",
-      notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/cassandra",
-    },
-    databaseAccount: createTestCassandraDatabaseAccount(),
-  });
+const testCassandraNotebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo = {
+  authToken: "authToken",
+  notebookServerEndpoint: "https://testNotebookServerEndpoint.azure.com/cassandra",
+  forwardingId: "Id",
 };

 describe("NotebookTerminalComponent", () => {
-  it("getTerminalParams: Test for terminal", () => {
-    const terminal: NotebookTerminalComponent = createTerminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders terminal", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testAccount,
+      notebookServerInfo: testNotebookServerInfo,
+      tabId: undefined,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([["terminal", "true"]])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Mongo 3.2 terminal", () => {
-    const terminal: NotebookTerminalComponent = createMongo32Terminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders mongo 3.2 shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testMongo32Account,
+      notebookServerInfo: testMongoNotebookServerInfo,
+      tabId: undefined,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.documentEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Mongo 3.6 terminal", () => {
-    const terminal: NotebookTerminalComponent = createMongo36Terminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders mongo 3.6 shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testMongo36Account,
+      notebookServerInfo: testMongoNotebookServerInfo,
+      tabId: undefined,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.mongoEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });

-  it("getTerminalParams: Test for Cassandra terminal", () => {
-    const terminal: NotebookTerminalComponent = createCassandraTerminal();
-    const params: Map<string, string> = terminal.getTerminalParams();
+  it("renders cassandra shell", () => {
+    const props: NotebookTerminalComponentProps = {
+      databaseAccount: testCassandraAccount,
+      notebookServerInfo: testCassandraNotebookServerInfo,
+      tabId: undefined,
+    };

-    expect(params).toEqual(
-      new Map<string, string>([
-        ["terminal", "true"],
-        ["terminalEndpoint", new URL(terminal.props.databaseAccount.properties.cassandraEndpoint).host],
-      ])
-    );
+    const wrapper = shallow(<NotebookTerminalComponent {...props} />);
+    expect(wrapper).toMatchSnapshot();
  });
 });
--- a/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
+++ b/src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
@@ -2,92 +2,84 @@
 * Wrapper around Notebook server terminal
 */

+import postRobot from "post-robot";
 import * as React from "react";
 import * as DataModels from "../../../Contracts/DataModels";
-import * as StringUtils from "../../../Utils/StringUtils";
+import { TerminalProps } from "../../../Terminal/TerminalProps";
 import { userContext } from "../../../UserContext";
-import { TerminalQueryParams } from "../../../Common/Constants";
-import { handleError } from "../../../Common/ErrorHandlingUtils";
+import * as StringUtils from "../../../Utils/StringUtils";

 export interface NotebookTerminalComponentProps {
  notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo;
  databaseAccount: DataModels.DatabaseAccount;
+  tabId: string;
 }

 export class NotebookTerminalComponent extends React.Component<NotebookTerminalComponentProps> {
+  private terminalWindow: Window;
+
  constructor(props: NotebookTerminalComponentProps) {
    super(props);
  }

+  componentDidMount(): void {
+    this.sendPropsToTerminalFrame();
+  }
+
  public render(): JSX.Element {
    return (
      <div className="notebookTerminalContainer">
        <iframe
          title="Terminal to Notebook Server"
-          src={NotebookTerminalComponent.createNotebookAppSrc(this.props.notebookServerInfo, this.getTerminalParams())}
+          onLoad={(event) => this.handleFrameLoad(event)}
+          src="terminal.html"
        />
      </div>
    );
  }

-  public getTerminalParams(): Map<string, string> {
-    let params: Map<string, string> = new Map<string, string>();
-    params.set(TerminalQueryParams.Terminal, "true");
-
-    const terminalEndpoint: string = this.tryGetTerminalEndpoint();
-    if (terminalEndpoint) {
-      params.set(TerminalQueryParams.TerminalEndpoint, terminalEndpoint);
-    }
-
-    return params;
+  handleFrameLoad(event: React.SyntheticEvent<HTMLIFrameElement, Event>): void {
+    this.terminalWindow = (event.target as HTMLIFrameElement).contentWindow;
+    this.sendPropsToTerminalFrame();
  }

-  public tryGetTerminalEndpoint(): string | null {
-    let terminalEndpoint: string | null;
+  sendPropsToTerminalFrame(): void {
+    if (!this.terminalWindow) {
+      return;
+    }

-    const notebookServerEndpoint: string = this.props.notebookServerInfo.notebookServerEndpoint;
+    const props: TerminalProps = {
+      terminalEndpoint: this.tryGetTerminalEndpoint(),
+      notebookServerEndpoint: this.props.notebookServerInfo?.notebookServerEndpoint,
+      authToken: this.props.notebookServerInfo?.authToken,
+      subscriptionId: userContext.subscriptionId,
+      apiType: userContext.apiType,
+      authType: userContext.authType,
+      databaseAccount: userContext.databaseAccount,
+      tabId: this.props.tabId,
+    };
+
+    postRobot.send(this.terminalWindow, "props", props, {
+      domain: window.location.origin,
+    });
+  }
+
+  public tryGetTerminalEndpoint(): string | undefined {
+    let terminalEndpoint: string | undefined;
+
+    const notebookServerEndpoint = this.props.notebookServerInfo?.notebookServerEndpoint;
    if (StringUtils.endsWith(notebookServerEndpoint, "mongo")) {
-      let mongoShellEndpoint: string = this.props.databaseAccount.properties.mongoEndpoint;
-      if (!mongoShellEndpoint) {
-        // mongoEndpoint is only available for Mongo 3.6 and higher.
-        // Fallback to documentEndpoint otherwise.
-        mongoShellEndpoint = this.props.databaseAccount.properties.documentEndpoint;
-      }
-      terminalEndpoint = mongoShellEndpoint;
+      // mongoEndpoint is only available for Mongo 3.6 and higher, fallback to documentEndpoint otherwise
+      terminalEndpoint =
+        this.props.databaseAccount?.properties.mongoEndpoint || this.props.databaseAccount?.properties.documentEndpoint;
    } else if (StringUtils.endsWith(notebookServerEndpoint, "cassandra")) {
-      terminalEndpoint = this.props.databaseAccount.properties.cassandraEndpoint;
+      terminalEndpoint = this.props.databaseAccount?.properties.cassandraEndpoint;
    }

    if (terminalEndpoint) {
      return new URL(terminalEndpoint).host;
    }
-    return null;
-  }

-  public static createNotebookAppSrc(
-    serverInfo: DataModels.NotebookWorkspaceConnectionInfo,
-    params: Map<string, string>
-  ): string {
-    if (!serverInfo.notebookServerEndpoint) {
-      handleError(
-        "Notebook server endpoint not defined. Terminal will fail to connect to jupyter server.",
-        "NotebookTerminalComponent/createNotebookAppSrc"
-      );
-      return "";
-    }
-
-    params.set(TerminalQueryParams.Server, serverInfo.notebookServerEndpoint);
-    if (serverInfo.authToken && serverInfo.authToken.length > 0) {
-      params.set(TerminalQueryParams.Token, serverInfo.authToken);
-    }
-
-    params.set(TerminalQueryParams.SubscriptionId, userContext.subscriptionId);
-
-    let result: string = "terminal.html?";
-    for (let key of params.keys()) {
-      result += `${key}=${encodeURIComponent(params.get(key))}&`;
-    }
-
-    return result;
+    return undefined;
  }
 }
--- a/src/Explorer/Controls/Notebook/snapshots/NotebookTerminalComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Notebook/snapshots/NotebookTerminalComponent.test.tsx.snap
@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NotebookTerminalComponent renders cassandra shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders mongo 3.2 shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders mongo 3.6 shell 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
+
+exports[`NotebookTerminalComponent renders terminal 1`] = `
+<div
+  className="notebookTerminalContainer"
+>
+  <iframe
+    onLoad={[Function]}
+    src="terminal.html"
+    title="Terminal to Notebook Server"
+  />
+</div>
+`;
--- a/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookGallery/GalleryViewerComponent.tsx
@@ -21,6 +21,7 @@ import {
  Text,
 } from "@fluentui/react";
 import * as React from "react";
+import { userContext } from "UserContext";
 import { HttpStatusCodes } from "../../../Common/Constants";
 import { handleError } from "../../../Common/ErrorHandlingUtils";
 import { IGalleryItem, IJunoResponse, IPublicGalleryData, JunoClient } from "../../../Juno/JunoClient";
@@ -148,18 +149,23 @@ export class GalleryViewerComponent extends React.Component<GalleryViewerCompone
  public render(): JSX.Element {
    this.traceViewGallery();

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

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

    const pivotProps: IPivotProps = {
--- a/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
+++ b/src/Explorer/Controls/NotebookGallery/snapshots/GalleryViewerComponent.test.tsx.snap
@@ -8,95 +8,6 @@ exports[`GalleryViewerComponent renders 1`] = `
    onLinkClick={[Function]}
    selectedKey="OfficialSamples"
  >
-    <PivotItem
-      headerText="Public gallery"
-      itemKey="PublicGallery"
-      key="PublicGallery"
-      style={
-        Object {
-          "marginTop": 20,
-        }
-      }
-    >
-      <div
-        className="publicGalleryTabContainer"
-      >
-        <Stack
-          tokens={
-            Object {
-              "childrenGap": 10,
-            }
-          }
-        >
-          <Stack
-            horizontal={true}
-            tokens={
-              Object {
-                "childrenGap": 20,
-                "padding": 10,
-              }
-            }
-            wrap={true}
-          >
-            <StackItem
-              grow={true}
-            >
-              <StyledSearchBox
-                onChange={[Function]}
-                placeholder="Search"
-              />
-            </StackItem>
-            <StackItem>
-              <StyledLabelBase>
-                Sort by
-              </StyledLabelBase>
-            </StackItem>
-            <StackItem
-              styles={
-                Object {
-                  "root": Object {
-                    "minWidth": 200,
-                  },
-                }
-              }
-            >
-              <Dropdown
-                onChange={[Function]}
-                options={
-                  Array [
-                    Object {
-                      "key": 0,
-                      "text": "Most viewed",
-                    },
-                    Object {
-                      "key": 1,
-                      "text": "Most downloaded",
-                    },
-                    Object {
-                      "key": 3,
-                      "text": "Most recent",
-                    },
-                    Object {
-                      "key": 2,
-                      "text": "Most favorited",
-                    },
-                  ]
-                }
-                selectedKey={0}
-              />
-            </StackItem>
-            <StackItem>
-              <InfoComponent />
-            </StackItem>
-          </Stack>
-          <StackItem>
-            <StyledSpinnerBase
-              size={3}
-            />
-          </StackItem>
-        </Stack>
-      </div>
-    </PivotItem>
    <PivotItem
      headerText="Official samples"
      itemKey="OfficialSamples"
--- a/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
+++ b/src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
@@ -17,6 +17,7 @@ import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
+import { useNotebook } from "../../Notebook/useNotebook";
 import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
@@ -51,11 +52,11 @@ export class NotebookViewerComponent
    super(props);

    this.clientManager = new NotebookClientV2({
-      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined },
+      connectionInfo: { authToken: undefined, notebookServerEndpoint: undefined, forwardingId: undefined },
      databaseAccountName: undefined,
      defaultExperience: "NotebookViewer",
      isReadOnly: true,
-      cellEditorType: "monaco",
+      cellEditorType: "codemirror",
      autoSaveInterval: 365 * 24 * 3600 * 1000, // There is no way to turn off auto-save, set to 1 year
      contentProvider: contents.JupyterContentProvider, // NotebookViewer only knows how to talk to Jupyter contents API
    });
@@ -146,7 +147,7 @@ export class NotebookViewerComponent
            <NotebookMetadataComponent
              data={this.state.galleryItem}
              isFavorite={this.state.isFavorite}
-              downloadButtonText={this.props.container && "Download to my notebooks"}
+              downloadButtonText={this.props.container && `Download to ${useNotebook.getState().notebookFolderName}`}
              onTagClick={this.props.onTagClick}
              onFavoriteClick={this.favoriteItem}
              onUnfavoriteClick={this.unfavoriteItem}
--- a/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
+++ b/src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx
@@ -29,8 +29,9 @@ import { QueriesClient } from "../../../Common/QueriesClient";
 import * as DataModels from "../../../Contracts/DataModels";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
+import { useDialog } from "../Dialog";

-const title: string = "Open Saved Queries";
+const title = "Open Saved Queries";

 export interface QueriesGridComponentProps {
  queriesClient: QueriesClient;
@@ -196,9 +197,9 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
      {
        key: "Action",
        name: "Action",
-        fieldName: null,
+        fieldName: undefined,
        minWidth: 70,
-        onRender: (query: Query, index: number, column: IColumn) => {
+        onRender: (query: Query) => {
          const buttonProps: IButtonProps = {
            iconProps: {
              iconName: "More",
@@ -214,47 +215,50 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                {
                  key: "Open",
                  text: "Open query",
-                  onClick: (event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, menuItem: any) => {
+                  onClick: () => {
                    this.props.onQuerySelect(query);
                  },
                },
                {
                  key: "Delete",
                  text: "Delete query",
-                  onClick: async (
-                    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-                    menuItem: any
-                  ) => {
-                    if (window.confirm("Are you sure you want to delete this query?")) {
-                      const container = window.dataExplorer;
-                      const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
-                        dataExplorerArea: Constants.Areas.ContextualPane,
-                        paneTitle: title,
-                      });
-                      try {
-                        await this.props.queriesClient.deleteQuery(query);
-                        TelemetryProcessor.traceSuccess(
-                          Action.DeleteSavedQuery,
-                          {
-                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
-                          },
-                          startKey
-                        );
-                      } catch (error) {
-                        TelemetryProcessor.traceFailure(
-                          Action.DeleteSavedQuery,
-                          {
-                            dataExplorerArea: Constants.Areas.ContextualPane,
-                            paneTitle: title,
-                            error: getErrorMessage(error),
-                            errorStack: getErrorStack(error),
-                          },
-                          startKey
-                        );
-                      }
-                      await this.fetchSavedQueries(); // get latest state
-                    }
+                  onClick: async () => {
+                    useDialog.getState().showOkCancelModalDialog(
+                      "Confirm delete",
+                      "Are you sure you want to delete this query?",
+                      "Delete",
+                      async () => {
+                        const startKey: number = TelemetryProcessor.traceStart(Action.DeleteSavedQuery, {
+                          dataExplorerArea: Constants.Areas.ContextualPane,
+                          paneTitle: title,
+                        });
+                        try {
+                          await this.props.queriesClient.deleteQuery(query);
+                          TelemetryProcessor.traceSuccess(
+                            Action.DeleteSavedQuery,
+                            {
+                              dataExplorerArea: Constants.Areas.ContextualPane,
+                              paneTitle: title,
+                            },
+                            startKey
+                          );
+                        } catch (error) {
+                          TelemetryProcessor.traceFailure(
+                            Action.DeleteSavedQuery,
+                            {
+                              dataExplorerArea: Constants.Areas.ContextualPane,
+                              paneTitle: title,
+                              error: getErrorMessage(error),
+                              errorStack: getErrorStack(error),
+                            },
+                            startKey
+                          );
+                        }
+                        await this.fetchSavedQueries(); // get latest state
+                      },
+                      "Cancel",
+                      undefined
+                    );
                  },
                },
              ],
--- a/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.test.tsx
@@ -38,8 +38,6 @@ describe("SettingsComponent", () => {
      title: "Scale & Settings",
      tabPath: "",
      node: undefined,
-      hashLocation: "settings",
-      onUpdateTabsButtons: undefined,
    }),
  };

@@ -128,7 +126,6 @@ describe("SettingsComponent", () => {
      isDatabaseExpanded: undefined,
      isDatabaseShared: ko.computed(() => true),
      selectedSubnodeKind: undefined,
-      selectDatabase: undefined,
      expandDatabase: undefined,
      collapseDatabase: undefined,
      loadCollections: undefined,
--- a/src/Explorer/Controls/Settings/SettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponent.tsx
@@ -1,4 +1,5 @@
 import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
+import { useDatabases } from "Explorer/useDatabases";
 import * as React from "react";
 import DiscardIcon from "../../../../images/discard.svg";
 import SaveIcon from "../../../../images/save-cosmos.svg";
@@ -17,7 +18,7 @@ import { userContext } from "../../../UserContext";
 import { MongoDBCollectionResource, MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
 import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
-import Explorer from "../../Explorer";
+import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter";
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
@@ -71,6 +72,7 @@ export interface SettingsComponentState {
  wasAutopilotOriginallySet: boolean;
  isScaleSaveable: boolean;
  isScaleDiscardable: boolean;
+  throughputError: string;

  timeToLive: TtlType;
  timeToLiveBaseline: TtlType;
@@ -121,10 +123,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private collection: ViewModels.Collection;
  private database: ViewModels.Database;
  private offer: DataModels.Offer;
-  private container: Explorer;
  private changeFeedPolicyVisible: boolean;
  private isFixedContainer: boolean;
  private shouldShowIndexingPolicyEditor: boolean;
+  private totalThroughputUsed: number;
  public mongoDBCollectionResource: MongoDBCollectionResource;

  constructor(props: SettingsComponentProps) {
@@ -133,7 +135,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    this.isCollectionSettingsTab = this.props.settingsTab.tabKind === ViewModels.CollectionTabKind.CollectionSettingsV2;
    if (this.isCollectionSettingsTab) {
      this.collection = this.props.settingsTab.collection as ViewModels.Collection;
-      this.container = this.collection?.container;
      this.offer = this.collection?.offer();
      this.isAnalyticalStorageEnabled = !!this.collection?.analyticalStorageTtl();
      this.shouldShowIndexingPolicyEditor = userContext.apiType !== "Cassandra" && userContext.apiType !== "Mongo";
@@ -145,11 +146,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        userContext.apiType === "Mongo" && (!this.collection?.partitionKey || this.collection?.partitionKey.systemKey);
    } else {
      this.database = this.props.settingsTab.database;
-      this.container = this.database?.container;
      this.offer = this.database?.offer();
    }

-    this.state = {
+    const initialState: SettingsComponentState = {
      throughput: undefined,
      throughputBaseline: undefined,
      autoPilotThroughput: undefined,
@@ -158,6 +158,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      wasAutopilotOriginallySet: false,
      isScaleSaveable: false,
      isScaleDiscardable: false,
+      throughputError: undefined,

      timeToLive: undefined,
      timeToLiveBaseline: undefined,
@@ -198,6 +199,12 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      selectedTab: SettingsV2TabTypes.ScaleTab,
    };

+    this.state = {
+      ...initialState,
+      ...this.getBaselineValues(),
+      ...this.getAutoscaleBaselineValues(),
+    };
+
    this.saveSettingsButton = {
      isEnabled: this.isSaveSettingsButtonEnabled,
      isVisible: () => {
@@ -211,6 +218,11 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
        return true;
      },
    };
+
+    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
+    if (throughputCap && throughputCap !== -1) {
+      this.calculateTotalThroughputUsed();
+    }
  }

  componentDidMount(): void {
@@ -219,16 +231,15 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      this.loadMongoIndexes();
    }

-    this.setAutoPilotStates();
    this.setBaseline();
    if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
    }
  }

  componentDidUpdate(): void {
    if (this.props.settingsTab.isActive()) {
-      this.props.settingsTab.getContainer().onUpdateTabsButtons(this.getTabsButtons());
+      useCommandBar.getState().setContextButtons(this.getTabsButtons());
    }
  }

@@ -257,6 +268,10 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      return false;
    }

+    if (this.state.throughputError) {
+      return false;
+    }
+
    return (
      this.state.isScaleSaveable ||
      this.state.isSubSettingsSaveable ||
@@ -276,24 +291,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    );
  };

-  private setAutoPilotStates = (): void => {
+  private getAutoscaleBaselineValues = (): Partial<SettingsComponentState> => {
    const autoscaleMaxThroughput = this.offer?.autoscaleMaxThroughput;

    if (autoscaleMaxThroughput && AutoPilotUtils.isValidAutoPilotThroughput(autoscaleMaxThroughput)) {
-      this.setState({
+      return {
        isAutoPilotSelected: true,
        wasAutopilotOriginallySet: true,
        autoPilotThroughput: autoscaleMaxThroughput,
        autoPilotThroughputBaseline: autoscaleMaxThroughput,
-      });
+      };
    }
+
+    return {
+      isAutoPilotSelected: false,
+      wasAutopilotOriginallySet: false,
+      autoPilotThroughput: undefined,
+      autoPilotThroughputBaseline: undefined,
+    };
  };

  public hasProvisioningTypeChanged = (): boolean =>
    this.state.wasAutopilotOriginallySet !== this.state.isAutoPilotSelected;

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

  public hasConflictResolution = (): boolean =>
    userContext?.databaseAccount?.properties?.enableMultipleWriteLocations &&
@@ -484,6 +506,26 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  private onMongoIndexingPolicyDiscardableChange = (isMongoIndexingPolicyDiscardable: boolean): void =>
    this.setState({ isMongoIndexingPolicyDiscardable });

+  private calculateTotalThroughputUsed = (): void => {
+    this.totalThroughputUsed = 0;
+    (useDatabases.getState().databases || []).forEach(async (database) => {
+      if (database.offer()) {
+        const dbThroughput = database.offer().autoscaleMaxThroughput || database.offer().manualThroughput;
+        this.totalThroughputUsed += dbThroughput;
+      }
+
+      (database.collections() || []).forEach(async (collection) => {
+        if (collection.offer()) {
+          const colThroughput = collection.offer().autoscaleMaxThroughput || collection.offer().manualThroughput;
+          this.totalThroughputUsed += colThroughput;
+        }
+      });
+    });
+
+    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
+    this.totalThroughputUsed *= numberOfRegions;
+  };
+
  public getAnalyticalStorageTtl = (): number => {
    if (this.isAnalyticalStorageEnabled) {
      if (this.state.analyticalStorageTtlSelection === TtlType.On) {
@@ -531,21 +573,25 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
  };

  public setBaseline = (): void => {
+    const baselineValues = this.getBaselineValues();
+    const autoscaleBaselineValues = this.getAutoscaleBaselineValues();
+    this.setState({ ...baselineValues, ...autoscaleBaselineValues } as SettingsComponentState);
+  };
+
+  private getBaselineValues = (): Partial<SettingsComponentState> => {
    const offerThroughput = this.offer?.manualThroughput;

    if (!this.isCollectionSettingsTab) {
-      this.setState({
+      return {
        throughput: offerThroughput,
        throughputBaseline: offerThroughput,
-      });
-
-      return;
+      };
    }

    const defaultTtl = this.collection.defaultTtl();

-    let timeToLive: TtlType = this.state.timeToLive;
-    let timeToLiveSeconds = this.state.timeToLiveSeconds;
+    let timeToLive: TtlType;
+    let timeToLiveSeconds: number;
    switch (defaultTtl) {
      case undefined:
      case 0:
@@ -590,7 +636,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      (this.collection.geospatialConfig && this.collection.geospatialConfig()?.type) || GeospatialConfigType.Geometry;
    const geoSpatialConfigType = GeospatialConfigType[geospatialConfigTypeString as keyof typeof GeospatialConfigType];

-    this.setState({
+    return {
      throughput: offerThroughput,
      throughputBaseline: offerThroughput,
      changeFeedPolicy: changeFeedPolicy,
@@ -613,7 +659,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      conflictResolutionPolicyProcedureBaseline: conflictResolutionPolicyProcedure,
      geospatialConfigType: geoSpatialConfigType,
      geospatialConfigTypeBaseline: geoSpatialConfigType,
-    });
+    };
  };

  private getTabsButtons = (): CommandButtonComponentProps[] => {
@@ -646,10 +692,31 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    return buttons;
  };

-  private onMaxAutoPilotThroughputChange = (newThroughput: number): void =>
-    this.setState({ autoPilotThroughput: newThroughput });
+  private onMaxAutoPilotThroughputChange = (newThroughput: number): void => {
+    let throughputError = "";
+    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
+    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
+    const throughputDelta = (newThroughput - this.offer.autoscaleMaxThroughput) * numberOfRegions;
+    if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
+        this.totalThroughputUsed + throughputDelta
+      } RU/s. Change total throughput limit in cost management.`;
+    }
+    this.setState({ autoPilotThroughput: newThroughput, throughputError });
+  };

-  private onThroughputChange = (newThroughput: number): void => this.setState({ throughput: newThroughput });
+  private onThroughputChange = (newThroughput: number): void => {
+    let throughputError = "";
+    const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
+    const numberOfRegions = userContext.databaseAccount?.properties.locations?.length || 1;
+    const throughputDelta = (newThroughput - this.offer.manualThroughput) * numberOfRegions;
+    if (throughputCap && throughputCap !== -1 && throughputCap - this.totalThroughputUsed < throughputDelta) {
+      throughputError = `Your account is currently configured with a total throughput limit of ${throughputCap} RU/s. This update isn't possible because it would increase the total throughput to ${
+        this.totalThroughputUsed + throughputDelta
+      } RU/s. Change total throughput limit in cost management.`;
+    }
+    this.setState({ throughput: newThroughput, throughputError });
+  };

  private onAutoPilotSelected = (isAutoPilotSelected: boolean): void =>
    this.setState({ isAutoPilotSelected: isAutoPilotSelected });
@@ -883,7 +950,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
    const scaleComponentProps: ScaleComponentProps = {
      collection: this.collection,
      database: this.database,
-      container: this.container,
      isFixedContainer: this.isFixedContainer,
      onThroughputChange: this.onThroughputChange,
      throughput: this.state.throughput,
@@ -897,6 +963,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
      onScaleSaveableChange: this.onScaleSaveableChange,
      onScaleDiscardableChange: this.onScaleDiscardableChange,
      initialNotification: this.props.settingsTab.pendingNotification(),
+      throughputError: this.state.throughputError,
    };

    if (!this.isCollectionSettingsTab) {
@@ -911,7 +978,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    const subSettingsComponentProps: SubSettingsComponentProps = {
      collection: this.collection,
-      container: this.container,
      isAnalyticalStorageEnabled: this.isAnalyticalStorageEnabled,
      changeFeedPolicyVisible: this.changeFeedPolicyVisible,
      timeToLive: this.state.timeToLive,
@@ -964,7 +1030,6 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S

    const conflictResolutionPolicyComponentProps: ConflictResolutionComponentProps = {
      collection: this.collection,
-      container: this.container,
      conflictResolutionPolicyMode: this.state.conflictResolutionPolicyMode,
      conflictResolutionPolicyModeBaseline: this.state.conflictResolutionPolicyModeBaseline,
      onConflictResolutionPolicyModeChange: this.onConflictResolutionPolicyModeChange,
--- a/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx
+++ b/src/Explorer/Controls/Settings/SettingsComponentAdapter.tsx
@@ -1,14 +0,0 @@
-import ko from "knockout";
-import * as React from "react";
-import { ReactAdapter } from "../../../Bindings/ReactBindingHandler";
-import { SettingsComponent, SettingsComponentProps } from "./SettingsComponent";
-
-export class SettingsComponentAdapter implements ReactAdapter {
-  public parameters: ko.Computed<boolean>;
-
-  constructor(private props: SettingsComponentProps) {}
-
-  public renderComponent(): JSX.Element {
-    return this.parameters() ? <SettingsComponent {...this.props} /> : <></>;
-  }
-}
--- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
+++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
@@ -1,45 +1,45 @@
-import * as React from "react";
-import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
-import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
-import { Urls, StyleConstants } from "../../../Common/Constants";
 import {
-  getPriceCurrency,
-  getCurrencySign,
-  getAutoscalePricePerRu,
-  getMultimasterMultiplier,
-  computeRUUsagePriceHourly,
-  getPricePerRu,
-  estimatedCostDisclaimer,
-} from "../../../Utils/PricingUtils";
-import {
-  ITextFieldStyles,
+  DetailsList,
+  DetailsListLayoutMode,
+  DetailsRow,
  ICheckboxStyles,
-  IStackProps,
-  IStackTokens,
  IChoiceGroupStyles,
-  Link,
-  Text,
-  IMessageBarStyles,
-  ITextStyles,
-  IDetailsRowStyles,
-  IStackStyles,
+  IColumn,
+  IDetailsColumnStyles,
  IDetailsListStyles,
+  IDetailsRowProps,
+  IDetailsRowStyles,
  IDropdownStyles,
+  IMessageBarStyles,
  ISeparatorStyles,
+  IStackProps,
+  IStackStyles,
+  IStackTokens,
+  ITextFieldStyles,
+  ITextStyles,
+  Link,
  MessageBar,
  MessageBarType,
-  Stack,
+  SelectionMode,
  Spinner,
  SpinnerSize,
-  DetailsList,
-  IColumn,
-  SelectionMode,
-  DetailsListLayoutMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IDetailsColumnStyles,
+  Stack,
+  Text,
 } from "@fluentui/react";
-import { isDirtyTypes, isDirty } from "./SettingsUtils";
+import * as React from "react";
+import { StyleConstants, Urls } from "../../../Common/Constants";
+import { AutopilotDocumentation, hoursInAMonth } from "../../../Shared/Constants";
+import * as AutoPilotUtils from "../../../Utils/AutoPilotUtils";
+import {
+  computeRUUsagePriceHourly,
+  estimatedCostDisclaimer,
+  getAutoscalePricePerRu,
+  getCurrencySign,
+  getMultimasterMultiplier,
+  getPriceCurrency,
+  getPricePerRu,
+} from "../../../Utils/PricingUtils";
+import { isDirty, isDirtyTypes } from "./SettingsUtils";

 export interface EstimatedSpendingDisplayProps {
  costType: JSX.Element;
@@ -65,7 +65,7 @@ export interface PriceBreakdown {
  currencySign: string;
 }

-export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14 } };
+export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };

 export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
  label: {
@@ -223,14 +223,15 @@ export const getRuPriceBreakdown = (
    multimasterEnabled: isMultimaster,
    isAutoscale: isAutoscale,
  });
-  const basePricePerRu: number = isAutoscale
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
-    : getPricePerRu(serverId);
+  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
+  const pricePerRu: number = isAutoscale
+    ? getAutoscalePricePerRu(serverId, multimasterMultiplier)
+    : getPricePerRu(serverId, multimasterMultiplier);
  return {
-    hourlyPrice: hourlyPrice,
+    hourlyPrice,
    dailyPrice: hourlyPrice * 24,
    monthlyPrice: hourlyPrice * hoursInAMonth,
-    pricePerRu: basePricePerRu * getMultimasterMultiplier(numberOfRegions, isMultimaster),
+    pricePerRu,
    currency: getPriceCurrency(serverId),
    currencySign: getCurrencySign(serverId),
  };
@@ -271,7 +272,7 @@ export const manualToAutoscaleDisclaimerElement: JSX.Element = (
  <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
    The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings
    and storage of your resource. After autoscale has been enabled, you can change the max RU/s.{" "}
-    <a href={Urls.autoscaleMigration}>Learn more</a>
+    <Link href={Urls.autoscaleMigration}>Learn more</Link>
  </Text>
 );

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.test.tsx
@@ -1,13 +1,12 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { ConflictResolutionComponentProps, ConflictResolutionComponent } from "./ConflictResolutionComponent";
-import { container, collection } from "../TestUtils";
 import * as DataModels from "../../../../Contracts/DataModels";
+import { collection } from "../TestUtils";
+import { ConflictResolutionComponent, ConflictResolutionComponentProps } from "./ConflictResolutionComponent";

 describe("ConflictResolutionComponent", () => {
  const baseProps: ConflictResolutionComponentProps = {
    collection: collection,
-    container: container,
    conflictResolutionPolicyMode: DataModels.ConflictResolutionMode.Custom,
    conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode.Custom,
    onConflictResolutionPolicyModeChange: () => {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx
@@ -1,21 +1,19 @@
+import { ChoiceGroup, IChoiceGroupOption, ITextFieldProps, Stack, TextField } from "@fluentui/react";
 import * as React from "react";
-import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as DataModels from "../../../../Contracts/DataModels";
-import Explorer from "../../../Explorer";
+import * as ViewModels from "../../../../Contracts/ViewModels";
 import {
-  getTextFieldStyles,
-  conflictResolutionLwwTooltip,
  conflictResolutionCustomToolTip,
-  subComponentStackProps,
+  conflictResolutionLwwTooltip,
  getChoiceGroupStyles,
+  getTextFieldStyles,
+  subComponentStackProps,
 } from "../SettingsRenderUtils";
-import { TextField, ITextFieldProps, Stack, IChoiceGroupOption, ChoiceGroup } from "@fluentui/react";
-import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
 import { isDirty } from "../SettingsUtils";
+import { ToolTipLabelComponent } from "./ToolTipLabelComponent";

 export interface ConflictResolutionComponentProps {
  collection: ViewModels.Collection;
-  container: Explorer;
  conflictResolutionPolicyMode: DataModels.ConflictResolutionMode;
  conflictResolutionPolicyModeBaseline: DataModels.ConflictResolutionMode;
  onConflictResolutionPolicyModeChange: (newMode: DataModels.ConflictResolutionMode) => void;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/snapshots/IndexingPolicyRefreshComponent.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`IndexingPolicyRefreshComponent renders 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.test.tsx
@@ -7,20 +7,17 @@ import * as SharedConstants from "../../../../Shared/Constants";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { throughputUnit } from "../SettingsRenderUtils";
-import { collection, container } from "../TestUtils";
+import { collection } from "../TestUtils";
 import { ScaleComponent, ScaleComponentProps } from "./ScaleComponent";
 import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents/ThroughputInputAutoPilotV3Component";

 describe("ScaleComponent", () => {
  const nonNationalCloudContainer = new Explorer();
-  nonNationalCloudContainer.isRunningOnNationalCloud = () => false;
-
  const targetThroughput = 6000;

  const baseProps: ScaleComponentProps = {
    collection: collection,
    database: undefined,
-    container: container,
    isFixedContainer: false,
    onThroughputChange: () => {
      return;
@@ -111,7 +108,7 @@ describe("ScaleComponent", () => {
    let scaleComponent = new ScaleComponent(baseProps);
    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");

-    let newProps = { ...baseProps, container: nonNationalCloudContainer };
+    let newProps = { ...baseProps };
    scaleComponent = new ScaleComponent(newProps);
    expect(scaleComponent.getThroughputTitle()).toEqual("Throughput (6,000 - unlimited RU/s)");

@@ -124,7 +121,7 @@ describe("ScaleComponent", () => {
    let scaleComponent = new ScaleComponent(baseProps);
    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);

-    const newProps = { ...baseProps, container: nonNationalCloudContainer };
+    const newProps = { ...baseProps };
    scaleComponent = new ScaleComponent(newProps);
    expect(scaleComponent.canThroughputExceedMaximumValue()).toEqual(true);
  });
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx
@@ -7,7 +7,7 @@ import * as ViewModels from "../../../../Contracts/ViewModels";
 import * as SharedConstants from "../../../../Shared/Constants";
 import { userContext } from "../../../../UserContext";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
-import Explorer from "../../../Explorer";
+import { isRunningOnNationalCloud } from "../../../../Utils/CloudUtils";
 import {
  getTextFieldStyles,
  getThroughputApplyLongDelayMessage,
@@ -23,7 +23,6 @@ import { ThroughputInputAutoPilotV3Component } from "./ThroughputInputComponents
 export interface ScaleComponentProps {
  collection: ViewModels.Collection;
  database: ViewModels.Database;
-  container: Explorer;
  isFixedContainer: boolean;
  onThroughputChange: (newThroughput: number) => void;
  throughput: number;
@@ -37,6 +36,7 @@ export interface ScaleComponentProps {
  onScaleSaveableChange: (isScaleSaveable: boolean) => void;
  onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
  initialNotification: DataModels.Notification;
+  throughputError?: string;
 }

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

  public canThroughputExceedMaximumValue = (): boolean => {
-    return (
-      !this.props.isFixedContainer &&
-      configContext.platform === Platform.Portal &&
-      !this.props.container.isRunningOnNationalCloud()
-    );
+    return !this.props.isFixedContainer && configContext.platform === Platform.Portal && !isRunningOnNationalCloud();
  };

  public getInitialNotificationElement = (): JSX.Element => {
@@ -194,6 +190,7 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
      onScaleDiscardableChange={this.props.onScaleDiscardableChange}
      getThroughputWarningMessage={this.getThroughputWarningMessage}
      usageSizeInKB={this.props.collection?.usageSizeInKB()}
+      throughputError={this.props.throughputError}
    />
  );

--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.test.tsx
@@ -4,14 +4,12 @@ import { DatabaseAccount } from "../../../../Contracts/DataModels";
 import { updateUserContext } from "../../../../UserContext";
 import Explorer from "../../../Explorer";
 import { ChangeFeedPolicyState, GeospatialConfigType, TtlOff, TtlOn, TtlOnNoDefault, TtlType } from "../SettingsUtils";
-import { collection, container } from "../TestUtils";
+import { collection } from "../TestUtils";
 import { SubSettingsComponent, SubSettingsComponentProps } from "./SubSettingsComponent";

 describe("SubSettingsComponent", () => {
  const baseProps: SubSettingsComponentProps = {
    collection: collection,
-    container: container,
-
    timeToLive: TtlType.On,
    timeToLiveBaseline: TtlType.On,
    onTtlChange: () => {
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
@@ -2,7 +2,6 @@ import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text,
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
 import { userContext } from "../../../../UserContext";
-import Explorer from "../../../Explorer";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
  changeFeedPolicyToolTip,
@@ -28,8 +27,6 @@ import { ToolTipLabelComponent } from "./ToolTipLabelComponent";

 export interface SubSettingsComponentProps {
  collection: ViewModels.Collection;
-  container: Explorer;
-
  timeToLive: TtlType;
  timeToLiveBaseline: TtlType;

@@ -68,8 +65,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
  constructor(props: SubSettingsComponentProps) {
    super(props);
    this.geospatialVisible = userContext.apiType === "SQL";
-    this.partitionKeyValue = "/" + this.props.collection.partitionKeyProperty;
    this.partitionKeyName = userContext.apiType === "Mongo" ? "Shard key" : "Partition key";
+    this.partitionKeyValue = this.getPartitionKeyValue();
  }

  componentDidMount(): void {
@@ -294,6 +291,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
    );
  };

+  private getPartitionKeyValue = (): string => {
+    if (userContext.apiType === "Mongo") {
+      return this.props.collection.partitionKeyProperties?.[0] || "";
+    }
+
+    return (this.props.collection.partitionKeyProperties || []).map((property) => "/" + property).join(", ");
+  };
+
  private getPartitionKeyComponent = (): JSX.Element => (
    <Stack {...titleAndInputStackProps}>
      {this.getPartitionKeyVisible() && (
@@ -313,7 +318,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
    if (
      userContext.apiType === "Cassandra" ||
      userContext.apiType === "Tables" ||
-      !this.props.collection.partitionKeyProperty ||
+      !this.props.collection.partitionKeyProperties ||
+      this.props.collection.partitionKeyProperties.length === 0 ||
      (userContext.apiType === "Mongo" && this.props.collection.partitionKey.systemKey)
    ) {
      return false;
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
@@ -19,7 +19,7 @@ import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/Telemet
 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../../../UserContext";
 import * as AutoPilotUtils from "../../../../../Utils/AutoPilotUtils";
-import { minAutoPilotThroughput } from "../../../../../Utils/AutoPilotUtils";
+import { autoPilotThroughput1K } from "../../../../../Utils/AutoPilotUtils";
 import { calculateEstimateNumber, usageInGB } from "../../../../../Utils/PricingUtils";
 import { Int32 } from "../../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {
@@ -75,6 +75,7 @@ export interface ThroughputInputAutoPilotV3Props {
  onScaleDiscardableChange: (isScaleDiscardable: boolean) => void;
  getThroughputWarningMessage: () => JSX.Element;
  usageSizeInKB: number;
+  throughputError?: string;
 }

 interface ThroughputInputAutoPilotV3State {
@@ -539,7 +540,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        step={AutoPilotUtils.autoPilotIncrementStep}
        value={this.overrideWithProvisionedThroughputSettings() ? "" : this.props.maxAutoPilotThroughput?.toString()}
        onChange={this.onAutoPilotThroughputChange}
-        min={minAutoPilotThroughput}
+        min={autoPilotThroughput1K}
+        errorMessage={this.props.throughputError}
      />
      {!this.overrideWithProvisionedThroughputSettings() && this.getAutoPilotUsageCost()}
      {this.minRUperGBSurvey()}
@@ -579,6 +581,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
        }
        onChange={this.onThroughputChange}
        min={this.props.minimum}
+        errorMessage={this.props.throughputError}
      />
      {this.state.exceedFreeTierThroughput && (
        <MessageBar
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/snapshots/ThroughputInputAutoPilotV3Component.test.tsx.snap
@@ -20,6 +20,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
      styles={
        Object {
          "root": Object {
+            "color": "windowtext",
            "fontSize": 14,
          },
        }
@@ -39,6 +40,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
@@ -73,6 +75,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
        styles={
          Object {
            "root": Object {
+              "color": "windowtext",
              "fontSize": 14,
            },
          }
@@ -80,11 +83,11 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
      >
        The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
         
-        <a
+        <StyledLinkBase
          href="https://aka.ms/cosmos-autoscale-migration"
        >
          Learn more
-        </a>
+        </StyledLinkBase>
      </Text>
    </StyledMessageBar>
    <StyledChoiceGroup
@@ -142,7 +145,7 @@ exports[`ThroughputInputAutoPilotV3Component autopilot input visible 1`] = `
    id="autopilotInput"
    key="auto pilot throughput input"
    label="Max RU/s"
-    min={4000}
+    min={1000}
    onChange={[Function]}
    required={true}
    step={1000}
@@ -186,6 +189,7 @@ exports[`ThroughputInputAutoPilotV3Component spendAck checkbox visible 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
@@ -460,6 +464,7 @@ exports[`ThroughputInputAutoPilotV3Component throughput input visible 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/ScaleComponent.test.tsx.snap
@@ -16,6 +16,7 @@ exports[`ScaleComponent renders with correct initial notification 1`] = `
      styles={
        Object {
          "root": Object {
+            "color": "windowtext",
            "fontSize": 14,
          },
        }
--- a/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/SettingsSubComponents/snapshots/SubSettingsComponent.test.tsx.snap
@@ -136,6 +136,7 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
@@ -412,6 +413,7 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
@@ -952,6 +954,7 @@ exports[`SubSettingsComponent renders 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
@@ -1228,6 +1231,7 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
            styles={
              Object {
                "root": Object {
+                  "color": "windowtext",
                  "fontSize": 14,
                },
              }
--- a/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
+++ b/src/Explorer/Controls/Settings/SettingsUtils.test.tsx
@@ -36,7 +36,6 @@ describe("SettingsUtils", () => {
        isDatabaseExpanded: ko.observable(false),
        isDatabaseShared: ko.computed(() => true),
        selectedSubnodeKind: ko.observable(undefined),
-        selectDatabase: undefined,
        expandDatabase: undefined,
        collapseDatabase: undefined,
        loadCollections: undefined,
--- a/src/Explorer/Controls/Settings/TestUtils.tsx
+++ b/src/Explorer/Controls/Settings/TestUtils.tsx
@@ -39,7 +39,7 @@ export const collection = ({
    kind: "hash",
    version: 2,
  },
-  partitionKeyProperty: "partitionKey",
+  partitionKeyProperties: ["partitionKey"],
  readSettings: () => {
    return;
  },
--- a/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsComponent.test.tsx.snap
@@ -30,76 +30,27 @@ exports[`SettingsComponent renders 1`] = `
              "container": Explorer {
                "_isInitializingNotebooks": false,
                "_resetNotebookWorkspace": [Function],
-                "canSaveQueries": [Function],
-                "closeSidePanel": undefined,
-                "collapsedResourceTreeWidth": 36,
-                "commandBarComponentAdapter": CommandBarComponentAdapter {
-                  "container": [Circular],
-                  "isNotebookTabActive": [Function],
-                  "parameters": [Function],
-                  "tabsButtons": Array [],
-                },
-                "databases": [Function],
-                "isAccountReady": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isHostedDataExplorerEnabled": [Function],
-                "isNotebookEnabled": [Function],
-                "isNotebooksEnabledForAccount": [Function],
-                "isResourceTokenCollectionNodeSelected": [Function],
-                "isSchemaEnabled": [Function],
-                "isServerlessEnabled": [Function],
-                "isShellEnabled": [Function],
-                "isSynapseLinkUpdating": [Function],
                "isTabsContentExpanded": [Function],
-                "memoryUsageInfo": [Function],
-                "notebookBasePath": [Function],
-                "notebookServerInfo": [Function],
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
-                "openSidePanel": undefined,
+                "phoenixClient": PhoenixClient {
+                  "retryOptions": Object {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
                "provideFeedbackEmail": [Function],
                "queriesClient": QueriesClient {
                  "container": [Circular],
                },
                "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
-                "resourceTokenCollectionId": [Function],
-                "resourceTokenDatabaseId": [Function],
-                "resourceTokenPartitionKey": [Function],
                "resourceTree": ResourceTreeAdapter {
                  "container": [Circular],
                  "copyNotebook": [Function],
-                  "databaseCollectionIdMap": Map {},
-                  "koSubsCollectionIdMap": Map {},
-                  "koSubsDatabaseIdMap": Map {},
                  "parameters": [Function],
                },
-                "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selectedDatabaseId": [Function],
-                "selectedNode": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setIsNotificationConsoleExpanded": undefined,
-                "setNotificationConsoleData": undefined,
-                "sparkClusterConnectionInfo": [Function],
-                "splitter": Splitter {
-                  "bounds": Object {
-                    "max": 400,
-                    "min": 240,
-                  },
-                  "direction": "vertical",
-                  "isCollapsed": [Function],
-                  "leftSideId": "resourcetree",
-                  "onResizeStart": [Function],
-                  "onResizeStop": [Function],
-                  "splitterId": "h_splitter1",
-                },
-                "tabsManager": TabsManager {
-                  "activeTab": [Function],
-                  "openedTabs": [Function],
-                },
              },
              "databaseId": "test",
              "defaultTtl": [Function],
@@ -113,88 +64,14 @@ exports[`SettingsComponent renders 1`] = `
                "paths": Array [],
                "version": 2,
              },
-              "partitionKeyProperty": "partitionKey",
+              "partitionKeyProperties": Array [
+                "partitionKey",
+              ],
              "readSettings": [Function],
              "uniqueKeyPolicy": Object {},
              "usageSizeInKB": [Function],
            }
          }
-          container={
-            Explorer {
-              "_isInitializingNotebooks": false,
-              "_resetNotebookWorkspace": [Function],
-              "canSaveQueries": [Function],
-              "closeSidePanel": undefined,
-              "collapsedResourceTreeWidth": 36,
-              "commandBarComponentAdapter": CommandBarComponentAdapter {
-                "container": [Circular],
-                "isNotebookTabActive": [Function],
-                "parameters": [Function],
-                "tabsButtons": Array [],
-              },
-              "databases": [Function],
-              "isAccountReady": [Function],
-              "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isHostedDataExplorerEnabled": [Function],
-              "isNotebookEnabled": [Function],
-              "isNotebooksEnabledForAccount": [Function],
-              "isResourceTokenCollectionNodeSelected": [Function],
-              "isSchemaEnabled": [Function],
-              "isServerlessEnabled": [Function],
-              "isShellEnabled": [Function],
-              "isSynapseLinkUpdating": [Function],
-              "isTabsContentExpanded": [Function],
-              "memoryUsageInfo": [Function],
-              "notebookBasePath": [Function],
-              "notebookServerInfo": [Function],
-              "onRefreshDatabasesKeyPress": [Function],
-              "onRefreshResourcesClick": [Function],
-              "openSidePanel": undefined,
-              "provideFeedbackEmail": [Function],
-              "queriesClient": QueriesClient {
-                "container": [Circular],
-              },
-              "refreshNotebookList": [Function],
-              "resourceTokenCollection": [Function],
-              "resourceTokenCollectionId": [Function],
-              "resourceTokenDatabaseId": [Function],
-              "resourceTokenPartitionKey": [Function],
-              "resourceTree": ResourceTreeAdapter {
-                "container": [Circular],
-                "copyNotebook": [Function],
-                "databaseCollectionIdMap": Map {},
-                "koSubsCollectionIdMap": Map {},
-                "koSubsDatabaseIdMap": Map {},
-                "parameters": [Function],
-              },
-              "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selectedDatabaseId": [Function],
-              "selectedNode": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setIsNotificationConsoleExpanded": undefined,
-              "setNotificationConsoleData": undefined,
-              "sparkClusterConnectionInfo": [Function],
-              "splitter": Splitter {
-                "bounds": Object {
-                  "max": 400,
-                  "min": 240,
-                },
-                "direction": "vertical",
-                "isCollapsed": [Function],
-                "leftSideId": "resourcetree",
-                "onResizeStart": [Function],
-                "onResizeStop": [Function],
-                "splitterId": "h_splitter1",
-              },
-              "tabsManager": TabsManager {
-                "activeTab": [Function],
-                "openedTabs": [Function],
-              },
-            }
-          }
          isAutoPilotSelected={false}
          isFixedContainer={false}
          onAutoPilotSelected={[Function]}
@@ -229,76 +106,27 @@ exports[`SettingsComponent renders 1`] = `
              "container": Explorer {
                "_isInitializingNotebooks": false,
                "_resetNotebookWorkspace": [Function],
-                "canSaveQueries": [Function],
-                "closeSidePanel": undefined,
-                "collapsedResourceTreeWidth": 36,
-                "commandBarComponentAdapter": CommandBarComponentAdapter {
-                  "container": [Circular],
-                  "isNotebookTabActive": [Function],
-                  "parameters": [Function],
-                  "tabsButtons": Array [],
-                },
-                "databases": [Function],
-                "isAccountReady": [Function],
                "isFixedCollectionWithSharedThroughputSupported": [Function],
-                "isHostedDataExplorerEnabled": [Function],
-                "isNotebookEnabled": [Function],
-                "isNotebooksEnabledForAccount": [Function],
-                "isResourceTokenCollectionNodeSelected": [Function],
-                "isSchemaEnabled": [Function],
-                "isServerlessEnabled": [Function],
-                "isShellEnabled": [Function],
-                "isSynapseLinkUpdating": [Function],
                "isTabsContentExpanded": [Function],
-                "memoryUsageInfo": [Function],
-                "notebookBasePath": [Function],
-                "notebookServerInfo": [Function],
                "onRefreshDatabasesKeyPress": [Function],
                "onRefreshResourcesClick": [Function],
-                "openSidePanel": undefined,
+                "phoenixClient": PhoenixClient {
+                  "retryOptions": Object {
+                    "maxTimeout": 5000,
+                    "minTimeout": 5000,
+                    "retries": 3,
+                  },
+                },
                "provideFeedbackEmail": [Function],
                "queriesClient": QueriesClient {
                  "container": [Circular],
                },
                "refreshNotebookList": [Function],
-                "resourceTokenCollection": [Function],
-                "resourceTokenCollectionId": [Function],
-                "resourceTokenDatabaseId": [Function],
-                "resourceTokenPartitionKey": [Function],
                "resourceTree": ResourceTreeAdapter {
                  "container": [Circular],
                  "copyNotebook": [Function],
-                  "databaseCollectionIdMap": Map {},
-                  "koSubsCollectionIdMap": Map {},
-                  "koSubsDatabaseIdMap": Map {},
                  "parameters": [Function],
                },
-                "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                  "container": [Circular],
-                  "parameters": [Function],
-                },
-                "selectedDatabaseId": [Function],
-                "selectedNode": [Function],
-                "setInProgressConsoleDataIdToBeDeleted": undefined,
-                "setIsNotificationConsoleExpanded": undefined,
-                "setNotificationConsoleData": undefined,
-                "sparkClusterConnectionInfo": [Function],
-                "splitter": Splitter {
-                  "bounds": Object {
-                    "max": 400,
-                    "min": 240,
-                  },
-                  "direction": "vertical",
-                  "isCollapsed": [Function],
-                  "leftSideId": "resourcetree",
-                  "onResizeStart": [Function],
-                  "onResizeStop": [Function],
-                  "splitterId": "h_splitter1",
-                },
-                "tabsManager": TabsManager {
-                  "activeTab": [Function],
-                  "openedTabs": [Function],
-                },
              },
              "databaseId": "test",
              "defaultTtl": [Function],
@@ -312,88 +140,14 @@ exports[`SettingsComponent renders 1`] = `
                "paths": Array [],
                "version": 2,
              },
-              "partitionKeyProperty": "partitionKey",
+              "partitionKeyProperties": Array [
+                "partitionKey",
+              ],
              "readSettings": [Function],
              "uniqueKeyPolicy": Object {},
              "usageSizeInKB": [Function],
            }
          }
-          container={
-            Explorer {
-              "_isInitializingNotebooks": false,
-              "_resetNotebookWorkspace": [Function],
-              "canSaveQueries": [Function],
-              "closeSidePanel": undefined,
-              "collapsedResourceTreeWidth": 36,
-              "commandBarComponentAdapter": CommandBarComponentAdapter {
-                "container": [Circular],
-                "isNotebookTabActive": [Function],
-                "parameters": [Function],
-                "tabsButtons": Array [],
-              },
-              "databases": [Function],
-              "isAccountReady": [Function],
-              "isFixedCollectionWithSharedThroughputSupported": [Function],
-              "isHostedDataExplorerEnabled": [Function],
-              "isNotebookEnabled": [Function],
-              "isNotebooksEnabledForAccount": [Function],
-              "isResourceTokenCollectionNodeSelected": [Function],
-              "isSchemaEnabled": [Function],
-              "isServerlessEnabled": [Function],
-              "isShellEnabled": [Function],
-              "isSynapseLinkUpdating": [Function],
-              "isTabsContentExpanded": [Function],
-              "memoryUsageInfo": [Function],
-              "notebookBasePath": [Function],
-              "notebookServerInfo": [Function],
-              "onRefreshDatabasesKeyPress": [Function],
-              "onRefreshResourcesClick": [Function],
-              "openSidePanel": undefined,
-              "provideFeedbackEmail": [Function],
-              "queriesClient": QueriesClient {
-                "container": [Circular],
-              },
-              "refreshNotebookList": [Function],
-              "resourceTokenCollection": [Function],
-              "resourceTokenCollectionId": [Function],
-              "resourceTokenDatabaseId": [Function],
-              "resourceTokenPartitionKey": [Function],
-              "resourceTree": ResourceTreeAdapter {
-                "container": [Circular],
-                "copyNotebook": [Function],
-                "databaseCollectionIdMap": Map {},
-                "koSubsCollectionIdMap": Map {},
-                "koSubsDatabaseIdMap": Map {},
-                "parameters": [Function],
-              },
-              "resourceTreeForResourceToken": ResourceTreeAdapterForResourceToken {
-                "container": [Circular],
-                "parameters": [Function],
-              },
-              "selectedDatabaseId": [Function],
-              "selectedNode": [Function],
-              "setInProgressConsoleDataIdToBeDeleted": undefined,
-              "setIsNotificationConsoleExpanded": undefined,
-              "setNotificationConsoleData": undefined,
-              "sparkClusterConnectionInfo": [Function],
-              "splitter": Splitter {
-                "bounds": Object {
-                  "max": 400,
-                  "min": 240,
-                },
-                "direction": "vertical",
-                "isCollapsed": [Function],
-                "leftSideId": "resourcetree",
-                "onResizeStart": [Function],
-                "onResizeStop": [Function],
-                "splitterId": "h_splitter1",
-              },
-              "tabsManager": TabsManager {
-                "activeTab": [Function],
-                "openedTabs": [Function],
-              },
-            }
-          }
          geospatialConfigType="Geometry"
          geospatialConfigTypeBaseline="Geometry"
          isAnalyticalStorageEnabled={false}
--- a/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
+++ b/src/Explorer/Controls/Settings/snapshots/SettingsRenderUtils.test.tsx.snap
@@ -159,6 +159,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -166,16 +167,17 @@ exports[`SettingsUtils functions render 1`] = `
  >
    The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.
     
-    <a
+    <StyledLinkBase
      href="https://aka.ms/cosmos-autoscale-migration"
    >
      Learn more
-    </a>
+    </StyledLinkBase>
  </Text>
  <Text
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -195,6 +197,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -207,6 +210,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -219,6 +223,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -230,6 +235,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -249,6 +255,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -264,6 +271,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -278,6 +286,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -291,6 +300,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -302,6 +312,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -321,6 +332,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -363,6 +375,7 @@ exports[`SettingsUtils functions render 1`] = `
      styles={
        Object {
          "root": Object {
+            "color": "windowtext",
            "fontSize": 14,
          },
        }
@@ -378,6 +391,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
@@ -394,6 +408,7 @@ exports[`SettingsUtils functions render 1`] = `
    styles={
      Object {
        "root": Object {
+          "color": "windowtext",
          "fontSize": 14,
        },
      }
--- a/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
+++ b/src/Explorer/Controls/SmartUi/SmartUiComponent.tsx
@@ -181,7 +181,7 @@ export class SmartUiComponent extends React.Component<SmartUiComponentProps, Sma
    const descriptionElement = (
      <Stack>
        {labelElement}
-        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId}>
+        <Text id={`${dataFieldName}-text-display`} aria-labelledby={labelId} style={{ whiteSpace: "pre-line" }}>
          {this.props.getTranslation(description.textTKey)}{" "}
          {description.link && (
            <Link target="_blank" href={description.link.href}>
--- a/Show More
+++ b/Show More