remove commented code

* initial changes for CP

* Added container unprovisioning

* Added postgreSQL terminal

* changed postgres terminal -> shell

* Initialize Container Request payload change

* added postgres button

* Added notebookServerInfo

* Feature flag enabling and integration with phoenix

* Remove postgre implementations

* fix issues

* fix format issues

* fix format issues-1

* fix format issues-2

* fix format issues-3

* fix format issues-4

* fix format issues-5

* connection status component

* connection status component-1

* connection status component-2

* connection status component-3

* address issues

* removal of ms

* removal of ms

* removal of ms-1

* removal of time after connected

* removal of time after connected

* removing unnecessary code

Co-authored-by: Srinath Narayanan <srnara@microsoft.com>
Co-authored-by: Bala Lakshmi Narayanasami <balalakshmin@microsoft.com>

.eslintignore

@@ -21,16 +21,8 @@ src/Common/MongoUtility.ts
 src/Common/NotificationsClientBase.ts
 src/Common/QueriesClient.ts
 src/Common/Splitter.ts
-src/Config.ts
-src/Contracts/ActionContracts.ts
-src/Contracts/DataModels.ts
-src/Contracts/Diagnostics.ts
-src/Contracts/ExplorerContracts.ts
-src/Contracts/Versions.ts
-src/Contracts/ViewModels.ts
 src/Controls/Heatmap/Heatmap.test.ts
 src/Controls/Heatmap/Heatmap.ts
-src/Controls/Heatmap/HeatmapDatatypes.ts
 src/Definitions/datatables.d.ts
 src/Definitions/gif.d.ts
 src/Definitions/globals.d.ts
@@ -44,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
@@ -164,18 +137,10 @@ src/Terminal/NotebookAppContracts.d.ts
 src/applyExplorerBindings.ts
 src/global.d.ts
 src/setupTests.ts
-src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx
-src/Explorer/Controls/Notebook/NotebookTerminalComponent.test.tsx
-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/GraphVizComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx
-src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx
-src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.test.tsx
 src/Explorer/Graph/GraphExplorerComponent/ReadOnlyNodePropertiesComponent.tsx
 src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

package.json

@@ -230,4 +230,4 @@
   "prettier": {
     "printWidth": 120
   }
-}
+}

src/Common/Constants.ts

@@ -96,6 +96,7 @@ export class Flights {
   public static readonly AutoscaleTest = "autoscaletest";
   public static readonly PartitionKeyTest = "partitionkeytest";
   public static readonly PKPartitionKeyTest = "pkpartitionkeytest";
+  public static readonly Phoenix = "phoenix";
 }
 
 export class AfecFeatures {
@@ -337,6 +338,13 @@ export enum ConflictOperationType {
   Delete = "delete",
 }
 
+export enum ConnectionStatusType {
+  Connecting = "Connecting",
+  Allocating = "Allocating",
+  Connected = "Connected",
+  Failed = "Connection Failed",
+}
+
 export const EmulatorMasterKey =
   //[SuppressMessage("Microsoft.Security", "CS002:SecretInNextLine", Justification="Well known public masterKey for emulator")]
   "C2y6yDjf5/R+ob0N8A7Cgv30VRDJIWEHLM+4QDU5DE2nQ9nDuVTqobD4b8mGGyPMbIZnqyMsEcaGQy67XIw/Jw==";

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 divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+  const theme: PortalTheme = 1;
+  const divElement = `<div id="${Heatmap.elementId}"></div>`;
 
   describe("drawHeatmap rendering", () => {
     beforeEach(() => {
@@ -100,7 +100,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a dark theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -111,7 +111,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);
@@ -120,7 +120,7 @@ describe("iframe rendering when there is no data", () => {
   });
 
   it("should show a no data message with a white theme", () => {
-    let data = {
+    const data = {
       data: {
         signature: "pcIframe",
         data: {
@@ -131,7 +131,7 @@ describe("iframe rendering when there is no data", () => {
       },
     };
 
-    const divElement: string = `<div id="${Heatmap.elementId}"></div>`;
+    const divElement = `<div id="${Heatmap.elementId}"></div>`;
     document.body.innerHTML = divElement;
 
     handleMessage(data as MessageEvent);

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/Controls/Dialog.tsx

@@ -181,8 +181,7 @@ export const Dialog: FC = () => {
           text: secondaryButtonText,
           onClick: onSecondaryButtonClick,
         }
-      : {};
-
+      : undefined;
   return visible ? (
     <FluentDialog {...dialogProps}>
       {choiceGroupProps && <ChoiceGroup {...choiceGroupProps} />}

src/Explorer/Controls/InputTypeahead/InputTypeaheadComponent.tsx

@@ -50,7 +50,7 @@ export interface InputTypeaheadComponentProps {
    * Override default jquery-typeahead options
    * WARNING: do not override input, source or callback to avoid breaking the components behavior.
    */
-  typeaheadOverrideOptions?: any;
+  typeaheadOverrideOptions?: { dynamic: boolean };
 
   /**
    * This function gets called when pressing ENTER on the input box
@@ -132,6 +132,7 @@ export class InputTypeaheadComponent extends React.Component<
 
   private filterChoiceByValue = (choices: Item[], searchKeyword: string): Item[] => {
     return choices.filter((choice) =>
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       Object.keys(choice).some((key) => choice[key].toLowerCase().includes(searchKeyword.toLowerCase()))
     );

src/Explorer/Controls/NotebookViewer/NotebookViewerComponent.tsx

@@ -264,6 +264,6 @@ export class NotebookViewerComponent
   };
 
   private reportAbuse = (): void => {
-    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => {});
+    GalleryUtils.reportAbuse(this.props.junoClient, this.state.galleryItem, this, () => ({}));
   };
 }

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/Explorer.tsx

@@ -4,6 +4,7 @@ import _ from "underscore";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
+import { ConnectionStatusType } from "../Common/Constants";
 import { readCollection } from "../Common/dataAccess/readCollection";
 import { readDatabases } from "../Common/dataAccess/readDatabases";
 import { isPublicInternetAccessAllowed } from "../Common/DatabaseAccountUtility";
@@ -16,6 +17,7 @@ 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";
@@ -87,12 +89,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
@@ -343,19 +346,43 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
+    if (userContext.features.phoenix) {
+      const connectionStatus: DataModels.ContainerConnectionInfo = {
+        status: ConnectionStatusType.Allocating,
+      };
+      useNotebook.getState().setConnectionInfo(connectionStatus);
+      const provisionData = {
+        cosmosEndpoint: userContext.databaseAccount.properties.documentEndpoint,
+        resourceId: userContext.databaseAccount.id,
+        dbAccountName: userContext.databaseAccount.name,
+        aadToken: userContext.authorizationToken,
+        resourceGroup: userContext.resourceGroup,
+        subscriptionId: userContext.subscriptionId,
+      };
+      const connectionInfo = await this.phoenixClient.containerConnectionInfo(provisionData);
+      if (connectionInfo.data && connectionInfo.data.notebookServerUrl) {
+        connectionStatus.status = ConnectionStatusType.Connected;
+        useNotebook.getState().setConnectionInfo(connectionStatus);
 
-    await this.ensureNotebookWorkspaceRunning();
-    const connectionInfo = await listConnectionInfo(
-      userContext.subscriptionId,
-      userContext.resourceGroup,
-      databaseAccount.name,
-      "default"
-    );
+        useNotebook.getState().setNotebookServerInfo({
+          notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
+          authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
+        });
+      }
+    } else {
+      await this.ensureNotebookWorkspaceRunning();
+      const connectionInfo = await listConnectionInfo(
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        databaseAccount.name,
+        "default"
+      );
 
-    useNotebook.getState().setNotebookServerInfo({
-      notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
-      authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
-    });
+      useNotebook.getState().setNotebookServerInfo({
+        notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.notebookServerEndpoint,
+        authToken: userContext.features.notebookServerToken || connectionInfo.authToken,
+      });
+    }
 
     useNotebook.getState().initializeNotebooksTree(this.notebookManager);
 
@@ -364,7 +391,7 @@ export default class Explorer {
     this._isInitializingNotebooks = false;
   }
 
-  public resetNotebookWorkspace() {
+  public resetNotebookWorkspace(): void {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
       handleError(
         "Attempt to reset notebook workspace, but notebook is not enabled",
@@ -389,7 +416,6 @@ export default class Explorer {
     if (!databaseAccount) {
       return false;
     }
-
     try {
       const { value: workspaces } = await listByDatabaseAccount(
         userContext.subscriptionId,
@@ -906,7 +932,7 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind) {
+  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
     let title: string;
 
     switch (kind) {
@@ -1026,7 +1052,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();
     }
 
@@ -1072,10 +1101,13 @@ export default class Explorer {
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
     await useNotebook.getState().refreshNotebooksEnabledStateForAccount();
-    const isNotebookEnabled: boolean =
-      userContext.authType !== AuthType.ResourceToken &&
-      ((await this._containsDefaultNotebookWorkspace(userContext.databaseAccount)) ||
-        userContext.features.enableNotebooks);
+    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());
 

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -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) => {
@@ -473,7 +473,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       return false;
     }
 
-    let pairs: any[] = data;
+    const pairs: any[] = data;
     for (let i = 0; i < pairs.length; i++) {
       const item = pairs[i];
       if (
@@ -772,8 +772,8 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           return;
         }
 
-        let edge = edges[0];
-        let graphData = this.originalGraphData;
+        const edge = edges[0];
+        const graphData = this.originalGraphData;
         graphData.addEdge(edge);
 
         // Allow loadNeighbors to load list new edge
@@ -803,7 +803,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public removeEdge(edgeId: string): Q.Promise<any> {
     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,9 +826,9 @@ 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") {
         return false;
       }
@@ -933,7 +933,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
           throw { title: err };
         }
 
-        let vertex = vertices[0];
+        const vertex = vertices[0];
         const graphData = this.originalGraphData;
         graphData.addVertex(vertex);
         this.updateGraphData(graphData, this.state.igraphConfig);
@@ -1082,7 +1082,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);
@@ -1224,7 +1224,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     return $.map(
       this.state.rootMap,
       (value: any, index: number): 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,
@@ -1388,7 +1388,7 @@ 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);
@@ -1425,7 +1425,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
@@ -1463,16 +1463,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
    * @return promise when done
    */
   private editGraphEdges(editedEdges: EditedEdges): Q.Promise<any> {
-    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
@@ -1533,7 +1533,7 @@ 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;
@@ -1543,7 +1543,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
       if (item.hasOwnProperty("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 +1570,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[] } = {};
-    for (let p in data.properties) {
+    const props: { [id: string]: ViewModels.GremlinPropertyValueType[] } = {};
+    for (const p in data.properties) {
       props[p] = data.properties[p].map((gremlinProperty) => gremlinProperty.value);
     }
 
     // update neighbors
-    let sources: NeighborVertexBasicInfo[] = [];
-    let targets: NeighborVertexBasicInfo[] = [];
+    const sources: 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 +1611,16 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
     targets: NeighborVertexBasicInfo[]
   ): void {
     // update neighbors
-    let gd = this.originalGraphData;
-    let v = gd.getVertexById(id);
+    const gd = this.originalGraphData;
+    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 +1629,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 +1639,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 +1648,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,
@@ -1681,20 +1681,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")) {
         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 +1708,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;

src/Explorer/Graph/GraphExplorerComponent/LeftPaneComponent.tsx

@@ -58,7 +58,7 @@ export class LeftPaneComponent extends React.Component<LeftPaneComponentProps> {
         className={className}
         as="tr"
         aria-label={node.caption}
-        onActivated={(e) => this.props.onRootNodeSelected(node.id)}
+        onActivated={() => this.props.onRootNodeSelected(node.id)}
         key={node.id}
       >
         <td className="resultItem">

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.test.tsx

@@ -1,8 +1,8 @@
-import React from "react";
 import { mount, ReactWrapper } from "enzyme";
 import * as Q from "q";
-import { NodePropertiesComponent, NodePropertiesComponentProps, Mode } from "./NodePropertiesComponent";
-import { GraphHighlightedNodeData, EditedProperties, EditedEdges, PossibleVertex } from "./GraphExplorer";
+import React from "react";
+import { GraphHighlightedNodeData, PossibleVertex } from "./GraphExplorer";
+import { Mode, NodePropertiesComponent, NodePropertiesComponentProps } from "./NodePropertiesComponent";
 
 describe("Property pane", () => {
   const title = "My Title";
@@ -37,17 +37,25 @@ describe("Property pane", () => {
     return {
       expandedTitle: title,
       isCollapsed: false,
-      onCollapsedChanged: (newValue: boolean): void => {},
+      onCollapsedChanged: (): void => {
+        ("");
+      },
       node: highlightedNode,
-      getPkIdFromNodeData: (v: GraphHighlightedNodeData): string => null,
-      collectionPartitionKeyProperty: null,
-      updateVertexProperties: (editedProperties: EditedProperties): Q.Promise<void> => Q.resolve(),
-      selectNode: (id: string): void => {},
-      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(null),
-      possibleEdgeLabels: null,
-      editGraphEdges: (editedEdges: EditedEdges): Q.Promise<any> => Q.resolve(),
-      deleteHighlightedNode: (): void => {},
-      onModeChanged: (newMode: Mode): void => {},
+      getPkIdFromNodeData: (): string => undefined,
+      collectionPartitionKeyProperty: undefined,
+      updateVertexProperties: (): Q.Promise<void> => Q.resolve(),
+      selectNode: (): void => {
+        ("");
+      },
+      updatePossibleVertices: (): Q.Promise<PossibleVertex[]> => Q.resolve(undefined),
+      possibleEdgeLabels: undefined,
+      editGraphEdges: (): Q.Promise<unknown> => Q.resolve(),
+      deleteHighlightedNode: (): void => {
+        ("");
+      },
+      onModeChanged: (): void => {
+        ("");
+      },
       viewMode: Mode.READONLY_PROP,
     };
   };

src/Explorer/Graph/GraphExplorerComponent/NodePropertiesComponent.tsx

@@ -45,7 +45,7 @@ export interface NodePropertiesComponentProps {
   selectNode: (id: string) => void;
   updatePossibleVertices: () => Q.Promise<PossibleVertex[]>;
   possibleEdgeLabels: Item[];
-  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<any>;
+  editGraphEdges: (editedEdges: EditedEdges) => Q.Promise<unknown>;
   deleteHighlightedNode: () => void;
   onModeChanged: (newMode: Mode) => void;
   viewMode: Mode; // If viewMode is specified in parent, keep state in sync with it
@@ -72,7 +72,7 @@ export class NodePropertiesComponent extends React.Component<
     super(props);
     this.state = {
       editedProperties: {
-        pkId: null,
+        pkId: undefined,
         readOnlyProperties: [],
         existingProperties: [],
         addedProperties: [],
@@ -98,15 +98,12 @@ export class NodePropertiesComponent extends React.Component<
     };
   }
 
-  public static getDerivedStateFromProps(
-    props: NodePropertiesComponentProps,
-    state: NodePropertiesComponentState
-  ): Partial<NodePropertiesComponentState> {
+  public static getDerivedStateFromProps(props: NodePropertiesComponentProps): Partial<NodePropertiesComponentState> {
     if (props.viewMode !== Mode.READONLY_PROP) {
       return { isDeleteConfirm: false };
     }
 
-    return null;
+    return undefined;
   }
 
   public render(): JSX.Element {
@@ -137,11 +134,14 @@ export class NodePropertiesComponent extends React.Component<
    * Get type option. Limit to string, number or boolean
    * @param value
    */
-  private static getTypeOption(value: any): ViewModels.InputPropertyValueTypeString {
-    if (value == null) {
+  private static getTypeOption(
+    value: null | string | number | undefined | boolean
+  ): ViewModels.InputPropertyValueTypeString {
+    // eslint-disable-next-line no-null/no-null
+    if (value === null) {
       return "null";
     }
-    let type = typeof value;
+    const type = typeof value;
     switch (type) {
       case "number":
       case "boolean":
@@ -173,9 +173,10 @@ export class NodePropertiesComponent extends React.Component<
 
     const existingProps: ViewModels.InputProperty[] = [];
 
+    // eslint-disable-next-line no-prototype-builtins
     if (this.props.node.hasOwnProperty("properties")) {
       const hProps = this.props.node["properties"];
-      for (let p in hProps) {
+      for (const p in hProps) {
         const propValues = hProps[p];
         (p === partitionKeyProperty ? readOnlyProps : existingProps).push({
           key: p,
@@ -437,7 +438,7 @@ export class NodePropertiesComponent extends React.Component<
         </div>
       );
     } else {
-      return null;
+      return undefined;
     }
   }
 

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -54,6 +54,8 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
+  uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
+
   if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
     uiFabricControlButtons.unshift(CommandBarUtil.createMemoryTracker("memoryTracker"));
   }

src/Explorer/Menus/CommandBar/CommandBarComponentButtonFactory.tsx

@@ -80,8 +80,9 @@ export function createStaticCommandBarButtons(
     }
 
     notebookButtons.push(createOpenTerminalButton(container));
-
-    notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    if (userContext.features.phoenix === false) {
+      notebookButtons.push(createNotebookWorkspaceResetButton(container));
+    }
     if (
       (userContext.apiType === "Mongo" &&
         useNotebook.getState().isShellEnabled &&

src/Explorer/Menus/CommandBar/CommandBarUtil.tsx

@@ -13,6 +13,7 @@ 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 { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
 /**
@@ -201,3 +202,10 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
     onRender: () => <MemoryTracker />,
   };
 };
+
+export const createConnectionStatus = (key: string): ICommandBarItemProps => {
+  return {
+    key,
+    onRender: () => <ConnectionStatus />,
+  };
+};

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -0,0 +1,79 @@
+@import "../../../../less/Common/Constants";
+
+.connectionStatusContainer {
+    cursor: default;
+    align-items: center;
+    margin: 0 9px;
+    border: 1px;
+    min-height: 44px;
+
+    > span {
+        padding-right: 12px;
+        font-size: 13px;
+        font-family: @DataExplorerFont;
+        color: @DefaultFontColor;
+    }
+}
+.connectionStatusFailed{
+    color: #bd1919;
+}
+.ring-container {
+    position: relative;
+}
+
+.ringringGreen {
+    border: 3px solid green;
+    border-radius: 30px;
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    margin: .4285em 0em 0em 0.07477em;
+    animation: pulsate 3s ease-out;
+    animation-iteration-count: infinite; 
+    opacity: 0.0
+}
+.ringringYellow{
+    border: 3px solid #ffbf00;
+    border-radius: 30px;
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    margin: .4285em 0em 0em 0.07477em;
+    animation: pulsate 3s ease-out;
+    animation-iteration-count: infinite; 
+    opacity: 0.0
+}
+.ringringRed{
+    border: 3px solid #bd1919;
+    border-radius: 30px;
+    height: 18px;
+    width: 18px;
+    position: absolute;
+    margin: .4285em 0em 0em 0.07477em;
+    animation: pulsate 3s ease-out;
+    animation-iteration-count: infinite; 
+    opacity: 0.0
+}
+@keyframes pulsate {
+    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
+    15% {opacity: 0.8;}
+    25% {opacity: 0.6;}
+    45% {opacity: 0.4;}
+    70% {opacity: 0.3;}
+    100% {-webkit-transform: scale(.7, .7); opacity: 0.1;}
+}
+.locationGreenDot{
+    font-size: 20px;
+    margin-right: 0.07em;
+    color: green;
+}
+.locationYellowDot{
+    font-size: 20px;
+    margin-right: 0.07em;
+    color: #ffbf00;
+}
+.locationRedDot{
+    font-size: 20px;
+    margin-right: 0.07em;
+    color: #bd1919;
+}

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.tsx

@@ -0,0 +1,77 @@
+import { Icon, ProgressIndicator, Spinner, SpinnerSize, Stack, TooltipHost } from "@fluentui/react";
+import * as React from "react";
+import { ConnectionStatusType } from "../../../Common/Constants";
+import { useNotebook } from "../../Notebook/useNotebook";
+import "../CommandBar/ConnectionStatusComponent.less";
+
+export const ConnectionStatus: React.FC = (): 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("locationYellowDot");
+  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
+  const toolTipContent = "Hosted runtime status.";
+  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);
+  if (!connectionInfo) {
+    return (
+      <Stack className="connectionStatusContainer" horizontal>
+        <span>Connecting</span>
+        <Spinner size={SpinnerSize.medium} />
+      </Stack>
+    );
+  }
+  if (connectionInfo && connectionInfo.status === ConnectionStatusType.Allocating && isActive === false) {
+    setIsActive(true);
+  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Connected && isActive === true) {
+    stopTimer();
+    setStatusColor("locationGreenDot");
+    setStatusColorAnimation("ringringGreen");
+  } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
+    stopTimer();
+    setStatusColor("locationRedDot");
+    setStatusColorAnimation("ringringRed");
+  }
+  return (
+    <TooltipHost content={toolTipContent}>
+      <Stack className="connectionStatusContainer" horizontal>
+        <div className="ring-container">
+          <div className={statusColorAnimation}></div>
+          <Icon iconName="LocationDot" className={statusColor} />
+        </div>
+        <span className={connectionInfo.status === ConnectionStatusType.Failed ? "connectionStatusFailed" : ""}>
+          {connectionInfo.status}
+        </span>
+        {connectionInfo.status === ConnectionStatusType.Allocating && isActive && (
+          <ProgressIndicator description={minute + ":" + second} />
+        )}
+      </Stack>
+    </TooltipHost>
+  );
+};

src/Explorer/Notebook/NotebookComponent/epics.ts

@@ -109,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");
 };

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -56,7 +56,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,

src/Explorer/Notebook/NotebookContentClient.ts

@@ -36,7 +36,10 @@ export class NotebookContentClient {
    *
    * @param parent parent folder
    */
-  public createNewNotebookFile(parent: NotebookContentItem, isGithubTree?: boolean): 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}`);
     }
@@ -99,7 +102,6 @@ export class NotebookContentClient {
     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}`);

src/Explorer/Notebook/useNotebook.ts

@@ -28,6 +28,8 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
+  connectionInfo: DataModels.ContainerConnectionInfo;
+  NotebookFolderName: string;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -43,6 +45,7 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
+  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -65,6 +68,8 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
+  connectionInfo: undefined,
+  NotebookFolderName: userContext.features.phoenix ? "My Notebooks Scratch" : "My Notebooks",
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -169,7 +174,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
     const myNotebooksContentRoot = {
-      name: "My Notebooks",
+      name: get().NotebookFolderName,
       path: get().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -178,13 +183,11 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
-    const gitHubNotebooksContentRoot = notebookManager?.gitHubOAuthService?.isLoggedIn()
-      ? {
-          name: "GitHub repos",
-          path: "PsuedoDir",
-          type: NotebookContentItemType.Directory,
-        }
-      : undefined;
+    const gitHubNotebooksContentRoot = {
+      name: "GitHub repos",
+      path: "PsuedoDir",
+      type: NotebookContentItemType.Directory,
+    };
     set({
       myNotebooksContentRoot,
       galleryContentRoot,
@@ -246,4 +249,5 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
+  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
 }));

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -550,6 +550,72 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             </Stack>
           )}
 
+          {this.shouldShowAnalyticalStoreOptions() && (
+            <Stack className="panelGroupSpacing">
+              <Stack horizontal>
+                <Text className="panelTextBold" variant="small">
+                  Analytical store
+                </Text>
+                <TooltipHost
+                  directionalHint={DirectionalHint.bottomLeftEdge}
+                  content={this.getAnalyticalStorageTooltipContent()}
+                >
+                  <Icon iconName="Info" className="panelInfoIcon" />
+                </TooltipHost>
+              </Stack>
+
+              <Stack horizontal verticalAlign="center">
+                <input
+                  className="panelRadioBtn"
+                  checked={this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Enable analytical store"
+                  aria-checked={this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="enableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">On</span>
+
+                <input
+                  className="panelRadioBtn"
+                  checked={!this.state.enableAnalyticalStore}
+                  disabled={!this.isSynapseLinkEnabled()}
+                  aria-label="Disable analytical store"
+                  aria-checked={!this.state.enableAnalyticalStore}
+                  name="analyticalStore"
+                  type="radio"
+                  role="radio"
+                  id="disableAnalyticalStoreBtn"
+                  tabIndex={0}
+                  onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
+                />
+                <span className="panelRadioBtnLabel">Off</span>
+              </Stack>
+
+              {!this.isSynapseLinkEnabled() && (
+                <Stack className="panelGroupSpacing">
+                  <Text variant="small">
+                    Azure Synapse Link is required for creating an analytical store{" "}
+                    {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
+                    <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
+                      Learn more
+                    </Link>
+                  </Text>
+                  <DefaultButton
+                    text="Enable"
+                    onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
+                    style={{ height: 27, width: 80 }}
+                    styles={{ label: { fontSize: 12 } }}
+                  />
+                </Stack>
+              )}
+            </Stack>
+          )}
+
           {userContext.apiType !== "Tables" && (
             <CollapsibleSectionComponent
               title="Advanced"
@@ -604,72 +670,6 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     }
                   />
                 )}
-
-                {this.shouldShowAnalyticalStoreOptions() && (
-                  <Stack className="panelGroupSpacing">
-                    <Stack horizontal>
-                      <Text className="panelTextBold" variant="small">
-                        Analytical store
-                      </Text>
-                      <TooltipHost
-                        directionalHint={DirectionalHint.bottomLeftEdge}
-                        content={this.getAnalyticalStorageTooltipContent()}
-                      >
-                        <Icon iconName="Info" className="panelInfoIcon" />
-                      </TooltipHost>
-                    </Stack>
-
-                    <Stack horizontal verticalAlign="center">
-                      <input
-                        className="panelRadioBtn"
-                        checked={this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Enable analytical store"
-                        aria-checked={this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="enableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onEnableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">On</span>
-
-                      <input
-                        className="panelRadioBtn"
-                        checked={!this.state.enableAnalyticalStore}
-                        disabled={!this.isSynapseLinkEnabled()}
-                        aria-label="Disable analytical store"
-                        aria-checked={!this.state.enableAnalyticalStore}
-                        name="analyticalStore"
-                        type="radio"
-                        role="radio"
-                        id="disableAnalyticalStoreBtn"
-                        tabIndex={0}
-                        onChange={this.onDisableAnalyticalStoreRadioBtnChange.bind(this)}
-                      />
-                      <span className="panelRadioBtnLabel">Off</span>
-                    </Stack>
-
-                    {!this.isSynapseLinkEnabled() && (
-                      <Stack className="panelGroupSpacing">
-                        <Text variant="small">
-                          Azure Synapse Link is required for creating an analytical store{" "}
-                          {getCollectionName().toLocaleLowerCase()}. Enable Synapse Link for this Cosmos DB account.{" "}
-                          <Link href="https://aka.ms/cosmosdb-synapselink" target="_blank">
-                            Learn more
-                          </Link>
-                        </Text>
-                        <DefaultButton
-                          text="Enable"
-                          onClick={() => this.props.explorer.openEnableSynapseLinkDialog()}
-                          style={{ height: 27, width: 80 }}
-                          styles={{ label: { fontSize: 12 } }}
-                        />
-                      </Stack>
-                    )}
-                  </Stack>
-                )}
               </Stack>
             </CollapsibleSectionComponent>
           )}

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -5,6 +5,7 @@ import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
+import { userContext } from "../../../UserContext";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import Explorer from "../../Explorer";
@@ -75,6 +76,8 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.owner,
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
+      } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
+        destination = "My Notebooks Scratch";
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,6 +12,7 @@ import {
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
+import { useNotebook } from "../../Notebook/useNotebook";
 import { ResourceTreeAdapter } from "../../Tree/ResourceTreeAdapter";
 
 interface Location {
@@ -46,11 +47,10 @@ export const CopyNotebookPaneComponent: FunctionComponent<CopyNotebookPaneProps>
 
   const getDropDownOptions = (): IDropdownOption[] => {
     const options: IDropdownOption[] = [];
-
     options.push({
       key: "MyNotebooks-Item",
-      text: ResourceTreeAdapter.MyNotebooksTitle,
-      title: ResourceTreeAdapter.MyNotebooksTitle,
+      text: useNotebook.getState().NotebookFolderName,
+      title: useNotebook.getState().NotebookFolderName,
       data: {
         type: "MyNotebooks",
       } as Location,

src/Explorer/Panes/GitHubReposPanel/__snapshots__/GitHubReposPanel.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`GitHub Repos Panel should render Default properly 1`] = `
             "isTabsContentExpanded": [Function],
             "onRefreshDatabasesKeyPress": [Function],
             "onRefreshResourcesClick": [Function],
+            "phoenixClient": PhoenixClient {},
             "provideFeedbackEmail": [Function],
             "queriesClient": QueriesClient {
               "container": [Circular],

src/Explorer/Panes/StringInputPane/__snapshots__/StringInputPane.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`StringInput Pane should render Create new directory properly 1`] = `
       "isTabsContentExpanded": [Function],
       "onRefreshDatabasesKeyPress": [Function],
       "onRefreshResourcesClick": [Function],
+      "phoenixClient": PhoenixClient {},
       "provideFeedbackEmail": [Function],
       "queriesClient": QueriesClient {
         "container": [Circular],

src/Explorer/Tables/DataTable/DataTableBuilder.ts

@@ -19,7 +19,7 @@ export function createDataTable($dataTableElem: JQuery, settings: any): DataTabl
  * @return The given settings with all columns having a rendering function
  */
 function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
-  var tableColumns: DataTables.ColumnLegacy[] = null;
+  let tableColumns: DataTables.ColumnLegacy[] = null;
 
   if (settings.aoColumns) {
     tableColumns = settings.aoColumns;
@@ -34,7 +34,7 @@ function applyDefaultRendering(settings: any): DataTables.SettingsLegacy {
     return settings;
   }
 
-  for (var i = 0; i < tableColumns.length; i++) {
+  for (let i = 0; i < tableColumns.length; i++) {
     // the column does not have a render function
     if (!tableColumns[i].mRender) {
       tableColumns[i].mRender = defaultDataRender;

src/Explorer/Tree/ResourceTree.tsx

@@ -131,14 +131,14 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       if (myNotebooksContentRoot) {
         notebooksTree.children.push(buildMyNotebooksTree());
       }
-
       if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
         // collapse all other notebook nodes
         notebooksTree.children.forEach((node) => (node.isExpanded = false));
-        notebooksTree.children.push(buildGitHubNotebooksTree());
+        notebooksTree.children.push(buildGitHubNotebooksTree(true));
+      } else if (container.notebookManager && !container.notebookManager.gitHubOAuthService.isLoggedIn()) {
+        notebooksTree.children.push(buildGitHubNotebooksTree(false));
       }
     }
-
     return notebooksTree;
   };
 
@@ -178,7 +178,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
     return myNotebooksTree;
   };
 
-  const buildGitHubNotebooksTree = (): TreeNode => {
+  const buildGitHubNotebooksTree = (isConnected: boolean): TreeNode => {
     const gitHubNotebooksTree: TreeNode = buildNotebookDirectoryNode(
       gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
@@ -190,8 +190,7 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       },
       true
     );
-
-    gitHubNotebooksTree.contextMenu = [
+    const manageGitContextMenu: TreeNodeMenuItem[] = [
       {
         label: "Manage GitHub settings",
         onClick: () =>
@@ -216,7 +215,23 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         },
       },
     ];
-
+    const connectGitContextMenu: TreeNodeMenuItem[] = [
+      {
+        label: "Connect to GitHub",
+        onClick: () =>
+          useSidePanel
+            .getState()
+            .openSidePanel(
+              "Connect to GitHub",
+              <GitHubReposPanel
+                explorer={container}
+                gitHubClientProp={container.notebookManager.gitHubClient}
+                junoClientProp={container.notebookManager.junoClient}
+              />
+            ),
+      },
+    ];
+    gitHubNotebooksTree.contextMenu = isConnected ? manageGitContextMenu : connectGitContextMenu;
     gitHubNotebooksTree.isExpanded = true;
     gitHubNotebooksTree.isAlphaSorted = true;
 

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -45,6 +45,7 @@ import UserDefinedFunction from "./UserDefinedFunction";
 
 export class ResourceTreeAdapter implements ReactAdapter {
   public static readonly MyNotebooksTitle = "My Notebooks";
+  public static readonly MyNotebooksScratchTitle = "My Notebooks Scratch";
   public static readonly GitHubReposTitle = "GitHub repos";
 
   private static readonly DataTitle = "DATA";
@@ -130,9 +131,8 @@ export class ResourceTreeAdapter implements ReactAdapter {
       path: "Gallery",
       type: NotebookContentItemType.File,
     };
-
     this.myNotebooksContentRoot = {
-      name: ResourceTreeAdapter.MyNotebooksTitle,
+      name: useNotebook.getState().NotebookFolderName,
       path: useNotebook.getState().notebookBasePath,
       type: NotebookContentItemType.Directory,
     };
@@ -146,16 +146,11 @@ export class ResourceTreeAdapter implements ReactAdapter {
         })
       );
     }
-
-    if (this.container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
-      this.gitHubNotebooksContentRoot = {
-        name: ResourceTreeAdapter.GitHubReposTitle,
-        path: ResourceTreeAdapter.PseudoDirPath,
-        type: NotebookContentItemType.Directory,
-      };
-    } else {
-      this.gitHubNotebooksContentRoot = undefined;
-    }
+    this.gitHubNotebooksContentRoot = {
+      name: ResourceTreeAdapter.GitHubReposTitle,
+      path: ResourceTreeAdapter.PseudoDirPath,
+      type: NotebookContentItemType.Directory,
+    };
 
     return Promise.all(refreshTasks);
   }

src/Main.tsx

@@ -37,6 +37,7 @@ import "./Explorer/Controls/TreeComponent/treeComponent.less";
 import "./Explorer/Graph/GraphExplorerComponent/graphExplorer.less";
 import "./Explorer/Menus/CommandBar/CommandBarComponent.less";
 import { CommandBar } from "./Explorer/Menus/CommandBar/CommandBarComponentAdapter";
+import "./Explorer/Menus/CommandBar/ConnectionStatusComponent.less";
 import "./Explorer/Menus/CommandBar/MemoryTrackerComponent.less";
 import "./Explorer/Menus/NotificationConsole/NotificationConsole.less";
 import { NotificationConsole } from "./Explorer/Menus/NotificationConsole/NotificationConsoleComponent";

src/Phoenix/PhoenixClient.ts

@@ -0,0 +1,70 @@
+import { ConnectionStatusType, HttpHeaders, HttpStatusCodes } from "../Common/Constants";
+import { configContext } from "../ConfigContext";
+import * as DataModels from "../Contracts/DataModels";
+import { useNotebook } from "../Explorer/Notebook/useNotebook";
+import { userContext } from "../UserContext";
+import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
+
+export interface IPhoenixResponse<T> {
+  status: number;
+  data: T;
+}
+export interface IPhoenixConnectionInfoResult {
+  readonly notebookAuthToken?: string;
+  readonly notebookServerUrl?: string;
+}
+export interface IProvosionData {
+  cosmosEndpoint: string;
+  resourceId: string;
+  dbAccountName: string;
+  aadToken: string;
+  resourceGroup: string;
+  subscriptionId: string;
+}
+export class PhoenixClient {
+  public async containerConnectionInfo(
+    provisionData: IProvosionData
+  ): Promise<IPhoenixResponse<IPhoenixConnectionInfoResult>> {
+    const response = await window.fetch(`${this.getPhoenixContainerPoolingEndPoint()}/provision`, {
+      method: "POST",
+      headers: PhoenixClient.getHeaders(),
+      body: JSON.stringify(provisionData),
+    });
+    let data: IPhoenixConnectionInfoResult;
+    if (response.status === HttpStatusCodes.OK) {
+      data = await response.json();
+    } else {
+      const connectionStatus: DataModels.ContainerConnectionInfo = {
+        status: ConnectionStatusType.Failed,
+      };
+      useNotebook.getState().setConnectionInfo(connectionStatus);
+    }
+
+    return {
+      status: response.status,
+      data,
+    };
+  }
+
+  public static getPhoenixEndpoint(): string {
+    const phoenixEndpoint = userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
+    if (configContext.allowedJunoOrigins.indexOf(new URL(phoenixEndpoint).origin) === -1) {
+      const error = `${phoenixEndpoint} not allowed as juno endpoint`;
+      console.error(error);
+      throw new Error(error);
+    }
+
+    return phoenixEndpoint;
+  }
+
+  public getPhoenixContainerPoolingEndPoint(): string {
+    return `${PhoenixClient.getPhoenixEndpoint()}/api/containerpooling`;
+  }
+  private static getHeaders(): HeadersInit {
+    const authorizationHeader = getAuthorizationHeader();
+    return {
+      [authorizationHeader.header]: authorizationHeader.token,
+      [HttpHeaders.contentType]: "application/json",
+    };
+  }
+}

src/Platform/Hosted/extractFeatures.ts

@@ -11,6 +11,7 @@ export type Features = {
   autoscaleDefault: boolean;
   partitionKeyDefault: boolean;
   partitionKeyDefault2: boolean;
+  phoenix: boolean;
   readonly enableSDKoperations: boolean;
   readonly enableSpark: boolean;
   readonly enableTtl: boolean;
@@ -76,5 +77,6 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     partitionKeyDefault: "true" === get("partitionkeytest"),
     partitionKeyDefault2: "true" === get("pkpartitionkeytest"),
     notebooksTemporarilyDown: "true" === get("notebookstemporarilydown", "true"),
+    phoenix: "true" === get("phoenix"),
   };
 }

src/Utils/GalleryUtils.ts

@@ -10,6 +10,7 @@ import {
   SortBy,
 } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer/Explorer";
+import { useNotebook } from "../Explorer/Notebook/useNotebook";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
 import { trace, traceFailure, traceStart, traceSuccess } from "../Shared/Telemetry/TelemetryProcessor";
@@ -223,11 +224,13 @@ export function downloadItem(
 
   const name = data.name;
   useDialog.getState().showOkCancelModalDialog(
-    "Download to My Notebooks",
+    `Download to ${useNotebook.getState().NotebookFolderName}`,
     `Download ${name} from gallery as a copy to your notebooks to run and/or edit the notebook.`,
     "Download",
     async () => {
-      const clearInProgressMessage = logConsoleProgress(`Downloading ${name} to My Notebooks`);
+      const clearInProgressMessage = logConsoleProgress(
+        `Downloading ${name} to ${useNotebook.getState().NotebookFolderName}`
+      );
       const startKey = traceStart(Action.NotebooksGalleryDownload, {
         notebookId: data.id,
         downloadCount: data.downloads,

src/hooks/useAADAuth.ts

@@ -56,6 +56,7 @@ export function useAADAuth(): ReturnType {
       });
       setTenantId(response.tenantId);
       setAccount(response.account);
+      localStorage.setItem("cachedTenantId", response.tenantId);
     },
     [account, tenantId]
   );

src/hooks/useKnockoutExplorer.ts

@@ -98,9 +98,11 @@ async function configureHostedWithAAD(config: AAD): Promise<Explorer> {
     const msalInstance = getMsalInstance();
     const cachedAccount = msalInstance.getAllAccounts()?.[0];
     msalInstance.setActiveAccount(cachedAccount);
+    const cachedTenantId = localStorage.getItem("cachedTenantId");
     const aadTokenResponse = await msalInstance.acquireTokenSilent({
       forceRefresh: true,
       scopes: [hrefEndpoint],
+      authority: `${configContext.AAD_ENDPOINT}${cachedTenantId}`,
     });
     aadToken = aadTokenResponse.accessToken;
   }
@@ -337,6 +339,9 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     if (inputs.flights.indexOf(Flights.PKPartitionKeyTest) !== -1) {
       userContext.features.partitionKeyDefault2 = true;
     }
+    if (inputs.flights.indexOf(Flights.Phoenix) !== -1) {
+      userContext.features.phoenix = true;
+    }
   }
 }