fixed eslint issue of loadtransform Notebook and EntityProperty etc files

* mock to instance

* Update jest.config.js

Co-authored-by: Jordi Bunster <jbunster@microsoft.com>

.eslintignore

@@ -58,23 +58,15 @@ src/Explorer/Graph/GraphExplorerComponent/GremlinSimpleClient.ts
 src/Explorer/Menus/ContextMenu.ts
 src/Explorer/MostRecentActivity/MostRecentActivity.ts
 src/Explorer/Notebook/NotebookClientV2.ts
-src/Explorer/Notebook/NotebookComponent/NotebookContentProvider.ts
-src/Explorer/Notebook/NotebookComponent/__mocks__/rx-jupyter.ts
 src/Explorer/Notebook/NotebookComponent/actions.ts
 src/Explorer/Notebook/NotebookComponent/epics.test.ts
 src/Explorer/Notebook/NotebookComponent/epics.ts
-src/Explorer/Notebook/NotebookComponent/loadTransform.ts
 src/Explorer/Notebook/NotebookComponent/reducers.ts
 src/Explorer/Notebook/NotebookComponent/store.ts
 src/Explorer/Notebook/NotebookComponent/types.ts
-src/Explorer/Notebook/NotebookContainerClient.ts
 src/Explorer/Notebook/NotebookContentClient.ts
-src/Explorer/Notebook/NotebookContentItem.ts
 src/Explorer/Notebook/NotebookUtil.ts
 src/Explorer/OpenActionsStubs.ts
-src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts
-src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts
-src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts
 src/Explorer/SplashScreen/SplashScreen.test.ts
 src/Explorer/Tables/DataTable/CacheBase.ts
 src/Explorer/Tables/DataTable/DataTableBindingManager.ts

__mocks__/monaco-editor.ts

@@ -1,4 +1,4 @@
 export const editor = {
-  create: () => {},
-  setTheme: () => {}
+  create: () => { },
+  setTheme: () => { }
 };

jest.config.js

@@ -37,8 +37,8 @@ module.exports = {
     global: {
       branches: 25,
       functions: 25,
-      lines: 29.5,
-      statements: 29.5,
+      lines: 29,
+      statements: 29,
     },
   },
 

src/Common/Constants.ts

@@ -339,9 +339,11 @@ export enum ConflictOperationType {
 }
 
 export enum ConnectionStatusType {
+  Connect = "Connect",
   Connecting = "Connecting",
   Connected = "Connected",
   Failed = "Connection Failed",
+  ReConnect = "Reconnect",
 }
 
 export const EmulatorMasterKey =
@@ -353,15 +355,32 @@ export const StyleConstants = require("less-vars-loader!../../less/Common/Consta
 
 export class Notebook {
   public static readonly defaultBasePath = "./notebooks";
-  public static readonly heartbeatDelayMs = 5000;
+  public static readonly heartbeatDelayMs = 60000;
   public static readonly kernelRestartInitialDelayMs = 1000;
   public static readonly kernelRestartMaxDelayMs = 20000;
   public static readonly autoSaveIntervalMs = 120000;
+  public static readonly memoryGuageToGB = 1048576;
   public static readonly temporarilyDownMsg = "Notebooks is currently not available. We are working on it.";
   public static readonly mongoShellTemporarilyDownMsg =
     "We have identified an issue with the Mongo Shell and it is unavailable right now. We are actively working on the mitigation.";
   public static readonly cassandraShellTemporarilyDownMsg =
     "We have identified an issue with the Cassandra Shell and it is unavailable right now. We are actively working on the mitigation.";
+  public static saveNotebookModalTitle = "Save Notebook in temporary workspace";
+  public static saveNotebookModalContent =
+    "This notebook will be saved in the temporary workspace and will be removed when the session expires. To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends.";
+  public static newNotebookModalTitle = "Create Notebook in temporary workspace";
+  public static newNotebookUploadModalTitle = "Upload Notebook in temporary workspace";
+  public static newNotebookModalContent1 =
+    "A temporary workspace will be created to enable you to work with notebooks. When the session expires, any notebooks in the workspace will be removed.";
+  public static newNotebookModalContent2 =
+    "To save your work permanently, save your notebooks to a GitHub repository or download the notebooks to your local machine before the session ends. ";
+  public static galleryNotebookDownloadContent1 =
+    "To download, run, and make changes to this sample notebook, a temporary workspace will be created. When the session expires, any notebooks in the workspace will be removed.";
+  public static galleryNotebookDownloadContent2 =
+    "To save your work permanently, save your notebooks to a GitHub repository or download the Notebooks to your local machine before the session ends. ";
+  public static cosmosNotebookHomePageUrl = "https://aka.ms/cosmos-notebooks-limits";
+  public static cosmosNotebookGitDocumentationUrl = "https://aka.ms/cosmos-notebooks-github";
+  public static learnMore = "Learn more.";
 }
 
 export class SparkLibrary {

src/Explorer/Controls/Dialog.tsx

@@ -13,6 +13,7 @@ import {
   Link,
   PrimaryButton,
   ProgressIndicator,
+  Text,
   TextField,
 } from "@fluentui/react";
 import React, { FC } from "react";
@@ -30,6 +31,7 @@ export interface DialogState {
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -58,6 +60,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
     onOk: () => void,
     cancelLabel: string,
     onCancel: () => void,
+    contentHtml?: JSX.Element,
     choiceGroupProps?: IChoiceGroupProps,
     textFieldProps?: TextFieldProps,
     primaryButtonDisabled?: boolean
@@ -76,6 +79,7 @@ export const useDialog: UseStore<DialogState> = create((set, get) => ({
         get().closeDialog();
         onCancel && onCancel();
       },
+      contentHtml,
       choiceGroupProps,
       textFieldProps,
       primaryButtonDisabled,
@@ -124,6 +128,7 @@ export interface DialogProps {
   type?: DialogType;
   showCloseButton?: boolean;
   onDismiss?: () => void;
+  contentHtml?: JSX.Element;
 }
 
 const DIALOG_MIN_WIDTH = "400px";
@@ -150,6 +155,7 @@ export const Dialog: FC = () => {
     type,
     showCloseButton,
     onDismiss,
+    contentHtml,
   } = props || {};
 
   const dialogProps: IDialogProps = {
@@ -191,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/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/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -88,18 +88,16 @@ export class IndexingPolicyComponent extends React.Component<
   private async createIndexingPolicyEditor(): Promise<void> {
     const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
     const monaco = await loadMonaco();
-    if (monaco.editor) {
-      this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
-        value: value,
-        language: "json",
-        readOnly: isIndexTransforming(this.props.indexTransformationProgress),
-        ariaLabel: "Indexing Policy",
-      });
-      if (this.indexingPolicyEditor) {
-        const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
-        indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
-        this.props.logIndexingPolicySuccessMessage();
-      }
+    this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
+      value: value,
+      language: "json",
+      readOnly: isIndexTransforming(this.props.indexTransformationProgress),
+      ariaLabel: "Indexing Policy",
+    });
+    if (this.indexingPolicyEditor) {
+      const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
+      indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
+      this.props.logIndexingPolicySuccessMessage();
     }
   }
 

src/Explorer/Explorer.tsx

@@ -1,9 +1,11 @@
+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";
@@ -11,6 +13,7 @@ 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";
@@ -163,23 +166,10 @@ export default class Explorer {
 
     useNotebook.subscribe(
       async () => {
-        if (!this.notebookManager) {
-          const NotebookManager = await (
-            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();
+        this.initiateAndRefreshNotebookList();
+        useNotebook.getState().setIsRefreshed(false);
       },
-      (state) => state.isNotebookEnabled
+      (state) => state.isNotebookEnabled || state.isRefreshed
     );
 
     this.resourceTree = new ResourceTreeAdapter(this);
@@ -212,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: {
@@ -345,23 +352,7 @@ export default class Explorer {
       return;
     }
     this._isInitializingNotebooks = true;
-    if (userContext.features.phoenix) {
-      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) {
-        useNotebook.getState().setNotebookServerInfo({
-          notebookServerEndpoint: userContext.features.notebookServerUrl || connectionInfo.data.notebookServerUrl,
-          authToken: userContext.features.notebookServerToken || connectionInfo.data.notebookAuthToken,
-        });
-      }
-    } else {
+    if (userContext.features.phoenix === false) {
       await this.ensureNotebookWorkspaceRunning();
       const connectionInfo = await listConnectionInfo(
         userContext.subscriptionId,
@@ -376,13 +367,59 @@ export default class Explorer {
       });
     }
 
-    useNotebook.getState().initializeNotebooksTree(this.notebookManager);
-
     this.refreshNotebookList();
 
     this._isInitializingNotebooks = false;
   }
 
+  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(
@@ -654,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()
@@ -875,9 +915,51 @@ export default class Explorer {
       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);
+    }
+  }
 
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
+  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,
@@ -924,7 +1006,26 @@ export default class Explorer {
     await this.notebookManager?.notebookContentClient.updateItemChildrenInPlace(item);
   }
 
-  public openNotebookTerminal(kind: ViewModels.TerminalKind): void {
+  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) {
@@ -975,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
@@ -1079,7 +1180,27 @@ export default class Explorer {
   }
 
   public openUploadFilePanel(parent?: NotebookContentItem): void {
-    parent = parent || this.resourceTree.myNotebooksContentRoot;
+    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(
@@ -1088,6 +1209,24 @@ 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()

src/Explorer/Graph/GraphExplorerComponent/D3ForceGraph.test.ts

@@ -138,19 +138,17 @@ describe("D3ForceGraph", () => {
 
     it("should call onHighlightedNode callback when mouse hovering over node", () => {
       forceGraph.params.onGraphUpdated = () => {
-        if (document) {
-          const mouseoverEvent = document.createEvent("Events");
-          mouseoverEvent.initEvent("mouseover", true, false);
-          $(rootNode).find(".node")[0].dispatchEvent(mouseoverEvent); // [0] is v1 vertex
+        const mouseoverEvent = document.createEvent("Events");
+        mouseoverEvent.initEvent("mouseover", true, false);
+        $(rootNode).find(".node")[0].dispatchEvent(mouseoverEvent); // [0] is v1 vertex
+        expect($(rootNode).find(".node")[0]).toBe(1);
 
-          // onHighlightedNode is always called once to clear the selection
-          expect((forceGraph.params.onHighlightedNode as sinon.SinonSpy).calledTwice).toBe(true);
+        // onHighlightedNode is always called once to clear the selection
+        expect((forceGraph.params.onHighlightedNode as sinon.SinonSpy).calledTwice).toBe(true);
 
-          const onHighlightedNode = (forceGraph.params.onHighlightedNode as sinon.SinonSpy)
-            .args[1][0] as D3GraphNodeData;
-          expect(onHighlightedNode).not.toBe(null);
-          expect(onHighlightedNode.id).toEqual(v1Id);
-        }
+        const onHighlightedNode = (forceGraph.params.onHighlightedNode as sinon.SinonSpy).args[1][0] as D3GraphNodeData;
+        expect(onHighlightedNode).not.toBe(null);
+        expect(onHighlightedNode.id).toEqual(v1Id);
       };
 
       forceGraph.updateGraph(newGraph, forceGraph.igraphConfig);

src/Explorer/Graph/GraphExplorerComponent/GraphExplorer.tsx

@@ -1084,6 +1084,7 @@ export class GraphExplorer extends React.Component<GraphExplorerProps, GraphExpl
   public static reportToConsole(type: ConsoleDataType, msg: string, ...errorData: any[]): void | (() => void) {
     let errorDataStr: string = "";
     if (errorData && errorData.length > 0) {
+      console.error(msg, errorData);
       errorDataStr = ": " + JSON.stringify(errorData);
     }
 

src/Explorer/Graph/GraphExplorerComponent/MiddlePaneComponent.tsx

@@ -22,7 +22,7 @@ export class MiddlePaneComponent extends React.Component<MiddlePaneComponentProp
             onClick={this.props.toggleExpandGraph}
             role="button"
             aria-expanded={this.props.isTabsContentExpanded}
-            aria-label="View graph in full screen"
+            aria-name="View graph in full screen"
             tabIndex={0}
           >
             <img

src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx

@@ -12,6 +12,7 @@ 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";
@@ -55,15 +56,15 @@ export const CommandBar: React.FC<Props> = ({ container }: Props) => {
   const uiFabricControlButtons = CommandBarUtil.convertButton(controlButtons, backgroundColor);
   uiFabricControlButtons.forEach((btn: ICommandBarItemProps) => (btn.iconOnly = true));
 
-  if (
-    userContext.features.notebooksTemporarilyDown === false &&
-    userContext.features.phoenix === true &&
-    useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2
-  ) {
-    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus("connectionStatus"));
+  if (NotebookUtil.isPhoenixEnabled()) {
+    uiFabricControlButtons.unshift(CommandBarUtil.createConnectionStatus(container, "connectionStatus"));
   }
 
-  if (useTabs.getState().activeTab?.tabKind === ViewModels.CollectionTabKind.NotebookV2) {
+  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.tsx

@@ -596,7 +596,7 @@ function createManageGitHubAccountButton(container: Explorer): CommandButtonComp
   return {
     iconSrc: GitHubIcon,
     iconAlt: label,
-    onCommandClick: () =>
+    onCommandClick: () => {
       useSidePanel
         .getState()
         .openSidePanel(
@@ -606,7 +606,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,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 Explorer from "../../Explorer";
 import { ConnectionStatus } from "./ConnectionStatusComponent";
 import { MemoryTracker } from "./MemoryTrackerComponent";
 
@@ -203,9 +204,9 @@ export const createMemoryTracker = (key: string): ICommandBarItemProps => {
   };
 };
 
-export const createConnectionStatus = (key: string): ICommandBarItemProps => {
+export const createConnectionStatus = (container: Explorer, key: string): ICommandBarItemProps => {
   return {
     key,
-    onRender: () => <ConnectionStatus />,
+    onRender: () => <ConnectionStatus container={container} />,
   };
 };

src/Explorer/Menus/CommandBar/ConnectionStatusComponent.less

@@ -3,77 +3,182 @@
 .connectionStatusContainer {
     cursor: default;
     align-items: center;
-    margin: 0 9px;
     border: 1px;
     min-height: 44px;
 
     > span {
         padding-right: 12px;
-        font-size: 13px;
+        font-size: 12px;
         font-family: @DataExplorerFont;
         color: @DefaultFontColor;
     }
+    &:focus{
+        outline: 0px;
+    }
 }
-.connectionStatusFailed{
-    color: #bd1919;
+.commandReactBtn {
+    &:hover {
+        background-color: rgb(238, 247, 255);
+        color: rgb(32, 31, 30);
+        cursor: pointer;
+    }
+    &:focus{
+        outline: 1px dashed #605e5c;
+    }
 }
-.ring-container {
+.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;
-}
-
-.ringringGreen {
-    border: 3px solid green;
-    border-radius: 30px;
-    height: 18px;
-    width: 18px;
+    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;
-    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;
-}
+    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

@@ -1,17 +1,21 @@
 import { Icon, ProgressIndicator, Stack, TooltipHost } from "@fluentui/react";
+import { ActionButton } from "@fluentui/react/lib/Button";
 import * as React from "react";
-import { ConnectionStatusType } from "../../../Common/Constants";
+import "../../../../less/hostedexplorer.less";
+import { ConnectionStatusType, Notebook } from "../../../Common/Constants";
+import Explorer from "../../Explorer";
 import { useNotebook } from "../../Notebook/useNotebook";
 import "../CommandBar/ConnectionStatusComponent.less";
-
-export const ConnectionStatus: React.FC = (): JSX.Element => {
+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("locationYellowDot");
-  const [statusColorAnimation, setStatusColorAnimation] = React.useState("ringringYellow");
-  const toolTipContent = "Hosted runtime status.";
+  const [statusColor, setStatusColor] = React.useState("");
+  const [toolTipContent, setToolTipContent] = React.useState("Connect to temporary workspace.");
   React.useEffect(() => {
     let intervalId: NodeJS.Timeout;
 
@@ -39,34 +43,65 @@ export const ConnectionStatus: React.FC = (): JSX.Element => {
   };
 
   const connectionInfo = useNotebook((state) => state.connectionInfo);
-  if (!connectionInfo) {
-    return <></>;
+  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("locationGreenDot");
-    setStatusColorAnimation("ringringGreen");
+    setStatusColor("status connected is-animating");
+    setToolTipContent("Connected to temporary workspace.");
   } else if (connectionInfo && connectionInfo.status === ConnectionStatusType.Failed && isActive === true) {
     stopTimer();
-    setStatusColor("locationRedDot");
-    setStatusColorAnimation("ringringRed");
+    setStatusColor("status failed is-animating");
+    setToolTipContent("Click here to Reconnect to temporary workspace.");
   }
   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.Connecting && isActive && (
-          <ProgressIndicator description={minute + ":" + second} />
-        )}
-      </Stack>
-    </TooltipHost>
+    <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/Notebook/NotebookComponent/loadTransform.ts

@@ -1,7 +1,7 @@
 // This replicates transform loading from:
 // https://github.com/nteract/nteract/blob/master/applications/jupyter-extension/nteract_on_jupyter/app/contents/notebook.tsx
 
-export default (props: { addTransform: (component: any) => void }) => {
+export default (props: { addTransform: (component: unknown) => void }): void => {
   import(/* webpackChunkName: "plotly" */ "@nteract/transform-plotly").then((module) => {
     props.addTransform(module.default);
     props.addTransform(module.PlotlyNullTransform);

src/Explorer/Notebook/NotebookContainerClient.ts

@@ -2,15 +2,19 @@
  * 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 {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   private clearReconnectionAttemptMessage? = () => {};
   private isResettingWorkspace: boolean;
 
@@ -42,7 +46,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";
@@ -75,6 +79,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 +94,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/NotebookManager.tsx

@@ -78,7 +78,7 @@ export default class NotebookManager {
     this.notebookContentProvider = new NotebookContentProvider(
       this.inMemoryContentProvider,
       this.gitHubContentProvider,
-      contents?.JupyterContentProvider
+      contents.JupyterContentProvider
     );
 
     this.notebookClient = new NotebookContainerClient(() =>
@@ -212,6 +212,7 @@ export default class NotebookManager {
         "Cancel",
         () => reject(new Error("Commit dialog canceled")),
         undefined,
+        undefined,
         {
           label: "Commit message",
           autoAdjustHeight: true,

src/Explorer/Notebook/NotebookUtil.ts

@@ -3,6 +3,7 @@ import { AppState, selectors } from "@nteract/core";
 import domtoimage from "dom-to-image";
 import Html2Canvas from "html2canvas";
 import path from "path";
+import { userContext } from "../../UserContext";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import * as StringUtils from "../../Utils/StringUtils";
 import { SnapshotFragment } from "./NotebookComponent/types";
@@ -328,4 +329,16 @@ export class NotebookUtil {
     link.click();
     document.body.removeChild(link);
   }
+
+  public static getNotebookBtnTitle(fileName: string): string {
+    if (this.isPhoenixEnabled()) {
+      return `Download to ${fileName}`;
+    } else {
+      return `Download to my notebooks`;
+    }
+  }
+
+  public static isPhoenixEnabled(): boolean {
+    return userContext.features.notebooksTemporarilyDown === false && userContext.features.phoenix === true;
+  }
 }

src/Explorer/Notebook/useNotebook.ts

@@ -2,10 +2,12 @@ import { cloneDeep } from "lodash";
 import create, { UseStore } from "zustand";
 import { AuthType } from "../../AuthType";
 import * as Constants from "../../Common/Constants";
+import { ConnectionStatusType } from "../../Common/Constants";
 import { getErrorMessage } from "../../Common/ErrorHandlingUtils";
 import * as Logger from "../../Common/Logger";
 import { configContext } from "../../ConfigContext";
 import * as DataModels from "../../Contracts/DataModels";
+import { ContainerConnectionInfo } from "../../Contracts/DataModels";
 import { IPinnedRepo } from "../../Juno/JunoClient";
 import { Action, ActionModifiers } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
@@ -14,6 +16,7 @@ import { getAuthorizationHeader } from "../../Utils/AuthorizationUtils";
 import * as GitHubUtils from "../../Utils/GitHubUtils";
 import { NotebookContentItem, NotebookContentItemType } from "./NotebookContentItem";
 import NotebookManager from "./NotebookManager";
+import { NotebookUtil } from "./NotebookUtil";
 
 interface NotebookState {
   isNotebookEnabled: boolean;
@@ -28,8 +31,10 @@ interface NotebookState {
   myNotebooksContentRoot: NotebookContentItem;
   gitHubNotebooksContentRoot: NotebookContentItem;
   galleryContentRoot: NotebookContentItem;
-  connectionInfo: DataModels.ContainerConnectionInfo;
+  connectionInfo: ContainerConnectionInfo;
   notebookFolderName: string;
+  isAllocating: boolean;
+  isRefreshed: boolean;
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => void;
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => void;
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) => void;
@@ -46,7 +51,10 @@ interface NotebookState {
   deleteNotebookItem: (item: NotebookContentItem, isGithubTree?: boolean) => void;
   initializeNotebooksTree: (notebookManager: NotebookManager) => Promise<void>;
   initializeGitHubRepos: (pinnedRepos: IPinnedRepo[]) => void;
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => void;
+  setConnectionInfo: (connectionInfo: ContainerConnectionInfo) => void;
+  setIsAllocating: (isAllocating: boolean) => void;
+  resetConatinerConnection: (connectionStatus: ContainerConnectionInfo) => void;
+  setIsRefreshed: (isAllocating: boolean) => void;
 }
 
 export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
@@ -69,8 +77,12 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
   myNotebooksContentRoot: undefined,
   gitHubNotebooksContentRoot: undefined,
   galleryContentRoot: undefined,
-  connectionInfo: undefined,
+  connectionInfo: {
+    status: ConnectionStatusType.Connect,
+  },
   notebookFolderName: undefined,
+  isAllocating: false,
+  isRefreshed: false,
   setIsNotebookEnabled: (isNotebookEnabled: boolean) => set({ isNotebookEnabled }),
   setIsNotebooksEnabledForAccount: (isNotebooksEnabledForAccount: boolean) => set({ isNotebooksEnabledForAccount }),
   setNotebookServerInfo: (notebookServerInfo: DataModels.NotebookWorkspaceConnectionInfo) =>
@@ -175,7 +187,7 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
     isGithubTree ? set({ gitHubNotebooksContentRoot: root }) : set({ myNotebooksContentRoot: root });
   },
   initializeNotebooksTree: async (notebookManager: NotebookManager): Promise<void> => {
-    const notebookFolderName = userContext.features.phoenix === true ? "Temporary Notebooks" : "My Notebooks";
+    const notebookFolderName = NotebookUtil.isPhoenixEnabled() === true ? "Temporary Notebooks" : "My Notebooks";
     set({ notebookFolderName });
     const myNotebooksContentRoot = {
       name: get().notebookFolderName,
@@ -256,5 +268,15 @@ export const useNotebook: UseStore<NotebookState> = create((set, get) => ({
       set({ gitHubNotebooksContentRoot });
     }
   },
-  setConnectionInfo: (connectionInfo: DataModels.ContainerConnectionInfo) => set({ connectionInfo }),
+  setConnectionInfo: (connectionInfo: ContainerConnectionInfo) => set({ connectionInfo }),
+  setIsAllocating: (isAllocating: boolean) => set({ isAllocating }),
+  resetConatinerConnection: (connectionStatus: ContainerConnectionInfo): void => {
+    useNotebook.getState().setConnectionInfo(connectionStatus);
+    useNotebook.getState().setNotebookServerInfo({
+      notebookServerEndpoint: undefined,
+      authToken: undefined,
+    });
+    useNotebook.getState().setIsAllocating(false);
+  },
+  setIsRefreshed: (isRefreshed: boolean) => set({ isRefreshed }),
 }));

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -77,7 +77,7 @@ export const CopyNotebookPane: FunctionComponent<CopyNotebookPanelProps> = ({
           selectedLocation.repo
         )} - ${selectedLocation.branch}`;
       } else if (selectedLocation.type === "MyNotebooks" && userContext.features.phoenix) {
-        destination = "My Notebooks Scratch";
+        destination = useNotebook.getState().notebookFolderName;
       }
 
       clearMessage = NotificationConsoleUtils.logConsoleProgress(`Copying ${name} to ${destination}`);

src/Explorer/Panes/Tables/Validators/EntityPropertyNameValidator.ts

@@ -1,7 +1,7 @@
 /* Constants */
-var MaximumNameLength = 255;
-var noHelp = "";
-var detailedHelp = "Enter a name up to 255 characters in size. Most valid C# identifiers are allowed."; // localize
+const MaximumNameLength = 255;
+const noHelp = "";
+const detailedHelp = "Enter a name up to 255 characters in size. Most valid C# identifiers are allowed."; // localize
 
 export interface IValidationResult {
   isInvalid: boolean;
@@ -9,13 +9,13 @@ export interface IValidationResult {
 }
 
 export function validate(name: string): IValidationResult {
-  var help: string = noHelp;
+  let help: string = noHelp;
   // Note: Disabling encoding check to err the side of lax validation.
   // A valid property name should also be XML-serializable.
   // Hence, only allowing names that don't require special encoding for network transmission.
   // var encoded: string = tryEncode(name);
   // var success: boolean = (name === encoded);
-  var success: boolean = true;
+  let success = true;
 
   if (success) {
     success = name.length <= MaximumNameLength;
@@ -208,7 +208,7 @@ function IsValidLanguageIndependentIdentifier(value: string): boolean {
   return IsValidTypeNameOrIdentifier(value, /* isTypeName */ false);
 }
 
-var UnicodeCategory = {
+const UnicodeCategory = {
   // Uppercase Letter
   Lu: /[A-ZÀ-ÖØ-ÞĀĂĄĆĈĊČĎĐĒĔĖĘĚĜĞĠĢĤĦĨĪĬĮİIJĴĶĹĻĽĿŁŃŅŇŊŌŎŐŒŔŖŘŚŜŞŠŢŤŦŨŪŬŮŰŲŴŶŸ-ŹŻŽƁ-ƂƄƆ-ƇƉ-ƋƎ-ƑƓ-ƔƖ-ƘƜ-ƝƟ-ƠƢƤƦ-ƧƩƬƮ-ƯƱ-ƳƵƷ-ƸƼDŽLJNJǍǏǑǓǕǗǙǛǞǠǢǤǦǨǪǬǮDZǴǶ-ǸǺǼǾȀȂȄȆȈȊȌȎȐȒȔȖȘȚȜȞȠȢȤȦȨȪȬȮȰȲȺ-ȻȽ-ȾɁɃ-ɆɈɊɌɎͰͲͶΆΈ-ΊΌΎ-ΏΑ-ΡΣ-ΫϏϒ-ϔϘϚϜϞϠϢϤϦϨϪϬϮϴϷϹ-ϺϽ-ЯѠѢѤѦѨѪѬѮѰѲѴѶѸѺѼѾҀҊҌҎҐҒҔҖҘҚҜҞҠҢҤҦҨҪҬҮҰҲҴҶҸҺҼҾӀ-ӁӃӅӇӉӋӍӐӒӔӖӘӚӜӞӠӢӤӦӨӪӬӮӰӲӴӶӸӺӼӾԀԂԄԆԈԊԌԎԐԒԔԖԘԚԜԞԠԢԱ-ՖႠ-ჅḀḂḄḆḈḊḌḎḐḒḔḖḘḚḜḞḠḢḤḦḨḪḬḮḰḲḴḶḸḺḼḾṀṂṄṆṈṊṌṎṐṒṔṖṘṚṜṞṠṢṤṦṨṪṬṮṰṲṴṶṸṺṼṾẀẂẄẆẈẊẌẎẐẒẔẞẠẢẤẦẨẪẬẮẰẲẴẶẸẺẼẾỀỂỄỆỈỊỌỎỐỒỔỖỘỚỜỞỠỢỤỦỨỪỬỮỰỲỴỶỸỺỼỾἈ-ἏἘ-ἝἨ-ἯἸ-ἿὈ-ὍὙὛὝὟὨ-ὯᾸ-ΆῈ-ΉῘ-ΊῨ-ῬῸ-Ώℂℇℋ-ℍℐ-ℒℕℙ-ℝℤΩℨK-ℭℰ-ℳℾ-ℿⅅↃⰀ-ⰮⱠⱢ-ⱤⱧⱩⱫⱭ-ⱯⱲⱵⲀⲂⲄⲆⲈⲊⲌⲎⲐⲒⲔⲖⲘⲚⲜⲞⲠⲢⲤⲦⲨⲪⲬⲮⲰⲲⲴⲶⲸⲺⲼⲾⳀⳂⳄⳆⳈⳊⳌⳎⳐⳒⳔⳖⳘⳚⳜⳞⳠⳢꙀꙂꙄꙆꙈꙊꙌꙎꙐꙒꙔꙖꙘꙚꙜꙞꙢꙤꙦꙨꙪꙬꚀꚂꚄꚆꚈꚊꚌꚎꚐꚒꚔꚖꜢꜤꜦꜨꜪꜬꜮꜲꜴꜶꜸꜺꜼꜾꝀꝂꝄꝆꝈꝊꝌꝎꝐꝒꝔꝖꝘꝚꝜꝞꝠꝢꝤꝦꝨꝪꝬꝮꝹꝻꝽ-ꝾꞀꞂꞄꞆꞋＡ-Ｚ]|\ud801[\udc00-\udc27]|\ud835[\udc00-\udc19\udc34-\udc4d\udc68-\udc81\udc9c\udc9e-\udc9f\udca2\udca5-\udca6\udca9-\udcac\udcae-\udcb5\udcd0-\udce9\udd04-\udd05\udd07-\udd0a\udd0d-\udd14\udd16-\udd1c\udd38-\udd39\udd3b-\udd3e\udd40-\udd44\udd46\udd4a-\udd50\udd6c-\udd85\udda0-\uddb9\uddd4-\udded\ude08-\ude21\ude3c-\ude55\ude70-\ude89\udea8-\udec0\udee2-\udefa\udf1c-\udf34\udf56-\udf6e\udf90-\udfa8\udfca]/,
   // Lowercase Letter
@@ -222,6 +222,7 @@ var UnicodeCategory = {
   // Non Spacing Mark
   Mn: /[\u0300-\u036f\u0483-\u0487\u0591-\u05bd\u05bf\u05c1-\u05c2\u05c4-\u05c5\u05c7\u0610-\u061a\u064b-\u065e\u0670\u06d6-\u06dc\u06df-\u06e4\u06e7-\u06e8\u06ea-\u06ed\u0711\u0730-\u074a\u07a6-\u07b0\u07eb-\u07f3\u0901-\u0902\u093c\u0941-\u0948\u094d\u0951-\u0954\u0962-\u0963\u0981\u09bc\u09c1-\u09c4\u09cd\u09e2-\u09e3\u0a01-\u0a02\u0a3c\u0a41-\u0a42\u0a47-\u0a48\u0a4b-\u0a4d\u0a51\u0a70-\u0a71\u0a75\u0a81-\u0a82\u0abc\u0ac1-\u0ac5\u0ac7-\u0ac8\u0acd\u0ae2-\u0ae3\u0b01\u0b3c\u0b3f\u0b41-\u0b44\u0b4d\u0b56\u0b62-\u0b63\u0b82\u0bc0\u0bcd\u0c3e-\u0c40\u0c46-\u0c48\u0c4a-\u0c4d\u0c55-\u0c56\u0c62-\u0c63\u0cbc\u0cbf\u0cc6\u0ccc-\u0ccd\u0ce2-\u0ce3\u0d41-\u0d44\u0d4d\u0d62-\u0d63\u0dca\u0dd2-\u0dd4\u0dd6\u0e31\u0e34-\u0e3a\u0e47-\u0e4e\u0eb1\u0eb4-\u0eb9\u0ebb-\u0ebc\u0ec8-\u0ecd\u0f18-\u0f19\u0f35\u0f37\u0f39\u0f71-\u0f7e\u0f80-\u0f84\u0f86-\u0f87\u0f90-\u0f97\u0f99-\u0fbc\u0fc6\u102d-\u1030\u1032-\u1037\u1039-\u103a\u103d-\u103e\u1058-\u1059\u105e-\u1060\u1071-\u1074\u1082\u1085-\u1086\u108d\u135f\u1712-\u1714\u1732-\u1734\u1752-\u1753\u1772-\u1773\u17b7-\u17bd\u17c6\u17c9-\u17d3\u17dd\u180b-\u180d\u18a9\u1920-\u1922\u1927-\u1928\u1932\u1939-\u193b\u1a17-\u1a18\u1b00-\u1b03\u1b34\u1b36-\u1b3a\u1b3c\u1b42\u1b6b-\u1b73\u1b80-\u1b81\u1ba2-\u1ba5\u1ba8-\u1ba9\u1c2c-\u1c33\u1c36-\u1c37\u1dc0-\u1de6\u1dfe-\u1dff\u20d0-\u20dc\u20e1\u20e5-\u20f0\u2de0-\u2dff\u302a-\u302f\u3099-\u309a\ua66f\ua67c-\ua67d\ua802\ua806\ua80b\ua825-\ua826\ua8c4\ua926-\ua92d\ua947-\ua951\uaa29-\uaa2e\uaa31-\uaa32\uaa35-\uaa36\uaa43\uaa4c\ufb1e\ufe00-\ufe0f\ufe20-\ufe26]|\ud800\uddfd|\ud802[\ude01-\ude03\ude05-\ude06\ude0c-\ude0f\ude38-\ude3a\ude3f]|\ud834[\udd67-\udd69\udd7b-\udd82\udd85-\udd8b\uddaa-\uddad\ude42-\ude44]|\udb40[\udd00-\uddef]/,
   // Spacing Combining Mark
+  // eslint-disable-next-line no-misleading-character-class
   Mc: /[\u0903\u093e-\u0940\u0949-\u094c\u0982-\u0983\u09be-\u09c0\u09c7-\u09c8\u09cb-\u09cc\u09d7\u0a03\u0a3e-\u0a40\u0a83\u0abe-\u0ac0\u0ac9\u0acb-\u0acc\u0b02-\u0b03\u0b3e\u0b40\u0b47-\u0b48\u0b4b-\u0b4c\u0b57\u0bbe-\u0bbf\u0bc1-\u0bc2\u0bc6-\u0bc8\u0bca-\u0bcc\u0bd7\u0c01-\u0c03\u0c41-\u0c44\u0c82-\u0c83\u0cbe\u0cc0-\u0cc4\u0cc7-\u0cc8\u0cca-\u0ccb\u0cd5-\u0cd6\u0d02-\u0d03\u0d3e-\u0d40\u0d46-\u0d48\u0d4a-\u0d4c\u0d57\u0d82-\u0d83\u0dcf-\u0dd1\u0dd8-\u0ddf\u0df2-\u0df3\u0f3e-\u0f3f\u0f7f\u102b-\u102c\u1031\u1038\u103b-\u103c\u1056-\u1057\u1062-\u1064\u1067-\u106d\u1083-\u1084\u1087-\u108c\u108f\u17b6\u17be-\u17c5\u17c7-\u17c8\u1923-\u1926\u1929-\u192b\u1930-\u1931\u1933-\u1938\u19b0-\u19c0\u19c8-\u19c9\u1a19-\u1a1b\u1b04\u1b35\u1b3b\u1b3d-\u1b41\u1b43-\u1b44\u1b82\u1ba1\u1ba6-\u1ba7\u1baa\u1c24-\u1c2b\u1c34-\u1c35\ua823-\ua824\ua827\ua880-\ua881\ua8b4-\ua8c3\ua952-\ua953\uaa2f-\uaa30\uaa33-\uaa34\uaa4d]|\ud834[\udd65-\udd66\udd6d-\udd72]/,
   // Connector Punctuation
   Pc: /[_‿-⁀⁔︳-︴﹍-﹏＿]/,
@@ -230,15 +231,15 @@ var UnicodeCategory = {
 };
 
 function IsValidTypeNameOrIdentifier(value: string, isTypeName: boolean): boolean {
-  var nextMustBeStartChar: boolean = true;
+  let nextMustBeStartChar = true;
 
   if (!value.length) {
     return false;
   }
 
   // each char must be Lu, Ll, Lt, Lm, Lo, Nd, Mn, Mc, Pc
-  for (var i = 0; i < value.length; i++) {
-    var ch: string = value[i];
+  for (let i = 0; i < value.length; i++) {
+    const ch: string = value[i];
 
     if (
       UnicodeCategory.Lu.test(ch) ||
@@ -265,8 +266,8 @@ function IsValidTypeNameOrIdentifier(value: string, isTypeName: boolean): boolea
       if (!isTypeName) {
         return false;
       } else {
-        var ref: { nextMustBeStartChar: boolean } = { nextMustBeStartChar: nextMustBeStartChar };
-        var isSpecialTypeChar = IsSpecialTypeChar(ch, ref);
+        const ref: { nextMustBeStartChar: boolean } = { nextMustBeStartChar: nextMustBeStartChar };
+        const isSpecialTypeChar = IsSpecialTypeChar(ch, ref);
 
         nextMustBeStartChar = ref.nextMustBeStartChar;
 

src/Explorer/Panes/Tables/Validators/EntityPropertyValidationCommon.ts

@@ -1,23 +1,24 @@
-export var Int32 = {
+export const Int32 = {
   Min: -2147483648,
   Max: 2147483647,
 };
 
-export var Int64 = {
+export const Int64 = {
   Min: -9223372036854775808,
   Max: 9223372036854775807,
 };
 
-var yearMonthDay = "\\d{4}[- ][01]\\d[- ][0-3]\\d";
-var timeOfDay = "T[0-2]\\d:[0-5]\\d(:[0-5]\\d(\\.\\d+)?)?";
-var timeZone = "Z|[+-][0-2]\\d:[0-5]\\d";
+const yearMonthDay = "\\d{4}[- ][01]\\d[- ][0-3]\\d";
+const timeOfDay = "T[0-2]\\d:[0-5]\\d(:[0-5]\\d(\\.\\d+)?)?";
+const timeZone = "Z|[+-][0-2]\\d:[0-5]\\d";
 
-export var ValidationRegExp = {
+export const ValidationRegExp = {
   Guid: /^[{(]?[0-9A-F]{8}[-]?([0-9A-F]{4}[-]?){3}[0-9A-F]{12}[)}]?$/i,
   Float: /^[+-]?\d+(\.\d+)?(e[+-]?\d+)?$/i,
   // OData seems to require an "L" suffix for Int64 values, yet Azure Storage errors out with it. See http://www.odata.org/documentation/odata-version-2-0/overview/
   Integer: /^[+-]?\d+$/i, // Used for both Int32 and Int64 values
   Boolean: /^"?(true|false)"?$/i,
   DateTime: new RegExp(`^${yearMonthDay}${timeOfDay}${timeZone}$`),
+  // eslint-disable-next-line no-control-regex
   PrimaryKey: /^[^/\\#?\u0000-\u001F\u007F-\u009F]*$/,
 };

src/Explorer/Panes/Tables/Validators/EntityPropertyValueValidator.ts

@@ -1,5 +1,6 @@
-import * as Utilities from "../../../Tables/Utilities";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import * as StorageExplorerConstants from "../../../Tables/Constants";
+import * as Utilities from "../../../Tables/Utilities";
 import * as EntityPropertyValidationCommon from "./EntityPropertyValidationCommon";
 
 interface IValidationResult {
@@ -9,21 +10,21 @@ interface IValidationResult {
 
 interface IValueValidator {
   validate: (value: string) => IValidationResult;
-  parseValue: (value: string) => any;
+  parseValue: (value: string) => unknown;
 }
 
 /* Constants */
-var noHelp: string = "";
-var MaximumStringLength = 64 * 1024; // 64 KB
-var MaximumRequiredStringLength = 1 * 1024; //  1 KB
+const noHelp = "";
+const MaximumStringLength = 64 * 1024; // 64 KB
+const MaximumRequiredStringLength = 1 * 1024; //  1 KB
 
 class ValueValidator implements IValueValidator {
-  public validate(value: string): IValidationResult {
+  public validate(_value: string): IValidationResult {
     // throw new Errors.NotImplementedFunctionError("ValueValidator.validate");
-    return null;
+    return undefined;
   }
 
-  public parseValue(value: string): any {
+  public parseValue(value: string): unknown {
     return value; // default pass-thru implementation
   }
 }
@@ -33,7 +34,7 @@ class KeyValidator implements ValueValidator {
 
   public validate(value: string): IValidationResult {
     if (
-      value == null ||
+      value === undefined ||
       value.trim().length === 0 ||
       EntityPropertyValidationCommon.ValidationRegExp.PrimaryKey.test(value)
     ) {
@@ -52,8 +53,8 @@ class BooleanValueValidator extends ValueValidator {
   private detailedHelp = "Enter true or false."; // localize
 
   public validate(value: string): IValidationResult {
-    var success: boolean = false;
-    var help: string = noHelp;
+    let success = false;
+    let help: string = noHelp;
 
     if (value) {
       success = EntityPropertyValidationCommon.ValidationRegExp.Boolean.test(value);
@@ -76,12 +77,12 @@ class DateTimeValueValidator extends ValueValidator {
   private detailedHelp = "Enter a date and time."; // localize
 
   public validate(value: string): IValidationResult {
-    var success: boolean = false;
-    var help: string = noHelp;
+    let success = false;
+    let help: string = noHelp;
 
     if (value) {
       // Try to parse the value to see if it is a valid date string
-      var parsed: number = Date.parse(value);
+      const parsed: number = Date.parse(value);
 
       success = !isNaN(parsed);
     }
@@ -94,8 +95,8 @@ class DateTimeValueValidator extends ValueValidator {
   }
 
   public parseValue(value: string): Date {
-    var millisecondTime = Date.parse(value);
-    var parsed: Date = new Date(millisecondTime);
+    const millisecondTime = Date.parse(value);
+    const parsed: Date = new Date(millisecondTime);
 
     return parsed;
   }
@@ -105,8 +106,8 @@ class DoubleValueValidator extends ValueValidator {
   private detailedHelp = "Enter a 64-bit floating point value."; // localize
 
   public validate(value: string): IValidationResult {
-    var success: boolean = false;
-    var help: string = noHelp;
+    let success = false;
+    let help: string = noHelp;
 
     if (value) {
       success = EntityPropertyValidationCommon.ValidationRegExp.Float.test(value);
@@ -128,8 +129,8 @@ class GuidValueValidator extends ValueValidator {
   private detailedHelp = "Enter a 16-byte (128-bit) GUID value."; // localize
 
   public validate(value: string): IValidationResult {
-    var success: boolean = false;
-    var help: string = noHelp;
+    let success = false;
+    let help: string = noHelp;
 
     if (value) {
       success = EntityPropertyValidationCommon.ValidationRegExp.Guid.test(value);
@@ -149,20 +150,20 @@ class IntegerValueValidator extends ValueValidator {
 
   private isInt64: boolean;
 
-  constructor(isInt64: boolean = true) {
+  constructor(isInt64 = true) {
     super();
 
     this.isInt64 = isInt64;
   }
 
   public validate(value: string): IValidationResult {
-    var success: boolean = false;
-    var help: string = noHelp;
+    let success = false;
+    let help: string = noHelp;
 
     if (value) {
       success = EntityPropertyValidationCommon.ValidationRegExp.Integer.test(value) && Utilities.isSafeInteger(value);
       if (success) {
-        var intValue = parseInt(value, 10);
+        const intValue = parseInt(value, 10);
 
         success = !isNaN(intValue);
         if (success && !this.isInt64) {
@@ -199,14 +200,14 @@ class StringValidator extends ValueValidator {
   }
 
   public validate(value: string): IValidationResult {
-    var help: string = this.isRequired ? this.isRequiredHelp : this.detailedHelp;
-    if (value === null) {
+    let help: string = this.isRequired ? this.isRequiredHelp : this.detailedHelp;
+    if (value === undefined) {
       return { isInvalid: false, help: help };
     }
     // Ensure we validate the string projection of value.
     value = String(value);
 
-    var success = true;
+    let success = true;
 
     if (success) {
       success = value.length <= (this.isRequired ? MaximumRequiredStringLength : MaximumStringLength);
@@ -235,12 +236,12 @@ class NotSupportedValidator extends ValueValidator {
 
   public validate(ignoredValue: string): IValidationResult {
     //throw new Errors.NotSupportedError(this.getMessage());
-    return null;
+    return undefined;
   }
 
-  public parseValue(ignoredValue: string): any {
+  public parseValue(ignoredValue: string): undefined {
     //throw new Errors.NotSupportedError(this.getMessage());
-    return null;
+    return undefined;
   }
 
   private getMessage(): string {
@@ -250,7 +251,7 @@ class NotSupportedValidator extends ValueValidator {
 
 class PropertyValidatorFactory {
   public getValidator(type: string, isRequired: boolean) {
-    var validator: IValueValidator = null;
+    let validator: IValueValidator;
 
     // TODO classify rest of Cassandra types/create validators for them
     switch (type) {
@@ -273,7 +274,6 @@ class PropertyValidatorFactory {
         break;
       case StorageExplorerConstants.TableType.Int32:
       case StorageExplorerConstants.CassandraType.Int:
-      // TODO create separate validators for smallint and tinyint
       case StorageExplorerConstants.CassandraType.Smallint:
       case StorageExplorerConstants.CassandraType.Tinyint:
         validator = new IntegerValueValidator(/* isInt64 */ false);
@@ -317,19 +317,19 @@ export default class EntityPropertyValueValidator {
   }
 
   public validate(value: string, type: string): IValidationResult {
-    var validator: IValueValidator = this.getValidator(type);
+    const validator: IValueValidator = this.getValidator(type);
 
-    return validator ? validator.validate(value) : null; // Should not happen.
+    return validator ? validator.validate(value) : undefined; // Should not happen.
   }
 
-  public parseValue(value: string, type: string): any {
-    var validator: IValueValidator = this.getValidator(type);
+  public parseValue(value: string, type: string): unknown {
+    const validator: IValueValidator = this.getValidator(type);
 
-    return validator ? validator.parseValue(value) : null; // Should not happen.
+    return validator ? validator.parseValue(value) : undefined; // Should not happen.
   }
 
   private getValidator(type: string): IValueValidator {
-    var validator: IValueValidator = this.validators[type];
+    let validator: IValueValidator = this.validators[type];
 
     if (!validator) {
       validator = this.validatorFactory.getValidator(type, this.isRequired);

src/Explorer/Tree/ResourceTree.tsx

@@ -128,7 +128,12 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
         notebooksTree.children.push(buildGalleryNotebooksTree());
       }
 
-      if (myNotebooksContentRoot && useNotebook.getState().connectionInfo.status == ConnectionStatusType.Connected) {
+      if (
+        myNotebooksContentRoot &&
+        ((NotebookUtil.isPhoenixEnabled() &&
+          useNotebook.getState().connectionInfo.status === ConnectionStatusType.Connected) ||
+          userContext.features.phoenix === false)
+      ) {
         notebooksTree.children.push(buildMyNotebooksTree());
       }
       if (container.notebookManager?.gitHubOAuthService.isLoggedIn()) {
@@ -162,7 +167,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       myNotebooksContentRoot,
       (item: NotebookContentItem) => {
         container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
+          if (
+            hasOpened &&
+            userContext.features.notebooksTemporarilyDown === false &&
+            userContext.features.phoenix === false
+          ) {
             mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
           }
         });
@@ -181,7 +190,11 @@ export const ResourceTree: React.FC<ResourceTreeProps> = ({ container }: Resourc
       gitHubNotebooksContentRoot,
       (item: NotebookContentItem) => {
         container.openNotebook(item).then((hasOpened) => {
-          if (hasOpened) {
+          if (
+            hasOpened &&
+            userContext.features.notebooksTemporarilyDown === false &&
+            userContext.features.phoenix === false
+          ) {
             mostRecentActivity.notebookWasItemOpened(userContext.databaseAccount?.id, item);
           }
         });
@@ -213,23 +226,7 @@ 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.contextMenu = manageGitContextMenu;
     gitHubNotebooksTree.isExpanded = true;
     gitHubNotebooksTree.isAlphaSorted = true;
 

src/Explorer/Tree/ResourceTreeAdapter.tsx

@@ -45,7 +45,6 @@ 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";

src/Phoenix/PhoenixClient.ts

@@ -1,7 +1,5 @@
-import { ConnectionStatusType, HttpHeaders, HttpStatusCodes } from "../Common/Constants";
+import { HttpHeaders, HttpStatusCodes } from "../Common/Constants";
 import { configContext } from "../ConfigContext";
-import { ContainerConnectionInfo } from "../Contracts/DataModels";
-import { useNotebook } from "../Explorer/Notebook/useNotebook";
 import { userContext } from "../UserContext";
 import { getAuthorizationHeader } from "../Utils/AuthorizationUtils";
 
@@ -15,7 +13,6 @@ export interface IPhoenixConnectionInfoResult {
 }
 export interface IProvosionData {
   cosmosEndpoint: string;
-  resourceId: string;
   dbAccountName: string;
   aadToken: string;
   resourceGroup: string;
@@ -26,11 +23,7 @@ export class PhoenixClient {
     provisionData: IProvosionData
   ): Promise<IPhoenixResponse<IPhoenixConnectionInfoResult>> {
     try {
-      const connectionStatus: ContainerConnectionInfo = {
-        status: ConnectionStatusType.Connecting,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
-      const response = await window.fetch(`${this.getPhoenixContainerPoolingEndPoint()}/provision`, {
+      const response = await window.fetch(`${this.getPhoenixContainerPoolingEndPoint()}/allocate`, {
         method: "POST",
         headers: PhoenixClient.getHeaders(),
         body: JSON.stringify(provisionData),
@@ -38,31 +31,20 @@ export class PhoenixClient {
       let data: IPhoenixConnectionInfoResult;
       if (response.status === HttpStatusCodes.OK) {
         data = await response.json();
-        if (data && data.notebookServerUrl) {
-          connectionStatus.status = ConnectionStatusType.Connected;
-          useNotebook.getState().setConnectionInfo(connectionStatus);
-        }
-      } else {
-        connectionStatus.status = ConnectionStatusType.Failed;
-        useNotebook.getState().setConnectionInfo(connectionStatus);
       }
-
       return {
         status: response.status,
         data,
       };
     } catch (error) {
-      const connectionStatus: ContainerConnectionInfo = {
-        status: ConnectionStatusType.Failed,
-      };
-      useNotebook.getState().setConnectionInfo(connectionStatus);
       console.error(error);
       throw error;
     }
   }
 
   public static getPhoenixEndpoint(): string {
-    const phoenixEndpoint = userContext.features.junoEndpoint ?? configContext.JUNO_ENDPOINT;
+    const phoenixEndpoint =
+      userContext.features.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);
@@ -73,7 +55,7 @@ export class PhoenixClient {
   }
 
   public getPhoenixContainerPoolingEndPoint(): string {
-    return `${PhoenixClient.getPhoenixEndpoint()}/api/containerpooling`;
+    return `${PhoenixClient.getPhoenixEndpoint()}/api/controlplane/toolscontainer`;
   }
   private static getHeaders(): HeadersInit {
     const authorizationHeader = getAuthorizationHeader();

src/Platform/Hosted/extractFeatures.ts

@@ -20,6 +20,7 @@ export type Features = {
   readonly enableKoResourceTree: boolean;
   readonly hostedDataExplorer: boolean;
   readonly junoEndpoint?: string;
+  readonly phoenixEndpoint?: string;
   readonly livyEndpoint?: string;
   readonly notebookBasePath?: string;
   readonly notebookServerToken?: string;
@@ -68,6 +69,7 @@ export function extractFeatures(given = new URLSearchParams(window.location.sear
     mongoProxyEndpoint: get("mongoproxyendpoint"),
     mongoProxyAPIs: get("mongoproxyapis"),
     junoEndpoint: get("junoendpoint"),
+    phoenixEndpoint: get("phoenixendpoint"),
     livyEndpoint: get("livyendpoint"),
     notebookBasePath: get("notebookbasepath"),
     notebookServerToken: get("notebookservertoken"),

src/Utils/GalleryUtils.test.ts

@@ -30,7 +30,7 @@ describe("GalleryUtils", () => {
   });
 
   it("downloadItem shows dialog in data explorer", () => {
-    const container = {} as Explorer;
+    const container = new Explorer();
     GalleryUtils.downloadItem(container, undefined, galleryItem, undefined);
 
     expect(useDialog.getState().visible).toBe(true);

src/Utils/GalleryUtils.ts

@@ -10,6 +10,7 @@ import {
   SortBy,
 } from "../Explorer/Controls/NotebookGallery/GalleryViewerComponent";
 import Explorer from "../Explorer/Explorer";
+import { NotebookUtil } from "../Explorer/Notebook/NotebookUtil";
 import { useNotebook } from "../Explorer/Notebook/useNotebook";
 import { IGalleryItem, JunoClient } from "../Juno/JunoClient";
 import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants";
@@ -225,67 +226,89 @@ export function downloadItem(
   const name = data.name;
   useDialog.getState().showOkCancelModalDialog(
     `Download to ${useNotebook.getState().notebookFolderName}`,
-    `Download ${name} from gallery as a copy to your notebooks to run and/or edit the notebook.`,
+    undefined,
     "Download",
     async () => {
-      const clearInProgressMessage = logConsoleProgress(
-        `Downloading ${name} to ${useNotebook.getState().notebookFolderName}`
+      if (NotebookUtil.isPhoenixEnabled()) {
+        await container.allocateContainer();
+      }
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (notebookServerInfo && notebookServerInfo.notebookServerEndpoint !== undefined) {
+        downloadNotebookItem(name, data, junoClient, container, onComplete);
+      } else {
+        useDialog
+          .getState()
+          .showOkModalDialog(
+            "Failed to Connect",
+            "Failed to connect to temporary workspace. Please refresh the page and try again."
+          );
+      }
+    },
+    "Cancel",
+    undefined,
+    container.getDownloadModalConent(name)
+  );
+}
+export async function downloadNotebookItem(
+  fileName: string,
+  data: IGalleryItem,
+  junoClient: JunoClient,
+  container: Explorer,
+  onComplete: (item: IGalleryItem) => void
+) {
+  const clearInProgressMessage = logConsoleProgress(
+    `Downloading ${fileName} to ${useNotebook.getState().notebookFolderName}`
+  );
+  const startKey = traceStart(Action.NotebooksGalleryDownload, {
+    notebookId: data.id,
+    downloadCount: data.downloads,
+    isSample: data.isSample,
+  });
+
+  try {
+    const response = await junoClient.getNotebookContent(data.id);
+    if (!response.data) {
+      throw new Error(`Received HTTP ${response.status} when fetching ${data.name}`);
+    }
+
+    const notebook = JSON.parse(response.data) as Notebook;
+    removeNotebookViewerLink(notebook, data.newCellId);
+
+    if (!data.isSample) {
+      const metadata = notebook.metadata as { [name: string]: unknown };
+      metadata.untrusted = true;
+    }
+
+    await container.importAndOpenContent(data.name, JSON.stringify(notebook));
+    logConsoleInfo(`Successfully downloaded ${data.name} to ${useNotebook.getState().notebookFolderName}`);
+
+    const increaseDownloadResponse = await junoClient.increaseNotebookDownloadCount(data.id);
+    if (increaseDownloadResponse.data) {
+      traceSuccess(
+        Action.NotebooksGalleryDownload,
+        { notebookId: data.id, downloadCount: increaseDownloadResponse.data.downloads, isSample: data.isSample },
+        startKey
       );
-      const startKey = traceStart(Action.NotebooksGalleryDownload, {
+      onComplete(increaseDownloadResponse.data);
+    }
+  } catch (error) {
+    traceFailure(
+      Action.NotebooksGalleryDownload,
+      {
         notebookId: data.id,
         downloadCount: data.downloads,
         isSample: data.isSample,
-      });
+        error: getErrorMessage(error),
+        errorStack: getErrorStack(error),
+      },
+      startKey
+    );
 
-      try {
-        const response = await junoClient.getNotebookContent(data.id);
-        if (!response.data) {
-          throw new Error(`Received HTTP ${response.status} when fetching ${data.name}`);
-        }
+    handleError(error, "GalleryUtils/downloadItem", `Failed to download ${data.name}`);
+  }
 
-        const notebook = JSON.parse(response.data) as Notebook;
-        removeNotebookViewerLink(notebook, data.newCellId);
-
-        if (!data.isSample) {
-          const metadata = notebook.metadata as { [name: string]: unknown };
-          metadata.untrusted = true;
-        }
-
-        await container.importAndOpenContent(data.name, JSON.stringify(notebook));
-        logConsoleInfo(`Successfully downloaded ${name} to My Notebooks`);
-
-        const increaseDownloadResponse = await junoClient.increaseNotebookDownloadCount(data.id);
-        if (increaseDownloadResponse.data) {
-          traceSuccess(
-            Action.NotebooksGalleryDownload,
-            { notebookId: data.id, downloadCount: increaseDownloadResponse.data.downloads, isSample: data.isSample },
-            startKey
-          );
-          onComplete(increaseDownloadResponse.data);
-        }
-      } catch (error) {
-        traceFailure(
-          Action.NotebooksGalleryDownload,
-          {
-            notebookId: data.id,
-            downloadCount: data.downloads,
-            isSample: data.isSample,
-            error: getErrorMessage(error),
-            errorStack: getErrorStack(error),
-          },
-          startKey
-        );
-
-        handleError(error, "GalleryUtils/downloadItem", `Failed to download ${data.name}`);
-      }
-
-      clearInProgressMessage();
-    },
-    "Cancel",
-    undefined
-  );
+  clearInProgressMessage();
 }
-
 export const removeNotebookViewerLink = (notebook: Notebook, newCellId: string): void => {
   if (!newCellId) {
     return;

src/hooks/useTabs.ts

@@ -69,7 +69,11 @@ export const useTabs: UseStore<TabsState> = create((set, get) => ({
     if (tab.tabId === activeTab.tabId && tabIndex !== -1) {
       const tabToTheRight = updatedTabs[tabIndex];
       const lastOpenTab = updatedTabs[updatedTabs.length - 1];
-      set({ activeTab: tabToTheRight || lastOpenTab });
+      const newActiveTab = tabToTheRight ?? lastOpenTab;
+      set({ activeTab: newActiveTab });
+      if (newActiveTab) {
+        newActiveTab.onActivate();
+      }
     }
 
     set({ openedTabs: updatedTabs });

src/setupTests.ts

@@ -1,7 +1,7 @@
-import { initializeIcons } from "@fluentui/react";
 import { configure } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import "jest-canvas-mock";
+import { initializeIcons } from "@fluentui/react";
 import { TextDecoder, TextEncoder } from "util";
 configure({ adapter: new Adapter() });
 initializeIcons();
@@ -16,12 +16,3 @@ if (typeof window.URL.createObjectURL === "undefined") {
 require("jquery-ui-dist/jquery-ui");
 (<any>global).TextEncoder = TextEncoder;
 (<any>global).TextDecoder = TextDecoder;
-
-// In Node v7 unhandled promise rejections
-if (process.env.LISTENING_TO_UNHANDLED_REJECTION !== "true") {
-  process.on("unhandledRejection", (reason) => {
-    console.error("reason", reason);
-  });
-  // Avoid memory leak by adding too many listeners
-  process.env.LISTENING_TO_UNHANDLED_REJECTION = "true";
-}