Merge branch 'master' of https://github.com/Azure/cosmos-explorer into resolve_Constants

* absulte_path setting

* resolve build time error

.eslintignore

@@ -6,7 +6,7 @@ src/Api/Apis.ts
 src/AuthType.ts
 src/Bindings/BindingHandlersRegisterer.ts
 src/Bindings/ReactBindingHandler.ts
-src/Common/Constants.ts
+src/Common/Constants/index.ts
 src/Common/CosmosClient.test.ts
 src/Common/CosmosClient.ts
 src/Common/DataAccessUtilityBase.test.ts
@@ -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,29 +36,10 @@ src/Definitions/png.d.ts
 src/Definitions/svg.d.ts
 src/Explorer/ComponentRegisterer.test.ts
 src/Explorer/ComponentRegisterer.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
@@ -108,17 +81,13 @@ 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/DataTableOperations.ts
 src/Explorer/Tables/DataTable/DataTableViewModel.ts
-src/Explorer/Tables/DataTable/TableCommands.ts
+# src/Explorer/Tables/DataTable/TableCommands.ts
-src/Explorer/Tables/DataTable/TableEntityCache.ts
+# src/Explorer/Tables/DataTable/TableEntityCache.ts
 src/Explorer/Tables/DataTable/TableEntityListViewModel.ts
-src/Explorer/Tables/Entities.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/TableDataClient.ts
 src/Explorer/Tables/TableEntityProcessor.ts
 src/Explorer/Tables/Utilities.ts
@@ -142,15 +111,10 @@ 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/WaitsForTemplateViewModel.ts
 src/GitHub/GitHubClient.test.ts
 src/GitHub/GitHubClient.ts
-src/GitHub/GitHubConnector.ts
-src/GitHub/GitHubOAuthService.ts
 src/Index.ts
-src/Juno/JunoClient.test.ts
-src/Juno/JunoClient.ts
 src/Platform/Hosted/Authorization.ts
 src/ReactDevTools.ts
 src/Shared/Constants.ts
@@ -170,7 +134,7 @@ src/Explorer/Controls/Notebook/NotebookTerminalComponent.tsx
 src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx
 src/Explorer/Controls/TreeComponent/TreeComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.test.tsx
-src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
+; src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx
 src/Explorer/Graph/GraphExplorerComponent/GraphVizComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
@@ -180,10 +144,10 @@ src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.t
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx
 src/Explorer/Notebook/NotebookComponent/NotebookComponentAdapter.tsx
-src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
+; src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx
 src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx
 src/Explorer/Notebook/NotebookComponent/contents/index.tsx
-src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
+; src/Explorer/Notebook/NotebookRenderer/NotebookReadOnlyRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/NotebookRenderer.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/draggable/index.tsx
 src/Explorer/Notebook/NotebookRenderer/decorators/hijack-scroll/index.tsx

.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",

.github/workflows/ci.yml

@@ -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:

.vscode/settings.json

@@ -22,5 +22,6 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true,
     "source.organizeImports": true
-  }
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

images/close-black.svg

@@ -1,16 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg
+<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/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)" 
+        transform="scale(0.5)" fill="#000" stroke="#000">
-        fill="#000"
-        stroke="#CCC" 
-        >
     </path>
 </svg>

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 30,
+      lines: 29,
-      statements: 30,
+      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: {},
 

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;

less/documentDB.less

@@ -2357,6 +2357,8 @@ a:link {
   height: 100%;
   flex-grow: 1;
   overflow: hidden;
+  min-height: 300px;
+  overflow-y: scroll;
 }
 
 .tabs {
@@ -2832,6 +2834,8 @@ a:link {
 
 #explorerNotificationConsole {
   z-index: 1000;
+  overflow-y: auto;
+  overflow-x: clip;
 }
 
 .uniqueIndexesContainer {

less/resourceTree.less

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

package.json

@@ -48,9 +48,9 @@
     "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",
@@ -81,10 +81,10 @@
     "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": "14.0.2",
-    "react-dnd-html5-backend": "9.4.0",
+    "react-dnd-html5-backend": "14.0.0",
     "react-dom": "16.13.1",
     "react-hotkeys": "2.0.0",
     "react-i18next": "11.8.5",
@@ -98,7 +98,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"
@@ -132,6 +132,7 @@
     "@types/underscore": "1.7.36",
     "@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",
@@ -153,44 +154,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",
+    "html-webpack-plugin": "5.3.2",
-    "jest": "25.5.4",
+    "jest": "26.6.3",
-    "jest-canvas-mock": "2.1.0",
+    "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.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.3.4",
     "url-loader": "1.1.1",
     "wait-on": "4.0.2",
-    "webpack": "4.46.0",
+    "webpack": "5.47.0",
-    "webpack-bundle-analyzer": "3.6.1",
+    "webpack-bundle-analyzer": "4.4.2",
-    "webpack-cli": "3.3.10",
+    "webpack-cli": "4.7.2",
-    "webpack-dev-server": "3.11.0"
+    "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:prod": "webpack  --mode production",
-    "pack:fast": "node --max_old_space_size=10196 ./node_modules/webpack/bin/webpack.js  --mode development --progress",
+    "pack:fast": "webpack  --mode development --progress",
     "copyToConsumers": "node copyToConsumers",
     "test": "rimraf coverage && jest",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",

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>

src/Common/Constants.ts

@@ -1,371 +0,0 @@
-export class CodeOfConductEndpoints {
-  public static privacyStatement: string = "https://aka.ms/ms-privacy-policy";
-  public static codeOfConduct: string = "https://aka.ms/cosmos-code-of-conduct";
-  public static termsOfUse: string = "https://aka.ms/ms-terms-of-use";
-}
-
-export class EndpointsRegex {
-  public static readonly cassandra = [
-    "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
-    "HostName=(.*).cassandra.cosmos.azure.com",
-  ];
-  public static readonly mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
-  public static readonly mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
-  public static readonly sql = "AccountEndpoint=https://(.*).documents.azure.com";
-  public static readonly table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";
-}
-
-export class ApiEndpoints {
-  public static runtimeProxy: string = "/api/RuntimeProxy";
-  public static guestRuntimeProxy: string = "/api/guest/RuntimeProxy";
-}
-
-export class ServerIds {
-  public static localhost: string = "localhost";
-  public static blackforest: string = "blackforest";
-  public static fairfax: string = "fairfax";
-  public static mooncake: string = "mooncake";
-  public static productionPortal: string = "prod";
-  public static dev: string = "dev";
-}
-
-export class ArmApiVersions {
-  public static readonly documentDB: string = "2015-11-06";
-  public static readonly arcadia: string = "2019-06-01-preview";
-  public static readonly arcadiaLivy: string = "2019-11-01-preview";
-  public static readonly arm: string = "2015-11-01";
-  public static readonly armFeatures: string = "2014-08-01-preview";
-  public static readonly publicVersion = "2020-04-01";
-}
-
-export class ArmResourceTypes {
-  public static readonly notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
-  public static readonly synapseWorkspaces = "Microsoft.Synapse/workspaces";
-}
-
-export class BackendDefaults {
-  public static partitionKeyKind = "Hash";
-  public static singlePartitionStorageInGb: string = "10";
-  public static multiPartitionStorageInGb: string = "100";
-  public static maxChangeFeedRetentionDuration: number = 10;
-  public static partitionKeyVersion = 2;
-}
-
-export class ClientDefaults {
-  public static requestTimeoutMs: number = 60000;
-  public static portalCacheTimeoutMs: number = 10000;
-  public static errorNotificationTimeoutMs: number = 5000;
-  public static copyHelperTimeoutMs: number = 2000;
-  public static waitForDOMElementMs: number = 500;
-  public static cacheBustingTimeoutMs: number =
-    10 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static databaseThroughputIncreaseFactor: number = 100;
-  public static readonly arcadiaTokenRefreshInterval: number =
-    20 /** minutes **/ * 60 /** to seconds **/ * 1000 /** to milliseconds **/;
-  public static readonly arcadiaTokenRefreshIntervalPaddingMs: number = 2000;
-}
-
-export enum AccountKind {
-  DocumentDB = "DocumentDB",
-  MongoDB = "MongoDB",
-  Parse = "Parse",
-  GlobalDocumentDB = "GlobalDocumentDB",
-  Default = "DocumentDB",
-}
-
-export class CorrelationBackend {
-  public static Url: string = "https://aka.ms/cosmosdbanalytics";
-}
-
-export class CapabilityNames {
-  public static EnableTable: string = "EnableTable";
-  public static EnableGremlin: string = "EnableGremlin";
-  public static EnableCassandra: string = "EnableCassandra";
-  public static EnableAutoScale: string = "EnableAutoScale";
-  public static readonly EnableNotebooks: string = "EnableNotebooks";
-  public static readonly EnableStorageAnalytics: string = "EnableStorageAnalytics";
-  public static readonly EnableMongo: string = "EnableMongo";
-  public static readonly EnableServerless: string = "EnableServerless";
-}
-
-// flight names returned from the portal are always lowercase
-export class Flights {
-  public static readonly SettingsV2 = "settingsv2";
-  public static readonly MongoIndexEditor = "mongoindexeditor";
-  public static readonly MongoIndexing = "mongoindexing";
-  public static readonly AutoscaleTest = "autoscaletest";
-  public static readonly PartitionKeyTest = "partitionkeytest";
-}
-
-export class AfecFeatures {
-  public static readonly Spark = "spark-public-preview";
-  public static readonly Notebooks = "sparknotebooks-public-preview";
-  public static readonly StorageAnalytics = "storageanalytics-public-preview";
-}
-
-export class TagNames {
-  public static defaultExperience: string = "defaultExperience";
-}
-
-export class MongoDBAccounts {
-  public static protocol: string = "https";
-  public static defaultPort: string = "10255";
-}
-
-export enum MongoBackendEndpointType {
-  local,
-  remote,
-}
-
-// TODO: 435619 Add default endpoints per cloud and use regional only when available
-export class CassandraBackend {
-  public static readonly createOrDeleteApi: string = "api/cassandra/createordelete";
-  public static readonly guestCreateOrDeleteApi: string = "api/guest/cassandra/createordelete";
-  public static readonly queryApi: string = "api/cassandra";
-  public static readonly guestQueryApi: string = "api/guest/cassandra";
-  public static readonly keysApi: string = "api/cassandra/keys";
-  public static readonly guestKeysApi: string = "api/guest/cassandra/keys";
-  public static readonly schemaApi: string = "api/cassandra/schema";
-  public static readonly guestSchemaApi: string = "api/guest/cassandra/schema";
-}
-
-export class Queries {
-  public static CustomPageOption: string = "custom";
-  public static UnlimitedPageOption: string = "unlimited";
-  public static itemsPerPage: number = 100;
-  public static unlimitedItemsPerPage: number = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
-
-  public static QueryEditorMinHeightRatio: number = 0.1;
-  public static QueryEditorMaxHeightRatio: number = 0.4;
-  public static readonly DefaultMaxDegreeOfParallelism = 6;
-}
-
-export class SavedQueries {
-  public static readonly CollectionName: string = "___Query";
-  public static readonly DatabaseName: string = "___Cosmos";
-  public static readonly OfferThroughput: number = 400;
-  public static readonly PartitionKeyProperty: string = "id";
-}
-
-export class DocumentsGridMetrics {
-  public static DocumentsPerPage: number = 100;
-  public static IndividualRowHeight: number = 34;
-  public static BufferHeight: number = 28;
-  public static SplitterMinWidth: number = 200;
-  public static SplitterMaxWidth: number = 360;
-
-  public static DocumentEditorMinWidthRatio: number = 0.2;
-  public static DocumentEditorMaxWidthRatio: number = 0.4;
-}
-
-export class Areas {
-  public static ResourceTree: string = "Resource Tree";
-  public static ContextualPane: string = "Contextual Pane";
-  public static Tab: string = "Tab";
-  public static ShareDialog: string = "Share Access Dialog";
-  public static Notebook: string = "Notebook";
-}
-
-export class HttpHeaders {
-  public static activityId: string = "x-ms-activity-id";
-  public static apiType: string = "x-ms-cosmos-apitype";
-  public static authorization: string = "authorization";
-  public static collectionIndexTransformationProgress: string =
-    "x-ms-documentdb-collection-index-transformation-progress";
-  public static continuation: string = "x-ms-continuation";
-  public static correlationRequestId: string = "x-ms-correlation-request-id";
-  public static enableScriptLogging: string = "x-ms-documentdb-script-enable-logging";
-  public static guestAccessToken: string = "x-ms-encrypted-auth-token";
-  public static getReadOnlyKey: string = "x-ms-get-read-only-key";
-  public static connectionString: string = "x-ms-connection-string";
-  public static msDate: string = "x-ms-date";
-  public static location: string = "Location";
-  public static contentType: string = "Content-Type";
-  public static offerReplacePending: string = "x-ms-offer-replace-pending";
-  public static user: string = "x-ms-user";
-  public static populatePartitionStatistics: string = "x-ms-documentdb-populatepartitionstatistics";
-  public static queryMetrics: string = "x-ms-documentdb-query-metrics";
-  public static requestCharge: string = "x-ms-request-charge";
-  public static resourceQuota: string = "x-ms-resource-quota";
-  public static resourceUsage: string = "x-ms-resource-usage";
-  public static retryAfterMs: string = "x-ms-retry-after-ms";
-  public static scriptLogResults: string = "x-ms-documentdb-script-log-results";
-  public static populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
-  public static supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
-  public static usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
-  public static autoPilotThroughput = "autoscaleSettings";
-  public static autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
-  public static partitionKey: string = "x-ms-documentdb-partitionkey";
-  public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
-  public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
-}
-
-export class ApiType {
-  // Mapped to hexadecimal values in the backend
-  public static readonly MongoDB: number = 1;
-  public static readonly Gremlin: number = 2;
-  public static readonly Cassandra: number = 4;
-  public static readonly Table: number = 8;
-  public static readonly SQL: number = 16;
-}
-
-export class HttpStatusCodes {
-  public static readonly OK: number = 200;
-  public static readonly Created: number = 201;
-  public static readonly Accepted: number = 202;
-  public static readonly NoContent: number = 204;
-  public static readonly NotModified: number = 304;
-  public static readonly Unauthorized: number = 401;
-  public static readonly Forbidden: number = 403;
-  public static readonly NotFound: number = 404;
-  public static readonly TooManyRequests: number = 429;
-  public static readonly Conflict: number = 409;
-
-  public static readonly InternalServerError: number = 500;
-  public static readonly BadGateway: number = 502;
-  public static readonly ServiceUnavailable: number = 503;
-  public static readonly GatewayTimeout: number = 504;
-
-  public static readonly RetryableStatusCodes: number[] = [
-    HttpStatusCodes.TooManyRequests,
-    HttpStatusCodes.InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
-    HttpStatusCodes.BadGateway,
-    HttpStatusCodes.ServiceUnavailable,
-    HttpStatusCodes.GatewayTimeout,
-  ];
-}
-
-export class Urls {
-  public static feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
-  public static autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
-  public static freeTierInformation = "https://aka.ms/cosmos-free-tier";
-  public static cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";
-}
-
-export class HashRoutePrefixes {
-  public static databases: string = "/dbs/{db_id}";
-  public static collections: string = "/dbs/{db_id}/colls/{coll_id}";
-  public static sprocHash: string = "/sprocs/";
-  public static sprocs: string = HashRoutePrefixes.collections + HashRoutePrefixes.sprocHash + "{sproc_id}";
-  public static docs: string = HashRoutePrefixes.collections + "/docs/{doc_id}/";
-  public static conflicts: string = HashRoutePrefixes.collections + "/conflicts";
-
-  public static databasesWithId(databaseId: string): string {
-    return this.databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static collectionsWithIds(databaseId: string, collectionId: string): string {
-    const transformedDatabasePrefix: string = this.collections.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-
-  public static sprocWithIds(
-    databaseId: string,
-    collectionId: string,
-    sprocId: string,
-    stripFirstSlash: boolean = true
-  ): string {
-    const transformedDatabasePrefix: string = this.sprocs.replace("{db_id}", databaseId);
-
-    const transformedSprocRoute: string = transformedDatabasePrefix
-      .replace("{coll_id}", collectionId)
-      .replace("{sproc_id}", sprocId);
-    if (!!stripFirstSlash) {
-      return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
-    }
-
-    return transformedSprocRoute;
-  }
-
-  public static conflictsWithIds(databaseId: string, collectionId: string) {
-    const transformedDatabasePrefix: string = this.conflicts.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
-  }
-
-  public static docsWithIds(databaseId: string, collectionId: string, docId: string) {
-    const transformedDatabasePrefix: string = this.docs.replace("{db_id}", databaseId);
-
-    return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("{doc_id}", docId).replace("/", ""); // strip the first slash since hasher adds it
-  }
-}
-
-export class ConfigurationOverridesValues {
-  public static IsBsonSchemaV2: string = "true";
-}
-
-export class KeyCodes {
-  public static Space: number = 32;
-  public static Enter: number = 13;
-  public static Escape: number = 27;
-  public static UpArrow: number = 38;
-  public static DownArrow: number = 40;
-  public static LeftArrow: number = 37;
-  public static RightArrow: number = 39;
-  public static Tab: number = 9;
-}
-
-// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
-export class NormalizedEventKey {
-  public static readonly Space = " ";
-  public static readonly Enter = "Enter";
-  public static readonly Escape = "Escape";
-  public static readonly UpArrow = "ArrowUp";
-  public static readonly DownArrow = "ArrowDown";
-  public static readonly LeftArrow = "ArrowLeft";
-  public static readonly RightArrow = "ArrowRight";
-}
-
-export class TryCosmosExperience {
-  public static extendUrl: string = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
-  public static deleteUrl: string = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
-  public static collectionsPerAccount: number = 3;
-  public static maxRU: number = 5000;
-  public static defaultRU: number = 3000;
-}
-
-export class OfferVersions {
-  public static V1: string = "V1";
-  public static V2: string = "V2";
-}
-
-export enum ConflictOperationType {
-  Replace = "replace",
-  Create = "create",
-  Delete = "delete",
-}
-
-export const EmulatorMasterKey =
-  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
-  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
-
-// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
-export const StyleConstants = require("less-vars-loader!../../less/Common/Constants.less");
-
-export class Notebook {
-  public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
-  public static readonly kernelRestartInitialDelayMs = 1000;
-  public static readonly kernelRestartMaxDelayMs = 20000;
-  public static readonly autoSaveIntervalMs = 120000;
-}
-
-export class SparkLibrary {
-  public static readonly nameMinLength = 3;
-  public static readonly nameMaxLength = 63;
-}
-
-export class AnalyticalStorageTtl {
-  public static readonly Days90: number = 7776000;
-  public static readonly Infinite: number = -1;
-  public static readonly Disabled: number = 0;
-}
-
-export class TerminalQueryParams {
-  public static readonly Terminal = "terminal";
-  public static readonly Server = "server";
-  public static readonly Token = "token";
-  public static readonly SubscriptionId = "subscriptionId";
-  public static readonly TerminalEndpoint = "terminalEndpoint";
-}

src/Common/Constants/AfecFeatures.ts

@@ -0,0 +1,3 @@
+export const Spark = "spark-public-preview";
+export const Notebooks = "sparknotebooks-public-preview";
+export const StorageAnalytics = "storageanalytics-public-preview";

src/Common/Constants/AnalyticalStorageTtl.ts

@@ -0,0 +1,3 @@
+export const Days90 = 7776000;
+export const Infinite = -1;
+export const Disabled = 0;

src/Common/Constants/ApiEndpoints.ts

@@ -0,0 +1,2 @@
+export const runtimeProxy = "/api/RuntimeProxy";
+export const guestRuntimeProxy = "/api/guest/RuntimeProxy";

src/Common/Constants/ApiType.ts

@@ -0,0 +1,6 @@
+// Mapped to hexadecimal values in the backend
+export const MongoDB = 1;
+export const Gremlin = 2;
+export const Cassandra = 4;
+export const Table = 8;
+export const SQL = 16;

src/Common/Constants/Areas.ts

@@ -0,0 +1,5 @@
+export const ResourceTree = "Resource Tree";
+export const ContextualPane = "Contextual Pane";
+export const Tab = "Tab";
+export const ShareDialog = "Share Access Dialog";
+export const Notebook = "Notebook";

src/Common/Constants/ArmApiVersions.ts

@@ -0,0 +1,6 @@
+export const documentDB = "2015-11-06";
+export const arcadia = "2019-06-01-preview";
+export const arcadiaLivy = "2019-11-01-preview";
+export const arm = "2015-11-01";
+export const armFeatures = "2014-08-01-preview";
+export const publicVersion = "2020-04-01";

src/Common/Constants/ArmResourceTypes.ts

@@ -0,0 +1,2 @@
+export const notebookWorkspaces = "Microsoft.DocumentDB/databaseAccounts/notebookWorkspaces";
+export const synapseWorkspaces = "Microsoft.Synapse/workspaces";

src/Common/Constants/BackendDefaults.ts

@@ -0,0 +1,5 @@
+export const partitionKeyKind = "Hash";
+export const singlePartitionStorageInGb = "10";
+export const multiPartitionStorageInGb = "100";
+export const maxChangeFeedRetentionDuration = 10;
+export const partitionKeyVersion = 2;

src/Common/Constants/CapabilityNames.ts

@@ -0,0 +1,8 @@
+export const EnableTable = "EnableTable";
+export const EnableGremlin = "EnableGremlin";
+export const EnableCassandra = "EnableCassandra";
+export const EnableAutoScale = "EnableAutoScale";
+export const EnableNotebooks = "EnableNotebooks";
+export const EnableStorageAnalytics = "EnableStorageAnalytics";
+export const EnableMongo = "EnableMongo";
+export const EnableServerless = "EnableServerless";

src/Common/Constants/CassandraBackend.ts

@@ -0,0 +1,9 @@
+// TODO: 435619 Add default endpoints per cloud and use regional only when available
+export const createOrDeleteApi = "api/cassandra/createordelete";
+export const guestCreateOrDeleteApi = "api/guest/cassandra/createordelete";
+export const queryApi = "api/cassandra";
+export const guestQueryApi = "api/guest/cassandra";
+export const keysApi = "api/cassandra/keys";
+export const guestKeysApi = "api/guest/cassandra/keys";
+export const schemaApi = "api/cassandra/schema";
+export const guestSchemaApi = "api/guest/cassandra/schema";

src/Common/Constants/ClientDefaults.ts

@@ -0,0 +1,9 @@
+export const requestTimeoutMs = 60000;
+export const portalCacheTimeoutMs = 10000;
+export const errorNotificationTimeoutMs = 5000;
+export const copyHelperTimeoutMs = 2000;
+export const waitForDOMElementMs = 500;
+export const cacheBustingTimeoutMs = 10 /** minutes **/ * 60 /** to seconds **/ * 1000; /** to milliseconds **/
+export const databaseThroughputIncreaseFactor = 100;
+export const arcadiaTokenRefreshInterval = 20 /** minutes **/ * 60 /** to seconds **/ * 1000; /** to milliseconds **/
+export const arcadiaTokenRefreshIntervalPaddingMs = 2000;

src/Common/Constants/CodeOfConductEndpoints.ts

@@ -0,0 +1,3 @@
+export const privacyStatement = "https://aka.ms/ms-privacy-policy";
+export const codeOfConduct = "https://aka.ms/cosmos-code-of-conduct";
+export const termsOfUse = "https://aka.ms/ms-terms-of-use";

src/Common/Constants/ConfigurationOverridesValues.ts

@@ -0,0 +1 @@
+export const IsBsonSchemaV2 = "true";

src/Common/Constants/CorrelationBackend.ts

@@ -0,0 +1 @@
+export const Url = "https://aka.ms/cosmosdbanalytics";

src/Common/Constants/DocumentsGridMetrics.ts

@@ -0,0 +1,8 @@
+export const DocumentsPerPage = 100;
+export const IndividualRowHeight = 34;
+export const BufferHeight = 28;
+export const SplitterMinWidth = 200;
+export const SplitterMaxWidth = 360;
+
+export const DocumentEditorMinWidthRatio = 0.2;
+export const DocumentEditorMaxWidthRatio = 0.4;

src/Common/Constants/EndpointsRegex.ts

@@ -0,0 +1,8 @@
+export const cassandra = [
+  "AccountEndpoint=(.*).cassandra.cosmosdb.azure.com",
+  "HostName=(.*).cassandra.cosmos.azure.com",
+];
+export const mongo = "mongodb://.*:(.*)@(.*).documents.azure.com";
+export const mongoCompute = "mongodb://.*:(.*)@(.*).mongo.cosmos.azure.com";
+export const sql = "AccountEndpoint=https://(.*).documents.azure.com";
+export const table = "TableEndpoint=https://(.*).table.cosmosdb.azure.com";

src/Common/Constants/Flights.ts

@@ -0,0 +1,8 @@
+// flight names returned from the portal are always lowercase
+export const SettingsV2 = "settingsv2";
+export const MongoIndexEditor = "mongoindexeditor";
+export const MongoIndexing = "mongoindexing";
+export const AutoscaleTest = "autoscaletest";
+export const PartitionKeyTest = "partitionkeytest";
+export const PKPartitionKeyTest = "pkpartitionkeytest";
+export const Phoenix = "phoenix";

src/Common/Constants/HashRoutePrefixes.ts

@@ -0,0 +1,40 @@
+export const databases = "/dbs/{db_id}";
+export const collections = "/dbs/{db_id}/colls/{coll_id}";
+export const sprocHash = "/sprocs/";
+export const sprocs = collections + sprocHash + "{sproc_id}";
+export const docs = collections + "/docs/{doc_id}/";
+export const conflicts = collections + "/conflicts";
+
+export const databasesWithId = (databaseId: string) => {
+  return databases.replace("{db_id}", databaseId).replace("/", ""); // strip the first slash since hasher adds it
+};
+
+export const collectionsWithIds = (databaseId: string, collectionId: string) => {
+  const transformedDatabasePrefix = collections.replace("{db_id}", databaseId);
+
+  return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it
+};
+
+export const sprocWithIds = (databaseId: string, collectionId: string, sprocId: string, stripFirstSlash = true) => {
+  const transformedDatabasePrefix = sprocs.replace("{db_id}", databaseId);
+
+  const transformedSprocRoute = transformedDatabasePrefix
+    .replace("{coll_id}", collectionId)
+    .replace("{sproc_id}", sprocId);
+  if (stripFirstSlash) {
+    return transformedSprocRoute.replace("/", ""); // strip the first slash since hasher adds it
+  }
+
+  return transformedSprocRoute;
+};
+
+export const conflictsWithIds = (databaseId: string, collectionId: string) => {
+  const transformedDatabasePrefix = conflicts.replace("{db_id}", databaseId);
+
+  return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("/", ""); // strip the first slash since hasher adds it;
+};
+
+export const docsWithIds = (databaseId: string, collectionId: string, docId: string): string => {
+  const transformedDatabasePrefix = docs.replace("{db_id}", databaseId);
+  return transformedDatabasePrefix.replace("{coll_id}", collectionId).replace("{doc_id}", docId).replace("/", ""); // strip the first slash since hasher adds it
+};

src/Common/Constants/HttpHeaders.ts

@@ -0,0 +1,30 @@
+export const activityId = "x-ms-activity-id";
+export const apiType = "x-ms-cosmos-apitype";
+export const authorization = "authorization";
+export const collectionIndexTransformationProgress = "x-ms-documentdb-collection-index-transformation-progress";
+export const continuation = "x-ms-continuation";
+export const correlationRequestId = "x-ms-correlation-request-id";
+export const enableScriptLogging = "x-ms-documentdb-script-enable-logging";
+export const guestAccessToken = "x-ms-encrypted-auth-token";
+export const getReadOnlyKey = "x-ms-get-read-only-key";
+export const connectionString = "x-ms-connection-string";
+export const msDate = "x-ms-date";
+export const location = "Location";
+export const contentType = "Content-Type";
+export const offerReplacePending = "x-ms-offer-replace-pending";
+export const user = "x-ms-user";
+export const populatePartitionStatistics = "x-ms-documentdb-populatepartitionstatistics";
+export const queryMetrics = "x-ms-documentdb-query-metrics";
+export const requestCharge = "x-ms-request-charge";
+export const resourceQuota = "x-ms-resource-quota";
+export const resourceUsage = "x-ms-resource-usage";
+export const retryAfterMs = "x-ms-retry-after-ms";
+export const scriptLogResults = "x-ms-documentdb-script-log-results";
+export const populateCollectionThroughputInfo = "x-ms-documentdb-populatecollectionthroughputinfo";
+export const supportSpatialLegacyCoordinates = "x-ms-documentdb-supportspatiallegacycoordinates";
+export const usePolygonsSmallerThanAHemisphere = "x-ms-documentdb-usepolygonssmallerthanahemisphere";
+export const autoPilotThroughput = "autoscaleSettings";
+export const autoPilotThroughputSDK = "x-ms-cosmos-offer-autopilot-settings";
+export const partitionKey = "x-ms-documentdb-partitionkey";
+export const migrateOfferToManualThroughput = "x-ms-cosmos-migrate-offer-to-manual-throughput";
+export const migrateOfferToAutopilot = "x-ms-cosmos-migrate-offer-to-autopilot";

src/Common/Constants/HttpStatusCodes.ts

@@ -0,0 +1,23 @@
+export const OK = 200;
+export const Created = 201;
+export const Accepted = 202;
+export const NoContent = 204;
+export const NotModified = 304;
+export const Unauthorized = 401;
+export const Forbidden = 403;
+export const NotFound = 404;
+export const TooManyRequests = 429;
+export const Conflict = 409;
+
+export const InternalServerError = 500;
+export const BadGateway = 502;
+export const ServiceUnavailable = 503;
+export const GatewayTimeout = 504;
+
+export const RetryableStatusCodes: number[] = [
+  TooManyRequests,
+  InternalServerError, // TODO: Handle all 500s on Portal backend and remove from retries list
+  BadGateway,
+  ServiceUnavailable,
+  GatewayTimeout,
+];

src/Common/Constants/KeyCodes.ts

@@ -0,0 +1,8 @@
+export const Space = 32;
+export const Enter = 13;
+export const Escape = 27;
+export const UpArrow = 38;
+export const DownArrow = 40;
+export const LeftArrow = 37;
+export const RightArrow = 39;
+export const Tab = 9;

src/Common/Constants/MongoDBAccounts.ts

@@ -0,0 +1,2 @@
+export const protocol = "https";
+export const defaultPort = "10255";

src/Common/Constants/NormalizedEventKey.ts

@@ -0,0 +1,8 @@
+// Normalized per: https://www.w3.org/TR/uievents-key/#named-key-attribute-values
+export const Space = " ";
+export const Enter = "Enter";
+export const Escape = "Escape";
+export const UpArrow = "ArrowUp";
+export const DownArrow = "ArrowDown";
+export const LeftArrow = "ArrowLeft";
+export const RightArrow = "ArrowRight";

src/Common/Constants/Notebook.ts

@@ -0,0 +1,27 @@
+export const defaultBasePath = "./notebooks";
+export const heartbeatDelayMs = 60000;
+export const kernelRestartInitialDelayMs = 1000;
+export const kernelRestartMaxDelayMs = 20000;
+export const autoSaveIntervalMs = 120000;
+export const memoryGuageToGB = 1048576;
+export const temporarilyDownMsg = "Notebooks is currently not available. We are working on it.";
+export const mongoShellTemporarilyDownMsg =
+  "We have identified an issue with the Mongo Shell and it is unavailable right now. We are actively working on the mitigation.";
+export const cassandraShellTemporarilyDownMsg =
+  "We have identified an issue with the Cassandra Shell and it is unavailable right now. We are actively working on the mitigation.";
+export const saveNotebookModalTitle = "Save Notebook in temporary workspace";
+export const saveNotebookModalContent =
+  "This notebook will be saved in the temporary workspace and will be removed when the session expires. To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends.";
+export const newNotebookModalTitle = "Create Notebook in temporary workspace";
+export const newNotebookUploadModalTitle = "Upload Notebook in temporary workspace";
+export const 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.";
+export const 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. ";
+export const 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.";
+export const 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. ";
+export const cosmosNotebookHomePageUrl = "https://aka.ms/cosmos-notebooks-limits";
+export const cosmosNotebookGitDocumentationUrl = "https://aka.ms/cosmos-notebooks-github";
+export const learnMore = "Learn more.";

src/Common/Constants/OfferVersions.ts

@@ -0,0 +1,2 @@
+export const V1 = "V1";
+export const V2 = "V2";

src/Common/Constants/Queries.ts

@@ -0,0 +1,8 @@
+export const CustomPageOption = "custom";
+export const UnlimitedPageOption = "unlimited";
+export const itemsPerPage = 100;
+export const unlimitedItemsPerPage = 100; // TODO: Figure out appropriate value so it works for accounts with a large number of partitions
+
+export const QueryEditorMinHeightRatio = 0.1;
+export const QueryEditorMaxHeightRatio = 0.4;
+export const DefaultMaxDegreeOfParallelism = 6;

src/Common/Constants/SavedQueries.ts

@@ -0,0 +1,4 @@
+export const CollectionName = "___Query";
+export const DatabaseName = "___Cosmos";
+export const OfferThroughput = 400;
+export const PartitionKeyProperty = "id";

src/Common/Constants/ServerIds.ts

@@ -0,0 +1,6 @@
+export const localhost = "localhost";
+export const blackforest = "blackforest";
+export const fairfax = "fairfax";
+export const mooncake = "mooncake";
+export const productionPortal = "prod";
+export const dev = "dev";

src/Common/Constants/SparkLibrary.ts

@@ -0,0 +1,2 @@
+export const nameMinLength = 3;
+export const nameMaxLength = 63;

src/Common/Constants/TagNames.ts

@@ -0,0 +1 @@
+export const defaultExperience = "defaultExperience";

src/Common/Constants/TerminalQueryParams.ts

@@ -0,0 +1,5 @@
+export const Terminal = "terminal";
+export const Server = "server";
+export const Token = "token";
+export const SubscriptionId = "subscriptionId";
+export const TerminalEndpoint = "terminalEndpoint";

src/Common/Constants/TryCosmosExperience.ts

@@ -0,0 +1,5 @@
+export const extendUrl = "https://trycosmosdb.azure.com/api/resource/extendportal?userId={0}";
+export const deleteUrl = "https://trycosmosdb.azure.com/api/resource/deleteportal?userId={0}";
+export const collectionsPerAccount = 3;
+export const maxRU = 5000;
+export const defaultRU = 3000;

src/Common/Constants/Urls.ts

@@ -0,0 +1,4 @@
+export const feedbackEmail = "https://aka.ms/cosmosdbfeedback?subject=Cosmos%20DB%20Data%20Explorer%20Feedback";
+export const autoscaleMigration = "https://aka.ms/cosmos-autoscale-migration";
+export const freeTierInformation = "https://aka.ms/cosmos-free-tier";
+export const cosmosPricing = "https://aka.ms/azure-cosmos-db-pricing";

src/Common/Constants/index.ts

@@ -0,0 +1,105 @@
+import * as AfecFeatures from "./AfecFeatures";
+import * as AnalyticalStorageTtl from "./AnalyticalStorageTtl";
+import * as ApiEndpoints from "./ApiEndpoints";
+import * as ApiType from "./ApiType";
+import * as Areas from "./Areas";
+import * as ArmApiVersions from "./ArmApiVersions";
+import * as ArmResourceTypes from "./ArmResourceTypes";
+import * as BackendDefaults from "./BackendDefaults";
+import * as CapabilityNames from "./CapabilityNames";
+import * as CassandraBackend from "./CassandraBackend";
+import * as ClientDefaults from "./ClientDefaults";
+import * as CodeOfConductEndpoints from "./CodeOfConductEndpoints";
+import * as ConfigurationOverridesValues from "./ConfigurationOverridesValues";
+import * as CorrelationBackend from "./CorrelationBackend";
+import * as DocumentsGridMetrics from "./DocumentsGridMetrics";
+import * as EndpointsRegex from "./EndpointsRegex";
+import * as Flights from "./Flights";
+import * as HashRoutePrefixes from "./HashRoutePrefixes";
+import * as HttpHeaders from "./HttpHeaders";
+import * as HttpStatusCodes from "./HttpStatusCodes";
+import * as KeyCodes from "./KeyCodes";
+import * as MongoDBAccounts from "./MongoDBAccounts";
+import * as NormalizedEventKey from "./NormalizedEventKey";
+import * as Notebook from "./Notebook";
+import * as OfferVersions from "./OfferVersions";
+import * as Queries from "./Queries";
+import * as SavedQueries from "./SavedQueries";
+import * as ServerIds from "./ServerIds";
+import * as SparkLibrary from "./SparkLibrary";
+import * as TagNames from "./TagNames";
+import * as TerminalQueryParams from "./TerminalQueryParams";
+import * as TryCosmosExperience from "./TryCosmosExperience";
+import * as Urls from "./Urls";
+
+const StyleConstants = require("less-vars-loader!../../../less/Common/Constants.less");
+
+export {
+  StyleConstants,
+  SparkLibrary,
+  ConfigurationOverridesValues,
+  OfferVersions,
+  AnalyticalStorageTtl,
+  Notebook,
+  TryCosmosExperience,
+  NormalizedEventKey,
+  KeyCodes,
+  HashRoutePrefixes,
+  Urls,
+  HttpStatusCodes,
+  ApiType,
+  HttpHeaders,
+  Areas,
+  DocumentsGridMetrics,
+  SavedQueries,
+  Queries,
+  CassandraBackend,
+  MongoDBAccounts,
+  TagNames,
+  AfecFeatures,
+  Flights,
+  CorrelationBackend,
+  CapabilityNames,
+  ClientDefaults,
+  BackendDefaults,
+  ArmResourceTypes,
+  ArmApiVersions,
+  TerminalQueryParams,
+  CodeOfConductEndpoints,
+  ApiEndpoints,
+  EndpointsRegex,
+  ServerIds,
+};
+
+export enum ConnectionStatusType {
+  Connect = "Connect",
+  Connecting = "Connecting",
+  Connected = "Connected",
+  Failed = "Connection Failed",
+  ReConnect = "Reconnect",
+}
+
+export enum ConflictOperationType {
+  Replace = "replace",
+  Create = "create",
+  Delete = "delete",
+}
+
+export const EmulatorMasterKey =
+  //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
+  "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";
+
+// A variable @MyVariable defined in Constants.less is accessible as StyleConstants.MyVariable
+
+export enum AccountKind {
+  DocumentDB = "DocumentDB",
+  MongoDB = "MongoDB",
+  Parse = "Parse",
+  GlobalDocumentDB = "GlobalDocumentDB",
+  Default = "DocumentDB",
+}
+
+export enum MongoBackendEndpointType {
+  local,
+  remote,
+}

src/Common/MongoProxyClient.test.ts

@@ -3,8 +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";
+import {
+  deleteDocument,
+  getEndpoint,
+  getFeatureEndpointOrDefault,
+  queryDocuments,
+  readDocument,
+  updateDocument,
+} from "./MongoProxyClient";
 
 const databaseId = "testDB";
 
@@ -246,4 +254,31 @@ describe("MongoProxyClient", () => {
       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");
+    });
+  });
 });

src/Common/MongoProxyClient.ts

@@ -6,6 +6,7 @@ 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";
@@ -78,9 +79,8 @@ export function queryDocuments(
         : "",
   };
 
-  const endpoint = getEndpoint() || "";
+  const endpoint = getFeatureEndpointOrDefault("resourcelist") || "";
-
+  const headers: HeadersInit = {
-  const headers = {
     ...defaultHeaders,
     ...authHeaders(),
     [CosmosSDKConstants.HttpHeaders.IsQuery]: "true",
@@ -141,7 +141,8 @@ export function readDocument(
         : "",
   };
 
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("readDocument");
+
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
       method: "GET",
@@ -181,7 +182,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)}`, {
@@ -225,7 +226,7 @@ export function updateDocument(
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("updateDocument");
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -266,7 +267,7 @@ export function deleteDocument(databaseId: string, collection: Collection, docum
         ? documentId.partitionKeyProperty
         : "",
   };
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("deleteDocument");
 
   return window
     .fetch(`${endpoint}?${queryString.stringify(params)}`, {
@@ -309,7 +310,7 @@ export function createMongoCollectionWithProxy(
     autoPilotThroughput: params.autoPilotMaxThroughput?.toString(),
   };
 
-  const endpoint = getEndpoint();
+  const endpoint = getFeatureEndpointOrDefault("createCollectionWithProxy");
 
   return window
     .fetch(
@@ -333,8 +334,15 @@ export function createMongoCollectionWithProxy(
     });
 }
 
-export function getEndpoint(): string {
+export function getFeatureEndpointOrDefault(feature: string): string {
-  let url = (configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT) + "/api/mongo/explorer";
+  return hasFlag(userContext.features.mongoProxyAPIs, feature)
+    ? getEndpoint(userContext.features.mongoProxyEndpoint)
+    : getEndpoint();
+}
+
+export function getEndpoint(customEndpoint?: string): string {
+  let url = customEndpoint ? customEndpoint : configContext.MONGO_BACKEND_ENDPOINT || configContext.BACKEND_ENDPOINT;
+  url += "/api/mongo/explorer";
 
   if (userContext.authType === AuthType.EncryptedToken) {
     url = url.replace("api/mongo", "api/guest/mongo");

src/Common/ResourceTreeContainer.tsx

@@ -1,4 +1,4 @@
-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";
@@ -6,6 +6,7 @@ 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 ResourceTreeContainerProps {
   toggleLeftPaneExpanded: () => void;
@@ -18,6 +19,22 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
   isLeftPaneExpanded,
   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 */}
@@ -43,9 +60,11 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
                 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>
@@ -54,7 +73,7 @@ export const ResourceTreeContainer: FunctionComponent<ResourceTreeContainerProps
         </div>
         {userContext.authType === AuthType.ResourceToken ? (
           <ResourceTokenTree />
-        ) : userContext.features.enableKOResourceTree ? (
+        ) : userContext.features.enableKoResourceTree ? (
           <div style={{ overflowY: "auto" }} data-bind="react:resourceTree" />
         ) : (
           <ResourceTree container={container} />

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>
   );

src/Contracts/DataModels.ts

@@ -1,3 +1,5 @@
+import { ConnectionStatusType } from "../Common/Constants";
+
 export interface DatabaseAccount {
   id: string;
   name: string;
@@ -496,3 +498,8 @@ export interface MemoryUsageInfo {
   freeKB: number;
   totalKB: number;
 }
+
+export interface ContainerConnectionInfo {
+  status: ConnectionStatusType;
+  //need to add ram and rom info
+}

src/Controls/Heatmap/Heatmap.test.ts

@@ -22,8 +22,8 @@ describe("The Heatmap Control", () => {
   };
 
   let heatmap: Heatmap;
-  let theme: PortalTheme = 1;
+  const theme: PortalTheme = 1;
-  const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  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);

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]);
       }

src/Explorer/ContextMenuButtonFactory.tsx

@@ -83,6 +83,7 @@ export const createCollectionContextMenuButton = (
 
     items.push({
       iconSrc: HostedTerminalIcon,
+      isDisabled: useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown,
       onClick: () => {
         const selectedCollection: ViewModels.Collection = useSelectedNode.getState().findSelectedCollection();
         if (useNotebook.getState().isShellEnabled) {

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>

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,

src/Explorer/Controls/Dialog.tsx

@@ -13,6 +13,7 @@ import {
   Link,
   PrimaryButton,
   ProgressIndicator,
+  Text,
   TextField,
 } from "@fluentui/react";
 import React, { FC } from "react";
@@ -23,13 +24,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 +128,7 @@ export interface DialogProps {
   type?: DialogType;
   showCloseButton?: boolean;
   onDismiss?: () => void;
+  contentHtml?: JSX.Element;
 }
 
 const DIALOG_MIN_WIDTH = "400px";
@@ -88,6 +155,7 @@ export const Dialog: FC = () => {
     type,
     showCloseButton,
     onDismiss,
+    contentHtml,
   } = props || {};
 
   const dialogProps: IDialogProps = {
@@ -119,8 +187,7 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : {};
+      : undefined;
-
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}
@@ -130,6 +197,7 @@ export const Dialog: FC = () => {
           {linkProps.linkText} <FontIcon iconName="NavigateExternalInline" />
         </Link>
       )}
+      {contentHtml && <Text>{contentHtml}</Text>}
       {progressIndicatorProps && <ProgressIndicator {...progressIndicatorProps} />}
       <DialogFooter>
         <PrimaryButton {...primaryButtonProps} />

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;
+    }
+}

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 {
+interface InputTypeaheadComponentState {
-  matchedKey: string;
+  isSuggestionVisible: boolean;
-  value: any;
+  selectedChoice: Item;
-  caption: string;
+  filteredChoices: Item[];
-  group: string;
 }
 
-interface Cache {
-  inputValue: string;
-  selection: Item;
-}
-
-interface InputTypeaheadComponentState {}
-
 export class InputTypeaheadComponent extends React.Component<
   InputTypeaheadComponentProps,
   InputTypeaheadComponentState
 > {
-  private inputElt: HTMLElement;
+  constructor(props: InputTypeaheadComponentProps) {
-  private containerElt: HTMLElement;
-
-  private cache: Cache;
-  private inputValue: string;
-  private selection: Item;
-
-  public constructor(props: InputTypeaheadComponentProps) {
     super(props);
-    this.cache = {
+    this.state = {
-      inputValue: null,
+      isSuggestionVisible: false,
-      selection: null,
+      filteredChoices: [],
+      selectedChoice: {
+        caption: "",
+        value: "",
+      },
     };
   }
 
-  /**
+  private onRenderCell = (item: Item): JSX.Element => {
-   * 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 {
     return (
-      <span className="input-typeahead-container">
+      <div className="input-typeahead-chocies-container" onClick={() => this.onChoiceClick(item)}>
-        <div
+        <p className="choice-caption">{item.caption}</p>
-          className="input-typehead"
+        <span>{item.value}</span>
-          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>
     );
-  }
+  };
 
-  private onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
+  private onChoiceClick = (item: Item): void => {
-    if (event.keyCode === KeyCodes.Enter) {
+    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.props.submitFct(this.props.defaultValue, this.state.selectedChoice);
-        $(this.containerElt).children(".typeahead__result").hide();
+        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;
-
-          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);
-          }
-        },
-      },
-      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>";
-      },
-      dynamic: true,
   };
 
-    // Override options
+  private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
-    if (props.typeaheadOverrideOptions) {
+    return choices.filter((choice) =>
-      for (const p in props.typeaheadOverrideOptions) {
+      // @ts-ignore
-        options[p] = props.typeaheadOverrideOptions[p];
+      Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
-      }
+    );
-    }
+  };
 
-    if (props.hasOwnProperty("showCancelButton")) {
+  public render(): JSX.Element {
-      options.cancelButton = props.showCancelButton;
+    const { defaultValue, useTextarea, placeholder, onNewValue } = this.props;
-    }
+    const { isSuggestionVisible, selectedChoice, filteredChoices } = this.state;
+    const theme = getTheme();
 
-    $(this.inputElt).typeahead(options);
+    const iconButtonStyles = {
+      root: {
+        color: theme.palette.neutralPrimary,
+        marginLeft: "10px !important",
+        marginTop: "0px",
+        marginRight: "2px",
+        width: "42px",
+      },
+      rootHovered: {
+        color: theme.palette.neutralDark,
+      },
+    };
+    const cancelIcon: IIconProps = { iconName: "cancel" };
+    const searchIcon: IIconProps = { iconName: "Search" };
+
+    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>
+    );
   }
 }

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

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -17,6 +17,8 @@ import Explorer from "../../Explorer";
 import { NotebookClientV2 } from "../../Notebook/NotebookClientV2";
 import { NotebookComponentBootstrapper } from "../../Notebook/NotebookComponent/NotebookComponentBootstrapper";
 import NotebookReadOnlyRenderer from "../../Notebook/NotebookRenderer/NotebookReadOnlyRenderer";
+import { NotebookUtil } from "../../Notebook/NotebookUtil";
+import { useNotebook } from "../../Notebook/useNotebook";
 import { Dialog, TextFieldProps, useDialog } from "../Dialog";
 import { NotebookMetadataComponent } from "./NotebookMetadataComponent";
 import "./NotebookViewerComponent.less";
@@ -146,7 +148,9 @@ export class NotebookViewerComponent
             <NotebookMetadataComponent
               data={this.state.galleryItem}
               isFavorite={this.state.isFavorite}
-              downloadButtonText={this.props.container && "Download to my notebooks"}
+              downloadButtonText={
+                this.props.container && NotebookUtil.getNotebookBtnTitle(useNotebook.getState().notebookFolderName)
+              }
               onTagClick={this.props.onTagClick}
               onFavoriteClick={this.favoriteItem}
               onUnfavoriteClick={this.unfavoriteItem}

src/Explorer/Controls/QueriesGridReactComponent/QueriesGridComponent.tsx

@@ -29,6 +29,7 @@ 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 = "Open Saved Queries";
 
@@ -222,7 +223,11 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                   key: "Delete",
                   text: "Delete query",
                   onClick: async () => {
-                    if (window.confirm("Are you sure you want to delete this query?")) {
+                    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,
@@ -250,7 +255,10 @@ export class QueriesGridComponent extends React.Component<QueriesGridComponentPr
                           );
                         }
                         await this.fetchSavedQueries(); // get latest state
-                    }
+                      },
+                      "Cancel",
+                      undefined
+                    );
                   },
                 },
               ],

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,
+  DetailsList,
-  getCurrencySign,
+  DetailsListLayoutMode,
-  getAutoscalePricePerRu,
+  DetailsRow,
-  getMultimasterMultiplier,
-  computeRUUsagePriceHourly,
-  getPricePerRu,
-  estimatedCostDisclaimer,
-} from "../../../Utils/PricingUtils";
-import {
-  ITextFieldStyles,
   ICheckboxStyles,
-  IStackProps,
-  IStackTokens,
   IChoiceGroupStyles,
-  Link,
+  IColumn,
-  Text,
+  IDetailsColumnStyles,
-  IMessageBarStyles,
-  ITextStyles,
-  IDetailsRowStyles,
-  IStackStyles,
   IDetailsListStyles,
+  IDetailsRowProps,
+  IDetailsRowStyles,
   IDropdownStyles,
+  IMessageBarStyles,
   ISeparatorStyles,
+  IStackProps,
+  IStackStyles,
+  IStackTokens,
+  ITextFieldStyles,
+  ITextStyles,
+  Link,
   MessageBar,
   MessageBarType,
-  Stack,
+  SelectionMode,
   Spinner,
   SpinnerSize,
-  DetailsList,
+  Stack,
-  IColumn,
+  Text,
-  SelectionMode,
-  DetailsListLayoutMode,
-  IDetailsRowProps,
-  DetailsRow,
-  IDetailsColumnStyles,
 } 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
+  const multimasterMultiplier = getMultimasterMultiplier(numberOfRegions, isMultimaster);
-    ? getAutoscalePricePerRu(serverId, getMultimasterMultiplier(numberOfRegions, isMultimaster))
+  const pricePerRu: number = isAutoscale
-    : getPricePerRu(serverId);
+    ? 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>
 );
 

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,
         },
       }

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
@@ -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,
                 },
               }

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,
           },
         }

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,
                 },
               }

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

@@ -34,6 +34,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],
@@ -101,6 +102,7 @@ exports[`SettingsComponent renders 1`] = `
                 "isTabsContentExpanded": [Function],
                 "onRefreshDatabasesKeyPress": [Function],
                 "onRefreshResourcesClick": [Function],
+                "phoenixClient": PhoenixClient {},
                 "provideFeedbackEmail": [Function],
                 "queriesClient": QueriesClient {
                   "container": [Circular],

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,
         },
       }

src/Explorer/Controls/Tabs/TabComponent.less

@@ -1,7 +1,6 @@
 @import "../../../../less/Common/Constants";
 
 .tabComponentContainer {
-    overflow: hidden;
     height: 100%;
     .flex-display();
     .flex-direction();

src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx

@@ -6,6 +6,7 @@ import { userContext } from "../../../../UserContext";
 import {
   calculateEstimateNumber,
   computeRUUsagePriceHourly,
+  estimatedCostDisclaimer,
   getAutoscalePricePerRu,
   getCurrencySign,
   getMultimasterMultiplier,
@@ -42,11 +43,9 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
   const currency: string = getPriceCurrency(serverId);
   const currencySign: string = getCurrencySign(serverId);
   const multiplier = getMultimasterMultiplier(numberOfRegions, multimasterEnabled);
-  const pricePerRu = isAutoscale
+  const pricePerRu = isAutoscale ? getAutoscalePricePerRu(serverId, multiplier) : getPricePerRu(serverId, multiplier);
-    ? getAutoscalePricePerRu(serverId, multiplier) * multiplier
-    : getPricePerRu(serverId) * multiplier;
 
-  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>PricingUtils.estimatedCostDisclaimer</InfoTooltip>;
+  const iconWithEstimatedCostDisclaimer: JSX.Element = <InfoTooltip>{estimatedCostDisclaimer}</InfoTooltip>;
 
   if (isAutoscale) {
     return (

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -118,6 +118,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
         <input
           className="throughputInputRadioBtn"
           aria-label="Autoscale mode"
+          aria-required={true}
           checked={isAutoscaleSelected}
           type="radio"
           role="radio"
@@ -131,6 +132,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           aria-label="Manual mode"
           checked={!isAutoscaleSelected}
           type="radio"
+          aria-required={true}
           role="radio"
           tabIndex={0}
           onChange={(e) => handleOnChangeMode(e, "Manual")}

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -345,12 +345,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                     ariaLabel="Info"
                     className="panelInfoIcon"
                     iconName="Info"
+                    tabIndex={0}
                   >
                     <IconBase
                       ariaLabel="Info"
                       className="panelInfoIcon"
                       iconName="Info"
                       styles={[Function]}
+                      tabIndex={0}
                       theme={
                         Object {
                           "disableGlobalClassNames": false,
@@ -630,6 +632,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         className="panelInfoIcon root-57"
                         data-icon-name="Info"
                         role="img"
+                        tabIndex={0}
                       >
                         
                       </i>
@@ -651,6 +654,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
       >
         <input
           aria-label="Autoscale mode"
+          aria-required={true}
           checked={true}
           className="throughputInputRadioBtn"
           key=".0:$.0"
@@ -667,6 +671,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
         </span>
         <input
           aria-label="Manual mode"
+          aria-required={true}
           checked={false}
           className="throughputInputRadioBtn"
           key=".0:$.2"
@@ -1327,12 +1332,14 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                         ariaLabel="Info"
                         className="panelInfoIcon"
                         iconName="Info"
+                        tabIndex={0}
                       >
                         <IconBase
                           ariaLabel="Info"
                           className="panelInfoIcon"
                           iconName="Info"
                           styles={[Function]}
+                          tabIndex={0}
                           theme={
                             Object {
                               "disableGlobalClassNames": false,
@@ -1612,6 +1619,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
                             className="panelInfoIcon root-57"
                             data-icon-name="Info"
                             role="img"
+                            tabIndex={0}
                           >
                             
                           </i>

src/Explorer/Controls/TreeComponent/TreeComponent.tsx

@@ -243,6 +243,7 @@ export class TreeNodeComponent extends React.Component<TreeNodeComponentProps, T
       <div ref={this.contextMenuRef} onContextMenu={this.onRightClick} onKeyPress={this.onMoreButtonKeyPress}>
         <IconButton
           name="More"
+          title="More"
           className="treeMenuEllipsis"
           ariaLabel={menuItemLabel}
           menuIconProps={{

src/Explorer/Controls/TreeComponent/__snapshots__/TreeComponent.test.tsx.snap

@@ -211,6 +211,7 @@ exports[`TreeNodeComponent renders a simple node (sorted children, expanded) 1`]
             },
           }
         }
+        title="More"
       />
     </div>
   </div>
@@ -423,6 +424,7 @@ exports[`TreeNodeComponent renders sorted children, expanded, leaves and parents
             },
           }
         }
+        title="More"
       />
     </div>
   </div>

src/Explorer/DataSamples/DataSamplesUtil.test.ts

@@ -17,7 +17,6 @@ describe("DataSampleUtils", () => {
       collections: ko.observableArray<Collection>([collection]),
     } as Database;
     const explorer = {} as Explorer;
-    explorer.showOkModalDialog = () => {};
     useDatabases.getState().addDatabases([database]);
     const dataSamplesUtil = new DataSamplesUtil(explorer);
 

src/Explorer/DataSamples/DataSamplesUtil.ts

@@ -1,6 +1,7 @@
 import * as ViewModels from "../../Contracts/ViewModels";
 import { userContext } from "../../UserContext";
 import { logConsoleError, logConsoleInfo } from "../../Utils/NotificationConsoleUtils";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { useDatabases } from "../useDatabases";
 import { ContainerSampleGenerator } from "./ContainerSampleGenerator";
@@ -20,7 +21,7 @@ export class DataSamplesUtil {
     const containerName = generator.getCollectionId();
     if (this.hasContainer(databaseName, containerName, useDatabases.getState().databases)) {
       const msg = `The container ${containerName} in database ${databaseName} already exists. Please delete it and retry.`;
-      this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+      useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
       logConsoleError(msg);
       return;
     }
@@ -29,7 +30,7 @@ export class DataSamplesUtil {
       .createSampleContainerAsync()
       .catch((error) => logConsoleError(`Error creating sample container: ${error}`));
     const msg = `The sample ${containerName} in database ${databaseName} has been successfully created.`;
-    this.container.showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
+    useDialog.getState().showOkModalDialog(DataSamplesUtil.DialogTitle, msg);
     logConsoleInfo(msg);
   }
 

src/Explorer/Explorer.tsx

@@ -1,10 +1,11 @@
-import { IChoiceGroupProps } from "@fluentui/react";
+import { Link } from "@fluentui/react/lib/Link";
 import * as ko from "knockout";
 import React from "react";
 import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
+import { ConnectionStatusType, HttpStatusCodes, Notebook } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
@@ -12,11 +13,13 @@ import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHand
 import * as Logger from "../Common/Logger";
 import { QueriesClient } from "../Common/QueriesClient";
 import * as DataModels from "../Contracts/DataModels";
+import { ContainerConnectionInfo } from "../Contracts/DataModels";
 import * as ViewModels from "../Contracts/ViewModels";
 import { GitHubOAuthService } from "../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import { IGalleryItem } from "../Juno/JunoClient";
+import { PhoenixClient } from "../Phoenix/PhoenixClient";
 import * as ExplorerSettings from "../Shared/ExplorerSettings";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
@@ -35,7 +38,7 @@ import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import "./ComponentRegisterer";
-import { DialogProps, TextFieldProps, useDialog } from "./Controls/Dialog";
+import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
 import * as FileSystemUtil from "./Notebook/FileSystemUtil";
@@ -88,12 +91,13 @@ export default class Explorer {
   };
 
   private static readonly MaxNbDatabasesToAutoExpand = 5;
-
+  private phoenixClient: PhoenixClient;
   constructor() {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
     this._isInitializingNotebooks = false;
+    this.phoenixClient = new PhoenixClient();
     useNotebook.subscribe(
       () => this.refreshCommandBarButtons(),
       (state) => state.isNotebooksEnabledForAccount
@@ -162,23 +166,10 @@ export default class Explorer {
 
     useNotebook.subscribe(
       async () => {
-        if (!this.notebookManager) {
+        this.initiateAndRefreshNotebookList();
-          const NotebookManager = await (
+        useNotebook.getState().setIsRefreshed(false);
-            await import(/* webpackChunkName: "NotebookManager" */ "./Notebook/NotebookManager")
-          ).default;
-          this.notebookManager = new NotebookManager();
-          this.notebookManager.initialize({
-            container: this,
-            resourceTree: this.resourceTree,
-            refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
-            refreshNotebookList: () => this.refreshNotebookList(),
-          });
-        }
-
-        this.refreshCommandBarButtons();
-        this.refreshNotebookList();
       },
-      (state) => state.isNotebookEnabled
+      (state) => state.isNotebookEnabled || state.isRefreshed
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);
@@ -211,6 +202,23 @@ export default class Explorer {
     this.refreshExplorer();
   }
 
+  public async initiateAndRefreshNotebookList(): Promise<void> {
+    if (!this.notebookManager) {
+      const NotebookManager = (await import(/* webpackChunkName: "NotebookManager" */ "./Notebook/NotebookManager"))
+        .default;
+      this.notebookManager = new NotebookManager();
+      this.notebookManager.initialize({
+        container: this,
+        resourceTree: this.resourceTree,
+        refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
+        refreshNotebookList: () => this.refreshNotebookList(),
+      });
+    }
+
+    this.refreshCommandBarButtons();
+    this.refreshNotebookList();
+  }
+
   public openEnableSynapseLinkDialog(): void {
     const addSynapseLinkDialogProps: DialogProps = {
       linkProps: {
@@ -344,7 +352,7 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-
+    if (userContext.features.phoenix === false) {
       await this.ensureNotebookWorkspaceRunning();
       const connectionInfo = await listConnectionInfo(
         userContext.subscriptionId,
@@ -357,15 +365,62 @@ export default class Explorer {
         notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
         authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
       });
-
+    }
-    useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
     this.refreshNotebookList();
 
     this._isInitializingNotebooks = false;
   }
 
-  public resetNotebookWorkspace() {
+  public async allocateContainer(): Promise<void> {
+    const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+    const isAllocating = useNotebook.getState().isAllocating;
+    if (isAllocating === false && notebookServerInfo && notebookServerInfo.notebookServerEndpoint === undefined) {
+      const provisionData = {
+        aadToken: userContext.authorizationToken,
+        subscriptionId: userContext.subscriptionId,
+        resourceGroup: userContext.resourceGroup,
+        dbAccountName: userContext.databaseAccount.name,
+        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+      };
+      const connectionStatus: ContainerConnectionInfo = {
+        status: ConnectionStatusType.Connecting,
+      };
+      useNotebook.getState().setConnectionInfo(connectionStatus);
+      try {
+        useNotebook.getState().setIsAllocating(true);
+        const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
+        if (
+          connectionInfo.status === HttpStatusCodes.OK &&
+          connectionInfo.data &&
+          connectionInfo.data.notebookServerUrl
+        ) {
+          connectionStatus.status = ConnectionStatusType.Connected;
+          useNotebook.getState().setConnectionInfo(connectionStatus);
+          useNotebook.getState().setNotebookServerInfo({
+            notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
+            authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
+          });
+          this.notebookManager?.notebookClient
+            .getMemoryUsage()
+            .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
+          useNotebook.getState().setIsAllocating(false);
+        } else {
+          connectionStatus.status = ConnectionStatusType.Failed;
+          useNotebook.getState().resetConatinerConnection(connectionStatus);
+        }
+      } catch (error) {
+        connectionStatus.status = ConnectionStatusType.Failed;
+        useNotebook.getState().resetConatinerConnection(connectionStatus);
+        throw error;
+      }
+      this.refreshNotebookList();
+
+      this._isInitializingNotebooks = false;
+    }
+  }
+
+  public resetNotebookWorkspace(): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -390,7 +445,6 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
-
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -538,17 +592,22 @@ export default class Explorer {
     }
   }
 
-  public uploadFile(name: string, content: string, parent: NotebookContentItem): Promise<NotebookContentItem> {
+  public uploadFile(
+    name: string,
+    content: string,
+    parent: NotebookContentItem,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to upload notebook, but notebook is not enabled";
       handleError(error, "Explorer/uploadFile");
       throw new Error(error);
     }
 
-    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent);
+    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent, isGithubTree);
     promise
       .then(() => this.resourceTree.triggerRender())
-      .catch((reason) => this.showOkModalDialog("Unable to upload file", reason));
+      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
     return promise;
   }
 
@@ -614,51 +673,6 @@ export default class Explorer {
     this.notebookManager?.openCopyNotebookPane(name, content);
   }
 
-  public showOkModalDialog(title: string, msg: string): void {
-    useDialog.getState().openDialog({
-      isModal: true,
-      title,
-      subText: msg,
-      primaryButtonText: "Close",
-      secondaryButtonText: undefined,
-      onPrimaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-      },
-      onSecondaryButtonClick: undefined,
-    });
-  }
-
-  public showOkCancelModalDialog(
-    title: string,
-    msg: string,
-    okLabel: string,
-    onOk: () => void,
-    cancelLabel: string,
-    onCancel: () => void,
-    choiceGroupProps?: IChoiceGroupProps,
-    textFieldProps?: TextFieldProps,
-    isPrimaryButtonDisabled?: boolean
-  ): void {
-    useDialog.getState().openDialog({
-      isModal: true,
-      title,
-      subText: msg,
-      primaryButtonText: okLabel,
-      secondaryButtonText: cancelLabel,
-      onPrimaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-        onOk && onOk();
-      },
-      onSecondaryButtonClick: () => {
-        useDialog.getState().closeDialog();
-        onCancel && onCancel();
-      },
-      choiceGroupProps,
-      textFieldProps,
-      primaryButtonDisabled: isPrimaryButtonDisabled,
-    });
-  }
-
   /**
    * Note: To keep it simple, this creates a disconnected NotebookContentItem that is not connected to the resource tree.
    * Connecting it to a tree possibly requires the intermediate missing folders if the item is nested in a subfolder.
@@ -677,6 +691,9 @@ export default class Explorer {
     if (!notebookContentItem || !notebookContentItem.path) {
       throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
     }
+    if (notebookContentItem.type === NotebookContentItemType.Notebook && NotebookUtil.isPhoenixEnabled()) {
+      this.allocateContainer();
+    }
 
     const notebookTabs = useTabs
       .getState()
@@ -718,7 +735,7 @@ export default class Explorer {
     return true;
   }
 
-  public renameNotebook(notebookFile: NotebookContentItem): void {
+  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to rename notebook, but notebook is not enabled";
       handleError(error, "Explorer/renameNotebook");
@@ -732,7 +749,9 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
       });
     if (openedNotebookTabs.length > 0) {
-      this.showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
     } else {
       useSidePanel.getState().openSidePanel(
         "Rename Notebook",
@@ -749,7 +768,7 @@ export default class Explorer {
           paneTitle="Rename Notebook"
           defaultInput={FileSystemUtil.stripExtension(notebookFile.name, "ipynb")}
           onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input)
+            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input, isGithubTree)
           }
           notebookFile={notebookFile}
         />
@@ -757,7 +776,7 @@ export default class Explorer {
     }
   }
 
-  public onCreateDirectory(parent: NotebookContentItem): void {
+  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create notebook directory, but notebook is not enabled";
       handleError(error, "Explorer/onCreateDirectory");
@@ -779,7 +798,7 @@ export default class Explorer {
         submitButtonLabel="Create"
         defaultInput=""
         onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
-          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input)
+          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
         }
         notebookFile={parent}
       />
@@ -848,7 +867,7 @@ export default class Explorer {
     }
   };
 
-  public deleteNotebookFile(item: NotebookContentItem): Promise<void> {
+  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to delete notebook file, but notebook is not enabled";
       handleError(error, "Explorer/deleteNotebookFile");
@@ -862,7 +881,9 @@ export default class Explorer {
         return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
       });
     if (openedNotebookTabs.length > 0) {
-      this.showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
       return Promise.reject();
     }
 
@@ -879,7 +900,7 @@ export default class Explorer {
       return Promise.reject();
     }
 
-    return this.notebookManager?.notebookContentClient.deleteContentItem(item).then(
+    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
       () => logConsoleInfo(`Successfully deleted: ${item.path}`),
       (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`)
     );
@@ -888,22 +909,64 @@ export default class Explorer {
   /**
    * This creates a new notebook file, then opens the notebook
    */
-  public onNewNotebookClicked(parent?: NotebookContentItem): void {
+  public onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
       const error = "Attempt to create new notebook, but notebook is not enabled";
       handleError(error, "Explorer/onNewNotebookClicked");
       throw new Error(error);
     }
-
+    const isPhoenixEnabled = NotebookUtil.isPhoenixEnabled();
+    if (isPhoenixEnabled) {
+      if (isGithubTree) {
+        async () => {
+          await this.allocateContainer();
           parent = parent || this.resourceTree.myNotebooksContentRoot;
+          this.createNewNoteBook(parent, isGithubTree);
+        };
+      } else {
+        useDialog.getState().showOkCancelModalDialog(
+          Notebook.newNotebookModalTitle,
+          undefined,
+          "Create",
+          async () => {
+            await this.allocateContainer();
+            parent = parent || this.resourceTree.myNotebooksContentRoot;
+            this.createNewNoteBook(parent, isGithubTree);
+          },
+          "Cancel",
+          undefined,
+          this.getNewNoteWarningText()
+        );
+      }
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.createNewNoteBook(parent, isGithubTree);
+    }
+  }
 
+  private getNewNoteWarningText(): JSX.Element {
+    return (
+      <>
+        <p>{Notebook.newNotebookModalContent1}</p>
+        <br />
+        <p>
+          {Notebook.newNotebookModalContent2}
+          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
+            {Notebook.learnMore}
+          </Link>
+        </p>
+      </>
+    );
+  }
+
+  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
     const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
     const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
     this.notebookManager?.notebookContentClient
-      .createNewNotebookFile(parent)
+      .createNewNotebookFile(parent, isGithubTree)
       .then((newFile: NotebookContentItem) => {
         logConsoleInfo(`Successfully created: ${newFile.name}`);
         TelemetryProcessor.traceSuccess(
@@ -943,7 +1006,26 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
+  public async openNotebookTerminal(kind: ViewModels.TerminalKind): Promise<void> {
+    if (NotebookUtil.isPhoenixEnabled()) {
+      await this.allocateContainer();
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
+        this.connectToNotebookTerminal(kind);
+      } else {
+        useDialog
+          .getState()
+          .showOkModalDialog(
+            "Failed to Connect",
+            "Failed to connect temporary workspace, this could happen because of network issue please refresh and try again."
+          );
+      }
+    } else {
+      this.connectToNotebookTerminal(kind);
+    }
+  }
+
+  private connectToNotebookTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {
@@ -994,7 +1076,7 @@ export default class Explorer {
     notebookUrl?: string,
     galleryItem?: IGalleryItem,
     isFavorite?: boolean
-  ) {
+  ): Promise<void> {
     const title = "Gallery";
     const GalleryTab = await (await import(/* webpackChunkName: "GalleryTab" */ "./Tabs/GalleryTab")).default;
     const galleryTab = useTabs
@@ -1063,7 +1145,10 @@ export default class Explorer {
   }
 
   public async handleOpenFileAction(path: string): Promise<void> {
-    if (!(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))) {
+    if (
+      userContext.features.phoenix === false &&
+      !(await this._containsDefaultNotebookWorkspace(userContext.databaseAccount))
+    ) {
       this._openSetupNotebooksPaneForQuickstart();
     }
 
@@ -1095,7 +1180,27 @@ export default class Explorer {
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
+    if (NotebookUtil.isPhoenixEnabled()) {
+      useDialog.getState().showOkCancelModalDialog(
+        Notebook.newNotebookUploadModalTitle,
+        undefined,
+        "Upload",
+        async () => {
+          await this.allocateContainer();
           parent = parent || this.resourceTree.myNotebooksContentRoot;
+          this.uploadFilePanel(parent);
+        },
+        "Cancel",
+        undefined,
+        this.getNewNoteWarningText()
+      );
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.uploadFilePanel(parent);
+    }
+  }
+
+  private uploadFilePanel(parent?: NotebookContentItem): void {
     useSidePanel
       .getState()
       .openSidePanel(
@@ -1104,15 +1209,36 @@ export default class Explorer {
       );
   }
 
+  public getDownloadModalConent(fileName: string): JSX.Element {
+    if (NotebookUtil.isPhoenixEnabled()) {
+      return (
+        <>
+          <p>{Notebook.galleryNotebookDownloadContent1}</p>
+          <br />
+          <p>
+            {Notebook.galleryNotebookDownloadContent2}
+            <Link href={Notebook.cosmosNotebookGitDocumentationUrl} target="_blank">
+              {Notebook.learnMore}
+            </Link>
+          </p>
+        </>
+      );
+    }
+    return <p> Download {fileName} from gallery as a copy to your notebooks to run and/or edit the notebook. </p>;
+  }
+
   public async refreshExplorer(): Promise<void> {
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-    const isNotebookEnabled: boolean =
+    let isNotebookEnabled = true;
+    if (!userContext.features.phoenix) {
+      isNotebookEnabled =
         userContext.authType !== AuthType.ResourceToken &&
         ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
           userContext.features.enableNotebooks);
+    }
     useNotebook.getState().setIsNotebookEnabled(isNotebookEnabled);
     useNotebook.getState().setIsShellEnabled(isNotebookEnabled && isPublicInternetAccessAllowed());
 
@@ -1121,6 +1247,7 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
+    if (!userContext.features.notebooksTemporarilyDown) {
       if (isNotebookEnabled) {
         await this.initNotebooks(userContext.databaseAccount);
       } else if (this.notebookToImport) {
@@ -1129,3 +1256,4 @@ export default class Explorer {
       }
     }
   }
+}

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { FeedOptions, ItemDefinition, QueryIterator, Resource } from "@azure/cosmos";
 import * as Q from "q";
 import * as React from "react";
@@ -294,8 +296,6 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       this.setGremlinParams();
     }
 
-    const selectedNode = this.state.highlightedNode;
-
     props.onGraphAccessorCreated({
       applyFilter: this.submitQuery.bind(this),
       addVertex: this.addVertex.bind(this),
@@ -303,7 +303,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     });
   } // constructor
 
-  public shareIGraphConfig(igraphConfig: IGraphConfig) {
+  public shareIGraphConfig(igraphConfig: IGraphConfig): void {
     this.setState({
       igraphConfig: { ...igraphConfig },
     });
@@ -330,10 +330,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const partitionKeyProperty = this.props.collectionPartitionKeyProperty;
 
     // aggregate all the properties, remove dropped ones
-    let finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
+    const finalProperties = editedProperties.existingProperties.concat(editedProperties.addedProperties);
 
     // Compose the query
-    let pkId = editedProperties.pkId;
+    const pkId = editedProperties.pkId;
     let updateQueryFragment = "";
 
     finalProperties.forEach((p) => {
@@ -422,7 +422,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Called from ko binding
    * @param id
    */
-  public selectNode(id: string) {
+  public selectNode(id: string): void {
     if (!this.d3ForceGraph) {
       console.warn("Attempting to select node, but d3ForceGraph not initialized, yet.");
       return;
@@ -431,7 +431,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     this.d3ForceGraph.selectNode(id);
   }
 
-  public deleteHighlightedNode() {
+  public deleteHighlightedNode(): void {
     if (!this.state.highlightedNode) {
       GraphExplorer.reportToConsole(ConsoleDataType.Error, "No highlighted node to remove.");
       return;
@@ -467,23 +467,23 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Is of type: {e: GremlinEdge, v: GremlinVertex}[]
    * @param data
    */
-  public static isEdgeVertexPairArray(data: any) {
+  public static isEdgeVertexPairArray(data: any): boolean {
     if (!(data instanceof Array)) {
       GraphExplorer.reportToConsole(ConsoleDataType.Info, "Query result not an array", data);
       return false;
     }
 
-    let pairs: any[] = data;
+    const pairs: any[] = data;
     for (let i = 0; i < pairs.length; i++) {
       const item = pairs[i];
       if (
-        !item.hasOwnProperty("e") ||
+        !Object.prototype.hasOwnProperty.call(item, "e") ||
-        !item.hasOwnProperty("v") ||
+        !Object.prototype.hasOwnProperty.call(item, "v") ||
-        !item["e"].hasOwnProperty("id") ||
+        !Object.prototype.hasOwnProperty.call(item["e"], "id") ||
-        !item["e"].hasOwnProperty("type") ||
+        !Object.prototype.hasOwnProperty.call(item["e"], "type") ||
         item["e"].type !== "edge" ||
-        !item["v"].hasOwnProperty("id") ||
+        !Object.prototype.hasOwnProperty.call(item["v"], "id") ||
-        !item["v"].hasOwnProperty("type") ||
+        !Object.prototype.hasOwnProperty.call(item["e"], "type") ||
         item["v"].type !== "vertex"
       ) {
         return false;
@@ -514,7 +514,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     // Try hitting cache first
     const cache = outE ? this.outECache : this.inECache;
     const pairs = cache.retrieve(vertex.id, startIndex, pageSize);
-    if (pairs != null && pairs.length === pageSize) {
+    if (pairs !== null && pairs.length === pageSize) {
       const msg = `Retrieved ${pairs.length} ${outE ? "outE" : "inE"} edges from cache for vertex id: ${vertex.id}`;
       GraphExplorer.reportToConsole(ConsoleDataType.Info, msg);
       return Q.resolve(pairs);
@@ -588,7 +588,6 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       vertex._outEAllLoaded &&
       vertex._inEAllLoaded
     ) {
-      console.info("No more edges to load for vertex " + vertex.id);
       updateGraphData();
       return Q.resolve(graphData);
     }
@@ -668,7 +667,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       }
     );
 
-    return promise.then((nbPairsFetched: number) => {
+    return promise.then(() => {
       if (offsetIndex >= GraphExplorer.LOAD_PAGE_SIZE || !vertex._outEAllLoaded || !vertex._inEAllLoaded) {
         vertex._pagination = {
           total:
@@ -754,7 +753,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Create a new edge in docdb and update graph
    * @param e
    */
-  public createNewEdge(e: GraphNewEdgeData): Q.Promise<any> {
+  public createNewEdge(e: GraphNewEdgeData): Q.Promise<unknown> {
     const q = `g.V('${GraphUtil.escapeSingleQuotes(e.inputOutV)}').addE('${GraphUtil.escapeSingleQuotes(
       e.label
     )}').To(g.V('${GraphUtil.escapeSingleQuotes(e.inputInV)}'))`;
@@ -772,8 +771,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           return;
         }
 
-        let edge = edges[0];
+        const edge = edges[0];
-        let graphData = this.originalGraphData;
+        const graphData = this.originalGraphData;
         graphData.addEdge(edge);
 
         // Allow loadNeighbors to load list new edge
@@ -800,10 +799,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Manually update in-memory graph.
    * @param edgeId
    */
-  public removeEdge(edgeId: string): Q.Promise<any> {
+  public removeEdge(edgeId: string): Q.Promise<unknown> {
     return this.submitToBackend(`g.E('${GraphUtil.escapeSingleQuotes(edgeId)}').drop()`).then(
       () => {
-        let graphData = this.originalGraphData;
+        const graphData = this.originalGraphData;
         graphData.removeEdge(edgeId, false);
         this.updateGraphData(graphData, this.state.igraphConfig);
       },
@@ -826,10 +825,14 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return false;
     }
 
-    let vertices: any[] = data;
+    const vertices: any[] = data;
     if (vertices.length > 0) {
-      let v0 = vertices[0];
+      const v0 = vertices[0];
-      if (!v0.hasOwnProperty("id") || !v0.hasOwnProperty("type") || v0.type !== "vertex") {
+      if (
+        !Object.prototype.hasOwnProperty.call(v0, "id") ||
+        !Object.prototype.hasOwnProperty.call(v0, "type") ||
+        v0.type !== "vertex"
+      ) {
         return false;
       }
     }
@@ -837,7 +840,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   }
 
   public processGremlinQueryResults(result: GremlinClient.GremlinRequestResult): void {
-    const data = result.data as any;
+    const data = result.data as GraphData.GremlinVertex[];
     this.setFilterQueryStatus(FilterQueryStatus.GraphEmptyResult);
 
     if (data === null) {
@@ -927,13 +930,13 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           throw { title: err };
         }
 
-        if (vertices == null || vertices.length < 1) {
+        if (vertices === null || vertices.length < 1) {
           const err = "Failed to create vertex (no vertex in response)";
           GraphExplorer.reportToConsole(ConsoleDataType.Error, err, vertices);
           throw { title: err };
         }
 
-        let vertex = vertices[0];
+        const vertex = vertices[0];
         const graphData = this.originalGraphData;
         graphData.addVertex(vertex);
         this.updateGraphData(graphData, this.state.igraphConfig);
@@ -1022,7 +1025,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     this.gremlinClient.destroy();
   }
   public componentDidMount(): void {
-    if (this.props.onLoadStartKey != null && this.props.onLoadStartKey != undefined) {
+    if (this.props.onLoadStartKey !== null && this.props.onLoadStartKey !== undefined) {
       TelemetryProcessor.traceSuccess(
         Action.Tab,
         {
@@ -1082,7 +1085,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public static reportToConsole(type: ConsoleDataType.Info, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType.Error, msg: string, ...errorData: any[]): void;
   public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
-    let errorDataStr: string = "";
+    let errorDataStr = "";
     if (errorData && errorData.length > 0) {
       console.error(msg, errorData);
       errorDataStr = ": " + JSON.stringify(errorData);
@@ -1161,12 +1164,15 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       )}"`
     ).then(
       (documents: DataModels.DocumentId[]) => {
-        $.each(documents, (index: number, doc: any) => {
+        $.each(
+          documents,
+          (index: number, doc: { _graph_icon_property_value: string; icon: string; format: string }) => {
             newIconsMap[doc["_graph_icon_property_value"]] = {
               data: doc["icon"],
               format: doc["format"],
             };
-        });
+          }
+        );
 
         // Update graph configuration
         this.setState({
@@ -1223,8 +1229,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     const key = this.state.igraphConfig.nodeCaption;
     return $.map(
       this.state.rootMap,
-      (value: any, index: number): LeftPane.CaptionId => {
+      (value: any): LeftPane.CaptionId => {
-        let result = GraphData.GraphData.getNodePropValue(value, key);
+        const result = GraphData.GraphData.getNodePropValue(value, key);
         return {
           caption: result !== undefined ? result : value.id,
           id: value.id,
@@ -1237,7 +1243,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * Selecting a root node means
    * @param node
    */
-  private selectRootNode(id: string): Q.Promise<any> {
+  private selectRootNode(id: string): Q.Promise<unknown> {
     if (!this.d3ForceGraph) {
       console.warn("Attempting to reset zoom, but d3ForceGraph not initialized, yet.");
     } else {
@@ -1282,7 +1288,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
         this.collectNodeProperties(this.originalGraphData.vertices);
         this.updatePropertiesPane(id);
       },
-      (reason: any) => {
+      (reason: string) => {
         GraphExplorer.reportToConsole(ConsoleDataType.Error, `Failed to select root node. Reason:${reason}`);
       }
     );
@@ -1349,10 +1355,10 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromVertex(v: GraphData.GremlinVertex): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      v.hasOwnProperty("properties") &&
+      Object.prototype.hasOwnProperty.call(v, "properties") &&
-      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty) &&
+      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty) &&
       v.properties[this.props.collectionPartitionKeyProperty].length > 0 &&
-      v.properties[this.props.collectionPartitionKeyProperty][0].hasOwnProperty("value")
+      Object.prototype.hasOwnProperty.call(v.properties[this.props.collectionPartitionKeyProperty][0], "value")
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty][0].value;
       return GraphExplorer.generatePkIdPair(pk, v.id);
@@ -1370,8 +1376,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private getPkIdFromNodeData(v: GraphHighlightedNodeData): string {
     if (
       this.props.collectionPartitionKeyProperty &&
-      v.hasOwnProperty("properties") &&
+      Object.prototype.hasOwnProperty.call(v, "properties") &&
-      v.properties.hasOwnProperty(this.props.collectionPartitionKeyProperty)
+      Object.prototype.hasOwnProperty.call(v.properties, this.props.collectionPartitionKeyProperty)
     ) {
       const pk = v.properties[this.props.collectionPartitionKeyProperty];
       return GraphExplorer.generatePkIdPair(pk[0] as PartitionKeyValueType, v.id);
@@ -1388,14 +1394,14 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @return id
    */
   public static getPkIdFromDocumentId(d: DataModels.DocumentId, collectionPartitionKeyProperty: string): string {
-    let { id } = d;
+    const { id } = d;
     if (typeof id !== "string") {
       const error = `Vertex id is not a string: ${JSON.stringify(id)}.`;
       logConsoleError(error);
       throw new Error(error);
     }
 
-    if (collectionPartitionKeyProperty && d.hasOwnProperty(collectionPartitionKeyProperty)) {
+    if (collectionPartitionKeyProperty && Object.prototype.hasOwnProperty.call(d, collectionPartitionKeyProperty)) {
       let pk = (d as any)[collectionPartitionKeyProperty];
       if (typeof pk !== "string" && typeof pk !== "number" && typeof pk !== "boolean") {
         if (Array.isArray(pk) && pk.length > 0) {
@@ -1425,7 +1431,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     }"] AS p FROM c WHERE NOT IS_DEFINED(c._isEdge)`;
     return this.executeNonPagedDocDbQuery(q).then(
       (documents: DataModels.DocumentId[]) => {
-        let possibleVertices = [] as PossibleVertex[];
+        const possibleVertices = [] as PossibleVertex[];
         $.each(documents, (index: number, item: any) => {
           if (highlightedNodeId && item.id === highlightedNodeId) {
             // Exclude highlighed node in the list
@@ -1439,7 +1445,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
               caption: item.p,
             });
           } else {
-            if (item.hasOwnProperty("p")) {
+            if (Object.prototype.hasOwnProperty.call(item, "p")) {
               possibleVertices.push({
                 value: item.id,
                 caption: item.p[0]["_value"],
@@ -1462,17 +1468,17 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @param addedEdges
    * @return promise when done
    */
-  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<any> {
+  private editGraphEdges(editedEdges: EditedEdges): Q.Promise<unknown> {
-    let promises = [];
+    const promises = [];
     // Drop edges
     for (let i = 0; i < editedEdges.droppedIds.length; i++) {
-      let id = editedEdges.droppedIds[i];
+      const id = editedEdges.droppedIds[i];
       promises.push(this.removeEdge(id));
     }
 
     // Add edges
     for (let i = 0; i < editedEdges.addedEdges.length; i++) {
-      let e = editedEdges.addedEdges[i];
+      const e = editedEdges.addedEdges[i];
       promises.push(
         this.createNewEdge(e).then(() => {
           // Reload neighbors in case we linked to a vertex that isn't loaded in the graph
@@ -1525,7 +1531,9 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   /**
    * For unit testing purposes
    */
-  public onGraphUpdated(timestamp: number): void {}
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public onGraphUpdated(_timestamp: number): void {}
 
   /**
    * Get node properties for styling purposes. Result is the union of all properties of all nodes.
@@ -1533,17 +1541,17 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   private collectNodeProperties(vertices: GraphData.GremlinVertex[]) {
     const props = {} as any; // Hashset
     $.each(vertices, (index: number, item: GraphData.GremlinVertex) => {
-      for (var p in item) {
+      for (const p in item) {
         // DocDB: Exclude type because it's always 'vertex'
         if (p !== "type" && typeof (item as any)[p] === "string") {
           props[p] = true;
         }
       }
       // Inspect properties
-      if (item.hasOwnProperty("properties")) {
+      if (Object.prototype.hasOwnProperty.call(item, "properties")) {
         // TODO This is DocDB-graph specific
         // Assume each property value is [{value:... }]
-        for (var f in item.properties) {
+        for (const f in item.properties) {
           props[f] = true;
         }
       }
@@ -1570,21 +1578,21 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    let data = this.originalGraphData.getVertexById(id);
+    const data = this.originalGraphData.getVertexById(id);
 
     // A bit of translation to make it easier to display
-    let props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
+    const props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
-    for (let p in data.properties) {
+    for (const p in data.properties) {
       props[p] = data.properties[p].map((gremlinProperty) => gremlinProperty.value);
     }
 
     // update neighbors
-    let sources: NeighborVertexBasicInfo[] = [];
+    const sources: NeighborVertexBasicInfo[] = [];
-    let targets: NeighborVertexBasicInfo[] = [];
+    const targets: NeighborVertexBasicInfo[] = [];
     this.props.onResetDefaultGraphConfigValues();
-    let nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
+    const nodeCaption = this.state.igraphConfigUiData.nodeCaptionChoice;
     this.updateSelectedNodeNeighbors(data.id, nodeCaption, sources, targets);
-    let sData: GraphHighlightedNodeData = {
+    const sData: GraphHighlightedNodeData = {
       id: data.id,
       label: data.label,
       properties: props,
@@ -1611,16 +1619,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     targets: NeighborVertexBasicInfo[]
   ): void {
     // update neighbors
-    let gd = this.originalGraphData;
+    const gd = this.originalGraphData;
-    let v = gd.getVertexById(id);
+    const v = gd.getVertexById(id);
 
     // Clear the array while keeping the references
     sources.length = 0;
     targets.length = 0;
 
-    let possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
+    const possibleEdgeLabels = {} as any; // Collect all edge labels in a hashset
 
-    for (let p in v.inE) {
+    for (const p in v.inE) {
       possibleEdgeLabels[p] = true;
       const edges = v.inE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortInEdge) => {
@@ -1629,7 +1637,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         sources.push({
           name: caption,
           id: neighborId,
@@ -1639,7 +1647,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       });
     }
 
-    for (let p in v.outE) {
+    for (const p in v.outE) {
       possibleEdgeLabels[p] = true;
       const edges = v.outE[p];
       $.each(edges, (index: number, edge: GraphData.GremlinShortOutEdge) => {
@@ -1648,7 +1656,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           // If id not known, it must be an edge node whose neighbor hasn't been loaded into the graph, yet
           return;
         }
-        let caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
+        const caption = GraphData.GraphData.getNodePropValue(gd.getVertexById(neighborId), nodeCaption) as string;
         targets.push({
           name: caption,
           id: neighborId,
@@ -1660,7 +1668,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     this.setState({
       possibleEdgeLabels: Object.keys(possibleEdgeLabels).map(
-        (value: string, index: number, array: string[]): InputTypeaheadComponent.Item => {
+        (value: string): InputTypeaheadComponent.Item => {
           return { caption: value, value: value };
         }
       ),
@@ -1681,20 +1689,20 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return;
     }
 
-    let updatedVertex = vertices[0];
+    const updatedVertex = vertices[0];
     if (this.originalGraphData.hasVertexId(updatedVertex.id)) {
-      let currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
+      const currentVertex = this.originalGraphData.getVertexById(updatedVertex.id);
       // Copy updated properties
-      if (currentVertex.hasOwnProperty("properties")) {
+      if (Object.prototype.hasOwnProperty.call(currentVertex, "properties")) {
         delete currentVertex["properties"];
       }
-      for (var p in updatedVertex) {
+      for (const p in updatedVertex) {
         (currentVertex as any)[p] = updatedVertex[p];
       }
     }
 
     // TODO This kind of assumes saveVertexProperty is done from property panes.
-    let hn = this.state.highlightedNode;
+    const hn = this.state.highlightedNode;
     if (hn && hn.id === updatedVertex.id) {
       this.updatePropertiesPane(hn.id);
     }
@@ -1708,7 +1716,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     igraphConfig?: IGraphConfig
   ) {
     this.originalGraphData = graphData;
-    let gd = JSON.parse(JSON.stringify(this.originalGraphData));
+    const gd = JSON.parse(JSON.stringify(this.originalGraphData));
     if (!this.d3ForceGraph) {
       console.warn("Attempting to update graph, but d3ForceGraph not initialized, yet.");
       return;
@@ -1873,7 +1881,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
 
     promise
       .then((result: GremlinClient.GremlinRequestResult) => this.processGremlinQueryResults(result))
-      .catch((error: any) => {
+      .catch((error: Error) => {
         const errorMsg = `Failed to process query result: ${getErrorMessage(error)}`;
         GraphExplorer.reportToConsole(ConsoleDataType.Error, errorMsg);
         this.setState({

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
-import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 import CollapseArrowIcon from "../../../../images/Collapse_arrow_14x14.svg";
 import ExpandIcon from "../../../../images/Expand_14x14.svg";
 import LoadingIndicatorIcon from "../../../../images/LoadingIndicator_3Squares.gif";
+import { GraphVizComponent, GraphVizComponentProps } from "./GraphVizComponent";
 
 interface MiddlePaneComponentProps {
   isTabsContentExpanded: boolean;
@@ -17,7 +17,14 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
       <div className="middlePane">
         <div className="graphTitle">
           <span className="paneTitle">Graph</span>
-          <span className="graphExpandCollapseBtn pull-right" onClick={this.props.toggleExpandGraph}>
+          <span
+            className="graphExpandCollapseBtn pull-right"
+            onClick={this.props.toggleExpandGraph}
+            role="button"
+            aria-expanded={this.props.isTabsContentExpanded}
+            aria-name="View graph in full screen"
+            tabIndex={0}
+          >
             <img
               src={this.props.isTabsContentExpanded ? CollapseArrowIcon : ExpandIcon}
               alt={this.props.isTabsContentExpanded ? "collapse graph content" : "expand graph content"}

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -6,9 +6,9 @@
 
 import * as React from "react";
 import CancelIcon from "../../../../images/cancel.svg";
-import CheckIcon from "../../../../images/check.svg";
+import CheckIcon from "../../../../images/check-1.svg";
 import DeleteIcon from "../../../../images/delete.svg";
-import EditIcon from "../../../../images/edit.svg";
+import EditIcon from "../../../../images/edit-1.svg";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { AccessibleElement } from "../../Controls/AccessibleElement/AccessibleElement";
 import { CollapsiblePanel } from "../../Controls/CollapsiblePanel/CollapsiblePanel";

src/Explorer/Graph/GraphExplorerComponent/graphExplorer.less

@@ -15,7 +15,8 @@
 
 .graphExplorerContainer {
   margin-left: @SmallSpace;
-    overflow: hidden;
+  overflow-y: auto;
+  overflow-x: clip;
   height: 100%;
   .flex-display();
   .flex-direction();
@@ -114,16 +115,16 @@
 
   .typeahead__cancel-button {
     top: 5px !important;
-        right: .4em !important;
+    right: 0.4em !important;
   }
 
-
   .queryMetricsSummary {
     margin: @LargeSpace @LargeSpace 0px @DefaultSpace;
     table-layout: fixed;
     display: block;
     overflow-y: auto;
     overflow-x: hidden;
+    min-height: 100px;
 
     .queryMetricsSummaryHead {
       .flex-display();
@@ -144,7 +145,8 @@
       font-size: 12px;
       width: 100%;
       .flex-display();
-            th, td {
+      th,
+      td {
         padding: @DefaultSpace;
 
         &:nth-child(1) {
@@ -168,7 +170,6 @@
     }
   }
 
-
   .graphContainer {
     overflow: hidden;
     height: 100%;
@@ -176,7 +177,6 @@
     padding-top: (2 * @MediumSpace);
     .flex-display();
 
-
     .leftPane {
       width: 200px;
       padding: 0px 0px 0px @DefaultSpace;
@@ -249,7 +249,7 @@
         height: 100%;
 
         .graphModal {
-                    background-color: rgba(255, 255, 255, .7);
+          background-color: rgba(255, 255, 255, 0.7);
           position: absolute;
           top: 0px;
           left: 0px;
@@ -282,7 +282,6 @@
           min-height: 0px;
           margin-top: 0px;
 
-
           .rightPaneHeader {
             /* TODO: Hack to align the trashbox with the header for now. */
             margin-top: -28px;
@@ -412,10 +411,10 @@
 
               /* Override autocomplete stuff */
               .typeahead__container {
-                                                    font: @mediumFontSize 'Segoe UI' !important;
+                font: @mediumFontSize "Segoe UI" !important;
 
                 input {
-                                                        font: @mediumFontSize 'Segoe UI' !important;
+                  font: @mediumFontSize "Segoe UI" !important;
                   padding: 0px @SmallSpace !important;
                 }
               }
@@ -426,7 +425,7 @@
 
               .typeahead__cancel-button {
                 top: 5px !important;
-                                right: .4em !important;
+                right: 0.4em !important;
               }
 
               .rightPaneAddPropertyBtn {
@@ -450,6 +449,8 @@
     .flex-direction();
     overflow: hidden;
     width: 100%;
+    min-height: 200px;
+    overflow: auto;
   }
 
   .paneTitle {
@@ -608,8 +609,6 @@
         opacity: 0;
       }
     }
-
-
   }
 
   /* scroll for leftpane, rightpane and newvertex pane*/

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -9,8 +9,10 @@ import create, { UseStore } from "zustand";
 import { StyleConstants } from "../../../Common/Constants";
 import * as ViewModels from "../../../Contracts/ViewModels";
 import { useTabs } from "../../../hooks/useTabs";
+import { userContext } from "../../../UserContext";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
 import Explorer from "../../Explorer";
+import { NotebookUtil } from "../../Notebook/NotebookUtil";
 import { useSelectedNode } from "../../useSelectedNode";
 import * as CommandBarComponentButtonFactory from "./CommandBarComponentButtonFactory";
 import * as CommandBarUtil from "./CommandBarUtil";
@@ -54,7 +56,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
+  if (NotebookUtil.isPhoenixEnabled()) {
+    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
+  }
+
+  if (
+    userContext.features.phoenix === false &&
+    userContext.features.notebooksTemporarilyDown === false &&
+    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
+  ) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }
 

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

@@ -103,19 +103,25 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-      expect(enableNotebookBtn).toBeDefined();
+
-      expect(enableNotebookBtn.disabled).toBe(false);
+      //TODO: modify once notebooks are available
-      expect(enableNotebookBtn.tooltipText).toBe("");
+      expect(enableNotebookBtn).toBeUndefined();
+      //expect(enableNotebookBtn).toBeDefined();
+      //expect(enableNotebookBtn.disabled).toBe(false);
+      //expect(enableNotebookBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is not enabled and is unavailable - button should be shown and disabled", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const enableNotebookBtn = buttons.find((button) => button.commandButtonLabel === enableNotebookBtnLabel);
-      expect(enableNotebookBtn).toBeDefined();
+
-      expect(enableNotebookBtn.disabled).toBe(true);
+      //TODO: modify once notebooks are available
-      expect(enableNotebookBtn.tooltipText).toBe(
+      expect(enableNotebookBtn).toBeUndefined();
-        "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //expect(enableNotebookBtn).toBeDefined();
-      );
+      //expect(enableNotebookBtn.disabled).toBe(true);
+      //expect(enableNotebookBtn.tooltipText).toBe(
+      //  "Notebooks are not yet available in your account's region. View supported regions here: https://aka.ms/cosmos-enable-notebooks."
+      //);
     });
   });
 
@@ -192,8 +198,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
+
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
@@ -203,8 +212,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openMongoShellBtn = buttons.find((button) => button.commandButtonLabel === openMongoShellBtnLabel);
       expect(openMongoShellBtn).toBeDefined();
-      expect(openMongoShellBtn.disabled).toBe(false);
+
-      expect(openMongoShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openMongoShellBtn.disabled).toBe(true);
+      //expect(openMongoShellBtn.disabled).toBe(false);
+      //expect(openMongoShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available, terminal is unavailable due to ipRules - button should be hidden", () => {
@@ -290,9 +302,13 @@ describe("CommandBarComponentButtonFactory tests", () => {
 
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
+
       expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
+
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
     });
 
     it("Notebooks is enabled and is available - button should be shown and enabled", () => {
@@ -302,8 +318,11 @@ describe("CommandBarComponentButtonFactory tests", () => {
       const buttons = CommandBarComponentButtonFactory.createStaticCommandBarButtons(mockExplorer, selectedNodeState);
       const openCassandraShellBtn = buttons.find((button) => button.commandButtonLabel === openCassandraShellBtnLabel);
       expect(openCassandraShellBtn).toBeDefined();
-      expect(openCassandraShellBtn.disabled).toBe(false);
+
-      expect(openCassandraShellBtn.tooltipText).toBe("");
+      //TODO: modify once notebooks are available
+      expect(openCassandraShellBtn.disabled).toBe(true);
+      //expect(openCassandraShellBtn.disabled).toBe(false);
+      //expect(openCassandraShellBtn.tooltipText).toBe("");
     });
   });
 

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -67,35 +67,51 @@ export function createStaticCommandBarButtons(
     newCollectionBtn.children.push(newDatabaseBtn);
   }
 
-  buttons.push(createDivider());
-
   if (useNotebook.getState().isNotebookEnabled) {
+    buttons.push(createDivider());
+    const notebookButtons: CommandButtonComponentProps[] = [];
+
     const newNotebookButton = createNewNotebookButton(container);
     newNotebookButton.children = [createNewNotebookButton(container), createuploadNotebookButton(container)];
-    buttons.push(newNotebookButton);
+    notebookButtons.push(newNotebookButton);
 
     if (container.notebookManager?.gitHubOAuthService) {
-      buttons.push(createManageGitHubAccountButton(container));
+      notebookButtons.push(createManageGitHubAccountButton(container));
     }
 
-    buttons.push(createOpenTerminalButton(container));
+    notebookButtons.push(createOpenTerminalButton(container));
-
+    if (userContext.features.phoenix === false) {
-    buttons.push(createNotebookWorkspaceResetButton(container));
+      notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    }
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&
         selectedNodeState.isDatabaseNodeOrNoneSelected()) ||
       userContext.apiType === "Cassandra"
     ) {
-      buttons.push(createDivider());
+      notebookButtons.push(createDivider());
       if (userContext.apiType === "Cassandra") {
-        buttons.push(createOpenCassandraTerminalButton(container));
+        notebookButtons.push(createOpenCassandraTerminalButton(container));
       } else {
-        buttons.push(createOpenMongoTerminalButton(container));
+        notebookButtons.push(createOpenMongoTerminalButton(container));
       }
     }
+
+    notebookButtons.forEach((btn) => {
+      if (userContext.features.notebooksTemporarilyDown) {
+        if (btn.commandButtonLabel.indexOf("Cassandra") !== -1) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.cassandraShellTemporarilyDownMsg);
+        } else if (btn.commandButtonLabel.indexOf("Mongo") !== -1) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.mongoShellTemporarilyDownMsg);
         } else {
-    if (!isRunningOnNationalCloud()) {
+          applyNotebooksTemporarilyDownStyle(btn, Constants.Notebook.temporarilyDownMsg);
+        }
+      }
+      buttons.push(btn);
+    });
+  } else {
+    if (!isRunningOnNationalCloud() && !userContext.features.notebooksTemporarilyDown) {
+      buttons.push(createDivider());
       buttons.push(createEnableNotebooksButton(container));
     }
   }
@@ -152,7 +168,9 @@ export function createContextCommandBarButtons(
       onCommandClick: () => {
         const selectedCollection: ViewModels.Collection = selectedNodeState.findSelectedCollection();
         if (useNotebook.getState().isShellEnabled) {
+          if (!userContext.features.notebooksTemporarilyDown) {
             container.openNotebookTerminal(ViewModels.TerminalKind.Mongo);
+          }
         } else {
           selectedCollection && selectedCollection.onNewMongoShellClick();
         }
@@ -160,7 +178,13 @@ export function createContextCommandBarButtons(
       commandButtonLabel: label,
       ariaLabel: label,
       hasPopup: true,
-      disabled: selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo",
+      tooltipText:
+        useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown
+          ? Constants.Notebook.mongoShellTemporarilyDownMsg
+          : undefined,
+      disabled:
+        (selectedNodeState.isDatabaseNodeOrNoneSelected() && userContext.apiType === "Mongo") ||
+        (useNotebook.getState().isShellEnabled && userContext.features.notebooksTemporarilyDown),
     };
     buttons.push(newMongoShellBtn);
   }
@@ -283,11 +307,18 @@ function createOpenSynapseLinkDialogButton(container: Explorer): CommandButtonCo
 
 function createNewDatabase(container: Explorer): CommandButtonComponentProps {
   const label = "New " + getDatabaseName();
+  const newDatabaseButton = document.activeElement as HTMLElement;
+
   return {
     iconSrc: AddDatabaseIcon,
     iconAlt: label,
     onCommandClick: () =>
-      useSidePanel.getState().openSidePanel("New " + getDatabaseName(), <AddDatabasePanel explorer={container} />),
+      useSidePanel
+        .getState()
+        .openSidePanel(
+          "New " + getDatabaseName(),
+          <AddDatabasePanel explorer={container} buttonElement={newDatabaseButton} />
+        ),
     commandButtonLabel: label,
     ariaLabel: label,
     hasPopup: true,
@@ -388,6 +419,13 @@ export function createScriptCommandButtons(selectedNodeState: SelectedNodeState)
   return buttons;
 }
 
+function applyNotebooksTemporarilyDownStyle(buttonProps: CommandButtonComponentProps, tooltip: string): void {
+  if (!buttonProps.isDivider) {
+    buttonProps.disabled = true;
+    buttonProps.tooltipText = tooltip;
+  }
+}
+
 function createNewNotebookButton(container: Explorer): CommandButtonComponentProps {
   const label = "New Notebook";
   return {
@@ -565,7 +603,7 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   return {
     iconSrc: GitHubIcon,
     iconAlt: label,
-    onCommandClick: () =>
+    onCommandClick: () => {
       useSidePanel
         .getState()
         .openSidePanel(
@@ -575,7 +613,8 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
             gitHubClientProp={container.notebookManager.gitHubClient}
             junoClientProp={junoClient}
           />
-        ),
+        );
+    },
     commandButtonLabel: label,
     hasPopup: false,
     disabled: false,

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,6 +13,8 @@ import { StyleConstants } from "../../../Common/Constants";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";
+import Explorer from "../../Explorer";
+import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -22,6 +24,13 @@ import { MemoryTracker } from "./MemoryTrackerComponent";
 export const convertButton = (btns: CommandButtonComponentProps[], backgroundColor: string): ICommandBarItemProps[] => {
   const buttonHeightPx = StyleConstants.CommandBarButtonHeight;
 
+  const getFilter = (isDisabled: boolean): string => {
+    if (isDisabled) {
+      return StyleConstants.GrayScale;
+    }
+    return undefined;
+  };
+
   return btns
     .filter((btn) => btn)
     .map(
@@ -37,6 +46,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
             style: {
               width: StyleConstants.CommandBarIconWidth, // 16
               alignSelf: btn.iconName ? "baseline" : undefined,
+              filter: getFilter(btn.disabled),
             },
             imageProps: btn.iconSrc ? { src: btn.iconSrc, alt: btn.iconAlt } : undefined,
             iconName: btn.iconName,
@@ -123,8 +133,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol
               width: 12,
               paddingLeft: 1,
               paddingTop: 6,
+              filter: getFilter(btn.disabled),
+            },
+            imageProps: {
+              src: ChevronDownIcon,
+              alt: btn.iconAlt,
             },
-            imageProps: { src: ChevronDownIcon, alt: btn.iconAlt },
           };
         }
 
@@ -189,3 +203,10 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
+
+export const createConnectionStatus = (container: Explorer, key: string): ICommandBarItemProps => {
+  return {
+    key,
+    onRender: () => <ConnectionStatus container={container} />,
+  };
+};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -0,0 +1,184 @@
+@import "../../../../less/Common/Constants";
+
+.connectionStatusContainer {
+    cursor: default;
+    align-items: center;
+    border: 1px;
+    min-height: 44px;
+
+    > span {
+        padding-right: 12px;
+        font-size: 12px;
+        font-family: @DataExplorerFont;
+        color: @DefaultFontColor;
+    }
+    &:focus{
+        outline: 0px;
+    }
+}
+.commandReactBtn {
+    &:hover {
+        background-color: rgb(238, 247, 255);
+        color: rgb(32, 31, 30);
+        cursor: pointer;
+    }
+    &:focus{
+        outline: 1px dashed #605e5c;
+    }
+}
+.connectedReactBtn {
+    &:hover {
+        background-color: rgb(238, 247, 255);
+        color: rgb(32, 31, 30);
+        cursor: pointer;
+    }
+    &:focus{
+        outline: 0px;
+    }
+}
+.connectIcon{
+        margin: 0px 4px;
+        height: 18px;
+        width: 18px;
+        color: rgb(0, 120, 212);
+} 
+  .status {
+    position: relative;
+    display: block;
+    margin-right: 8px;
+    width: 1em;
+    height: 1em;
+    font-size: 9px!important;
+    padding: 0px!important;
+    border-radius: 0.5em;
+  }
+  
+  .status::before,
+  .status::after {
+    position: absolute;
+    content: "";
+  }
+  
+  .status::before {
+    top: 0;
+    left: 0;
+    width: 1em;
+    height: 1em;
+    background-color: rgba(#fff, 0.1);
+    border-radius: 100%;
+    opacity: 1;
+    transform: translate3d(0, 0, 0) scale(0);
+  }
+  
+  .connected{
+    background-color: green;
+    box-shadow:
+      0 0 0 0em rgba(green, 0),
+      0em 0.05em 0.1em rgba(#000000, 0.2);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  .connecting{
+    background-color:#ffbf00;
+    box-shadow:
+      0 0 0 0em rgba(#ffbf00, 0),
+      0em 0.05em 0.1em rgba(#000000, 0.2);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  .failed{
+    background-color:#bd1919;
+    box-shadow:
+      0 0 0 0em rgba(#bd1919, 0),
+      0em 0.05em 0.1em rgba(#000000, 0.2);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  
+  .status.connecting.is-animating {
+    animation: status-outer-connecting 3000ms infinite;
+  }
+  .status.failed.is-animating {
+    animation: status-outer-failed 3000ms infinite;
+  }
+  .status.connected.is-animating {
+    animation: status-outer-connected 3000ms infinite;
+  }
+  @keyframes status-outer-connected {
+    
+   0% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0em #008000, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
+    }
+    20% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.6), 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
+    }
+    40% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.5), 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
+    }
+    60% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
+    }
+    80% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
+    }
+    85% {
+      transform: translate3d(0, 0, 0) scale(1);
+      box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
+    }
+  }
+  @keyframes status-outer-failed {
+    
+    0% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em #bd1919, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
+     }
+     20% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em #c52d2d, 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
+     }
+     40% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em #b47b7b, 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
+     }
+     60% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
+     }
+     80% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
+     }
+     85% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
+     }
+   }
+   @keyframes status-outer-connecting {
+    
+    0% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em #ffbf00, 0em 0.05em 0.1em rgba(0, 0, 0, 0.2);
+     }
+     20% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em #f0dfad, 0em 0.05em 0.1em rgba(0, 0, 0, 0.5);
+     }
+     40% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em rgba(198, 243, 198, 0.5), 0em 0.05em 0.1em rgba(0, 0, 0, 0.4);
+     }
+     60% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em rgba(213, 241, 213, 0.3), 0em 0.05em 0.1em rgba(0, 0, 0, 0.3);
+     }
+     80% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0.5em rgba(0, 128, 0, 0.1), 0em 0.05em 0.1em rgba(0, 0, 0, 0.1);
+     }
+     85% {
+       transform: translate3d(0, 0, 0) scale(1);
+       box-shadow: 0 0 0 0em rgba(0, 128, 0, 0), 0em 0.05em 0.1em rgba(0, 0, 0, 0);
+     }
+   }

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -0,0 +1,107 @@
+import { Icon, ProgressIndicator, Stack, TooltipHost } from "@fluentui/react";
+import { ActionButton } from "@fluentui/react/lib/Button";
+import * as React from "react";
+import "../../../../less/hostedexplorer.less";
+import { ConnectionStatusType, Notebook } from "../../../Common/Constants";
+import Explorer from "../../Explorer";
+import { useNotebook } from "../../Notebook/useNotebook";
+import "../CommandBar/ConnectionStatusComponent.less";
+interface Props {
+  container: Explorer;
+}
+export const ConnectionStatus: React.FC<Props> = ({ container }: Props): JSX.Element => {
+  const [second, setSecond] = React.useState("00");
+  const [minute, setMinute] = React.useState("00");
+  const [isActive, setIsActive] = React.useState(false);
+  const [counter, setCounter] = React.useState(0);
+  const [statusColor, setStatusColor] = React.useState("");
+  const [toolTipContent, setToolTipContent] = React.useState("Connect to temporary workspace.");
+  React.useEffect(() => {
+    let intervalId: NodeJS.Timeout;
+
+    if (isActive) {
+      intervalId = setInterval(() => {
+        const secondCounter = counter % 60;
+        const minuteCounter = Math.floor(counter / 60);
+        const computedSecond: string = String(secondCounter).length === 1 ? `0${secondCounter}` : `${secondCounter}`;
+        const computedMinute: string = String(minuteCounter).length === 1 ? `0${minuteCounter}` : `${minuteCounter}`;
+
+        setSecond(computedSecond);
+        setMinute(computedMinute);
+
+        setCounter((counter) => counter + 1);
+      }, 1000);
+    }
+    return () => clearInterval(intervalId);
+  }, [isActive, counter]);
+
+  const stopTimer = () => {
+    setIsActive(false);
+    setCounter(0);
+    setSecond("00");
+    setMinute("00");
+  };
+
+  const connectionInfo = useNotebook((state) => state.connectionInfo);
+  const memoryUsageInfo = useNotebook((state) => state.memoryUsageInfo);
+
+  const totalGB = memoryUsageInfo ? memoryUsageInfo.totalKB / Notebook.memoryGuageToGB : 0;
+  const usedGB = totalGB > 0 ? totalGB - memoryUsageInfo.freeKB / Notebook.memoryGuageToGB : 0;
+
+  if (
+    connectionInfo &&
+    (connectionInfo.status === ConnectionStatusType.Connect || connectionInfo.status === ConnectionStatusType.ReConnect)
+  ) {
+    return (
+      <ActionButton className="commandReactBtn" onClick={() => container.allocateContainer()}>
+        <TooltipHost content={toolTipContent}>
+          <Stack className="connectionStatusContainer" horizontal>
+            <Icon iconName="ConnectVirtualMachine" className="connectIcon" />
+            <span>{connectionInfo.status}</span>
+          </Stack>
+        </TooltipHost>
+      </ActionButton>
+    );
+  }
+
+  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connecting && isActive === false) {
+    setIsActive(true);
+    setStatusColor("status connecting is-animating");
+    setToolTipContent("Connecting to temporary workspace.");
+  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
+    stopTimer();
+    setStatusColor("status connected is-animating");
+    setToolTipContent("Connected to temporary workspace.");
+  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
+    stopTimer();
+    setStatusColor("status failed is-animating");
+    setToolTipContent("Click here to Reconnect to temporary workspace.");
+  }
+  return (
+    <ActionButton
+      className={connectionInfo.status === ConnectionStatusType.Failed ? "commandReactBtn" : "connectedReactBtn"}
+      onClick={(e: React.MouseEvent<HTMLSpanElement>) =>
+        connectionInfo.status === ConnectionStatusType.Failed ? container.allocateContainer() : e.preventDefault()
+      }
+    >
+      <TooltipHost content={toolTipContent}>
+        <Stack className="connectionStatusContainer" horizontal>
+          <i className={statusColor}></i>
+          <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
+            {connectionInfo.status}
+          </span>
+          {connectionInfo.status === ConnectionStatusType.Connecting && isActive && (
+            <ProgressIndicator description={minute + ":" + second} />
+          )}
+          {connectionInfo.status === ConnectionStatusType.Connected && !isActive && (
+            <ProgressIndicator
+              className={usedGB / totalGB > 0.8 ? "lowMemory" : ""}
+              description={usedGB.toFixed(1) + " of " + totalGB.toFixed(1) + " GB"}
+              percentComplete={usedGB / totalGB}
+            />
+          )}
+        </Stack>
+      </TooltipHost>
+    </ActionButton>
+  );
+};

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -6,7 +6,7 @@ import { Dropdown, IDropdownOption } from "@fluentui/react";
 import * as React from "react";
 import AnimateHeight from "react-animate-height";
 import LoaderIcon from "../../../../images/circular_loader_black_16x16.gif";
-import ClearIcon from "../../../../images/Clear.svg";
+import ClearIcon from "../../../../images/Clear-1.svg";
 import ErrorBlackIcon from "../../../../images/error_black.svg";
 import ErrorRedIcon from "../../../../images/error_red.svg";
 import infoBubbleIcon from "../../../../images/info-bubble-9x9.svg";
@@ -129,7 +129,7 @@ export class NotificationConsoleComponent extends React.Component<
             className="expandCollapseButton"
             role="button"
             tabIndex={0}
-            aria-label={"console button" + (this.props.isConsoleExpanded ? " collapsed" : " expanded")}
+            aria-label={"console button" + (this.props.isConsoleExpanded ? " expanded" : " collapsed")}
             aria-expanded={!this.props.isConsoleExpanded}
           >
             <img
@@ -205,7 +205,9 @@ export class NotificationConsoleComponent extends React.Component<
         {item.type === ConsoleDataType.Error && <img className="errorIcon" src={ErrorRedIcon} alt="error" />}
         {item.type === ConsoleDataType.InProgress && <img className="loaderIcon" src={LoaderIcon} alt="in progress" />}
         <span className="date">{item.date}</span>
-        <span className="message">{item.message}</span>
+        <span className="message" role="alert" aria-live="assertive">
+          {item.message}
+        </span>
       </div>
     ));
   }

src/Explorer/Menus/NotificationConsole/__snapshots__/NotificationConsoleComponent.test.tsx.snap

@@ -70,7 +70,7 @@ exports[`NotificationConsoleComponent renders the console 1`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button expanded"
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -236,7 +236,7 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
     </div>
     <div
       aria-expanded={true}
-      aria-label="console button expanded"
+      aria-label="console button collapsed"
       className="expandCollapseButton"
       role="button"
       tabIndex={0}
@@ -340,7 +340,9 @@ exports[`NotificationConsoleComponent renders the console 2`] = `
             date
           </span>
           <span
+            aria-live="assertive"
             className="message"
+            role="alert"
           >
             message
           </span>

src/Explorer/Notebook/NotebookComponent/NotebookComponentBootstrapper.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { CellId, CellType, ImmutableNotebook } from "@nteract/commutable";
 // Vendor modules
 import {
@@ -30,6 +31,19 @@ export interface NotebookComponentBootstrapperOptions {
   contentRef: ContentRef;
 }
 
+interface IWrapModel {
+  name: string;
+  path: string;
+  last_modified: Date;
+  created: string;
+  content: unknown;
+  format: string;
+  mimetype: unknown;
+  size: number;
+  writeable: boolean;
+  type: string;
+}
+
 export class NotebookComponentBootstrapper {
   public contentRef: ContentRef;
   protected renderExtraComponent: () => JSX.Element;
@@ -41,7 +55,7 @@ export class NotebookComponentBootstrapper {
     this.contentRef = options.contentRef;
   }
 
-  protected static wrapModelIntoContent(name: string, path: string, content: any) {
+  protected static wrapModelIntoContent(name: string, path: string, content: unknown): IWrapModel {
     return {
       name,
       path,
@@ -49,7 +63,7 @@ export class NotebookComponentBootstrapper {
       created: "",
       content,
       format: "json",
-      mimetype: null as any,
+      mimetype: undefined,
       size: 0,
       writeable: false,
       type: "notebook",
@@ -85,7 +99,7 @@ export class NotebookComponentBootstrapper {
     };
   }
 
-  public setContent(name: string, content: any): void {
+  public setContent(name: string, content: unknown): void {
     this.getStore().dispatch(
       actions.fetchContentFulfilled({
         filepath: undefined,
@@ -270,13 +284,16 @@ export class NotebookComponentBootstrapper {
   public isContentDirty(): boolean {
     const content = selectors.content(this.getStore().getState(), { contentRef: this.contentRef });
     if (!content) {
-      console.log("No error");
       return false;
     }
 
     return selectors.notebook.isDirty(content.model as Immutable.RecordOf<DocumentRecordProps>);
   }
 
+  public isNotebookUntrusted(): boolean {
+    return NotebookUtil.isNotebookUntrusted(this.getStore().getState(), this.contentRef);
+  }
+
   /**
    * For display purposes, only return non-killed kernels
    */

src/Explorer/Notebook/NotebookComponent/VirtualCommandBarComponent.tsx

@@ -1,12 +1,14 @@
 import { AppState, ContentRef, selectors } from "@nteract/core";
 import * as React from "react";
 import { connect } from "react-redux";
+import { NotebookUtil } from "../NotebookUtil";
 import * as NteractUtil from "../NTeractUtil";
 
 interface VirtualCommandBarComponentProps {
   kernelSpecName: string;
   kernelStatus: string;
   currentCellType: string;
+  isNotebookUntrusted: boolean;
   onRender: () => void;
 }
 
@@ -20,7 +22,8 @@ class VirtualCommandBarComponent extends React.Component<VirtualCommandBarCompon
     return (
       this.props.kernelStatus !== nextProps.kernelStatus ||
       this.props.kernelSpecName !== nextProps.kernelSpecName ||
-      this.props.currentCellType !== nextProps.currentCellType
+      this.props.currentCellType !== nextProps.currentCellType ||
+      this.props.isNotebookUntrusted !== nextProps.isNotebookUntrusted
     );
   }
 
@@ -50,6 +53,7 @@ const makeMapStateToProps = (
         kernelStatus,
         kernelSpecName,
         currentCellType,
+        isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       } as VirtualCommandBarComponentProps;
     }
 
@@ -69,6 +73,7 @@ const makeMapStateToProps = (
       kernelStatus,
       kernelSpecName,
       currentCellType,
+      isNotebookUntrusted: NotebookUtil.isNotebookUntrusted(state, contentRef),
       onRender: initialProps.onRender,
     };
   };

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -38,6 +38,7 @@ import { useTabs } from "../../../hooks/useTabs";
 import { Action as TelemetryAction, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError, logConsoleInfo } from "../../../Utils/NotificationConsoleUtils";
+import { useDialog } from "../../Controls/Dialog";
 import * as FileSystemUtil from "../FileSystemUtil";
 import * as cdbActions from "../NotebookComponent/actions";
 import { NotebookUtil } from "../NotebookUtil";
@@ -108,7 +109,7 @@ const formWebSocketURL = (serverConfig: NotebookServiceConfig, kernelId: string,
   const q = params.toString();
   const suffix = q !== "" ? `?${q}` : "";
 
-  const url = (serverConfig.endpoint || "") + `api/kernels/${kernelId}/channels${suffix}`;
+  const url = (serverConfig.endpoint.slice(0, -1) || "") + `api/kernels/${kernelId}/channels${suffix}`;
 
   return url.replace(/^http(s)?/, "ws$1");
 };
@@ -686,10 +687,8 @@ const handleKernelConnectionLostEpic = (
         logConsoleError(msg);
         logFailureToTelemetry(state, "Kernel restart error", msg);
 
-        const explorer = window.dataExplorer;
+        useDialog.getState().showOkModalDialog("kernel restarts", msg);
-        if (explorer) {
+
-          explorer.showOkModalDialog("kernel restarts", msg);
-        }
         return of(EMPTY);
       }
 
@@ -773,8 +772,7 @@ const closeUnsupportedMimetypesEpic = (
     ofType(actions.FETCH_CONTENT_FULFILLED),
     mergeMap((action) => {
       const mimetype = action.payload.model.mimetype;
-      const explorer = window.dataExplorer;
+      if (!TextFile.handles(mimetype)) {
-      if (explorer && !TextFile.handles(mimetype)) {
         const filepath = action.payload.filepath;
         // Close tab and show error message
         useTabs
@@ -783,7 +781,7 @@ const closeUnsupportedMimetypesEpic = (
             (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
           );
         const msg = `${filepath} cannot be rendered. Please download the file, in order to view it outside of Data Explorer.`;
-        explorer.showOkModalDialog("File cannot be rendered", msg);
+        useDialog.getState().showOkModalDialog("File cannot be rendered", msg);
         logConsoleError(msg);
       }
       return EMPTY;
@@ -803,8 +801,6 @@ const closeContentFailedToFetchEpic = (
   return action$.pipe(
     ofType(actions.FETCH_CONTENT_FAILED),
     mergeMap((action) => {
-      const explorer = window.dataExplorer;
-      if (explorer) {
       const filepath = action.payload.filepath;
       // Close tab and show error message
       useTabs
@@ -813,9 +809,8 @@ const closeContentFailedToFetchEpic = (
           (tab: any) => (tab as any).notebookPath && FileSystemUtil.isPathEqual((tab as any).notebookPath(), filepath)
         );
       const msg = `Failed to load file: ${filepath}.`;
-        explorer.showOkModalDialog("Failure to load", msg);
+      useDialog.getState().showOkModalDialog("Failure to load", msg);
       logConsoleError(msg);
-      }
       return EMPTY;
     })
   );

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,12 +2,15 @@
  * Notebook container related stuff
  */
 import * as Constants from "../../Common/Constants";
+import { ConnectionStatusType } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import * as DataModels from "../../Contracts/DataModels";
+import { ContainerConnectionInfo } from "../../Contracts/DataModels";
 import { userContext } from "../../UserContext";
 import { createOrUpdate, destroy } from "../../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { logConsoleProgress } from "../../Utils/NotificationConsoleUtils";
+import { NotebookUtil } from "./NotebookUtil";
 import { useNotebook } from "./useNotebook";
 
 export class NotebookContainerClient {
@@ -42,7 +45,7 @@ export class NotebookContainerClient {
     }, delayMs);
   }
 
-  private async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
+  public async getMemoryUsage(): Promise<DataModels.MemoryUsageInfo> {
     const notebookServerInfo = useNotebook.getState().notebookServerInfo;
     if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
       const error = "No server endpoint detected";
@@ -56,7 +59,7 @@ export class NotebookContainerClient {
 
     const { notebookServerEndpoint, authToken } = this.getNotebookServerConfig();
     try {
-      const response = await fetch(`${notebookServerEndpoint}/api/metrics/memory`, {
+      const response = await fetch(`${notebookServerEndpoint}api/metrics/memory`, {
         method: "GET",
         headers: {
           Authorization: authToken,
@@ -75,6 +78,12 @@ export class NotebookContainerClient {
             freeKB: memoryUsageInfo.free,
           };
         }
+      } else if (NotebookUtil.isPhoenixEnabled()) {
+        const connectionStatus: ContainerConnectionInfo = {
+          status: ConnectionStatusType.ReConnect,
+        };
+        useNotebook.getState().resetConatinerConnection(connectionStatus);
+        useNotebook.getState().setIsRefreshed(true);
       }
       return undefined;
     } catch (error) {
@@ -84,6 +93,13 @@ export class NotebookContainerClient {
           "Connection lost with Notebook server. Attempting to reconnect..."
         );
       }
+      if (NotebookUtil.isPhoenixEnabled()) {
+        const connectionStatus: ContainerConnectionInfo = {
+          status: ConnectionStatusType.Failed,
+        };
+        useNotebook.getState().resetConatinerConnection(connectionStatus);
+        useNotebook.getState().setIsRefreshed(true);
+      }
       this.onConnectionLost();
       return undefined;
     }

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,7 +36,10 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public createNewNotebookFile(parent: NotebookContentItem): Promise<NotebookContentItem> {
+  public async createNewNotebookFile(
+    parent: NotebookContentItem,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
@@ -57,6 +60,8 @@ export class NotebookContentClient {
         const notebookFile = xhr.response;
 
         const item = NotebookUtil.createNotebookContentItem(notebookFile.name, notebookFile.path, notebookFile.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         if (parent.children) {
           item.parent = parent;
           parent.children.push(item);
@@ -66,9 +71,9 @@ export class NotebookContentClient {
       });
   }
 
-  public async deleteContentItem(item: NotebookContentItem): Promise<void> {
+  public async deleteContentItem(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
     const path = await this.deleteNotebookFile(item.path);
-    useNotebook.getState().deleteNotebookItem(item);
+    useNotebook.getState().deleteNotebookItem(item, isGithubTree);
 
     // TODO: Delete once old resource tree is removed
     if (!path || path !== item.path) {
@@ -91,12 +96,12 @@ export class NotebookContentClient {
   public async uploadFileAsync(
     name: string,
     content: string,
-    parent: NotebookContentItem
+    parent: NotebookContentItem,
+    isGithubTree?: boolean
   ): Promise<NotebookContentItem> {
     if (!parent || parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent must be a directory: ${parent}`);
     }
-
     const filepath = NotebookUtil.getFilePath(parent.path, name);
     if (await this.checkIfFilepathExists(filepath)) {
       throw new Error(`File already exists: ${filepath}`);
@@ -115,6 +120,8 @@ export class NotebookContentClient {
       .then((xhr: AjaxResponse) => {
         const notebookFile = xhr.response;
         const item = NotebookUtil.createNotebookContentItem(notebookFile.name, notebookFile.path, notebookFile.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         if (parent.children) {
           item.parent = parent;
           parent.children.push(item);
@@ -137,7 +144,11 @@ export class NotebookContentClient {
    * @param sourcePath
    * @param targetName is not prefixed with path
    */
-  public renameNotebook(item: NotebookContentItem, targetName: string): Promise<NotebookContentItem> {
+  public renameNotebook(
+    item: NotebookContentItem,
+    targetName: string,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     const sourcePath = item.path;
     // Match extension
     if (sourcePath.indexOf(".") !== -1) {
@@ -163,6 +174,9 @@ export class NotebookContentClient {
         item.name = notebookFile.name;
         item.path = notebookFile.path;
         item.timestamp = NotebookUtil.getCurrentTimestamp();
+
+        useNotebook.getState().updateNotebookItem(item, isGithubTree);
+
         return item;
       });
   }
@@ -172,7 +186,11 @@ export class NotebookContentClient {
    * @param parent
    * @param newDirectoryName basename of the new directory
    */
-  public async createDirectory(parent: NotebookContentItem, newDirectoryName: string): Promise<NotebookContentItem> {
+  public async createDirectory(
+    parent: NotebookContentItem,
+    newDirectoryName: string,
+    isGithubTree?: boolean
+  ): Promise<NotebookContentItem> {
     if (parent.type !== NotebookContentItemType.Directory) {
       throw new Error(`Parent is not a directory: ${parent.path}`);
     }
@@ -199,8 +217,11 @@ export class NotebookContentClient {
 
         const dir = xhr.response;
         const item = NotebookUtil.createNotebookContentItem(dir.name, dir.path, dir.type);
+        useNotebook.getState().insertNotebookItem(parent, cloneDeep(item), isGithubTree);
+        // TODO: delete when ResourceTreeAdapter is removed
         item.parent = parent;
         parent.children?.push(item);
+
         return item;
       });
   }

src/Explorer/Notebook/NotebookManager.tsx

@@ -18,6 +18,7 @@ import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstan
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../UserContext";
 import { getFullName } from "../../Utils/UserUtils";
+import { useDialog } from "../Controls/Dialog";
 import Explorer from "../Explorer";
 import { CopyNotebookPane } from "../Panes/CopyNotebookPane/CopyNotebookPane";
 import { GitHubReposPanel } from "../Panes/GitHubReposPanel/GitHubReposPanel";
@@ -29,6 +30,7 @@ import { SnapshotRequest } from "./NotebookComponent/types";
 import { NotebookContainerClient } from "./NotebookContainerClient";
 import { NotebookContentClient } from "./NotebookContentClient";
 import { SchemaAnalyzerNotebook } from "./SchemaAnalyzer/SchemaAnalyzerUtils";
+import { useNotebook } from "./useNotebook";
 
 type NotebookPaneContent = string | ImmutableNotebook;
 
@@ -110,6 +112,7 @@ export default class NotebookManager {
     this.junoClient.subscribeToPinnedRepos((pinnedRepos) => {
       this.params.resourceTree.initializeGitHubRepos(pinnedRepos);
       this.params.resourceTree.triggerRender();
+      useNotebook.getState().initializeGitHubRepos(pinnedRepos);
     });
     this.refreshPinnedRepos();
   }
@@ -170,7 +173,9 @@ export default class NotebookManager {
     if (error.status === HttpStatusCodes.Unauthorized) {
       this.gitHubOAuthService.resetToken();
 
-      this.params.container.showOkCancelModalDialog(
+      useDialog
+        .getState()
+        .showOkCancelModalDialog(
           undefined,
           "Cosmos DB cannot access your Github account anymore. Please connect to GitHub again.",
           "Connect to GitHub",
@@ -194,7 +199,7 @@ export default class NotebookManager {
   private promptForCommitMsg = (title: string, primaryButtonLabel: string) => {
     return new Promise<string>((resolve, reject) => {
       let commitMsg = "Committed from Azure Cosmos DB Notebooks";
-      this.params.container.showOkCancelModalDialog(
+      useDialog.getState().showOkCancelModalDialog(
         title || "Commit",
         undefined,
         primaryButtonLabel || "Commit",
@@ -207,6 +212,7 @@ export default class NotebookManager {
         "Cancel",
         () => reject(new Error("Commit dialog canceled")),
         undefined,
+        undefined,
         {
           label: "Commit message",
           autoAdjustHeight: true,