Revert "First set of changes for Notebooks removal. (#1816)" (#1830)

This reverts commit b023250e67.

src/Explorer/Explorer.tsx

@@ -1,3 +1,4 @@
+import { Link } from "@fluentui/react/lib/Link";
 import { isPublicInternetAccessAllowed } from "Common/DatabaseAccountUtility";
 import { sendMessage } from "Common/MessageHandler";
 import { Platform, configContext } from "ConfigContext";
@@ -15,7 +16,7 @@ import shallow from "zustand/shallow";
 import { AuthType } from "../AuthType";
 import { BindingHandlersRegisterer } from "../Bindings/BindingHandlersRegisterer";
 import * as Constants from "../Common/Constants";
-import { Areas, ConnectionStatusType, HttpStatusCodes, PoolIdType } from "../Common/Constants";
+import { Areas, ConnectionStatusType, HttpStatusCodes, Notebook, PoolIdType } from "../Common/Constants";
 import { getErrorMessage, getErrorStack, handleError } from "../Common/ErrorHandlingUtils";
 import * as Logger from "../Common/Logger";
 import { QueriesClient } from "../Common/QueriesClient";
@@ -31,23 +32,34 @@ import { Action, ActionModifiers } from "../Shared/Telemetry/TelemetryConstants"
 import * as TelemetryProcessor from "../Shared/Telemetry/TelemetryProcessor";
 import { isAccountNewerThanThresholdInMs, userContext } from "../UserContext";
 import { getCollectionName, getUploadName } from "../Utils/APITypeUtils";
+import { stringToBlob } from "../Utils/BlobUtils";
 import { isCapabilityEnabled } from "../Utils/CapabilityUtils";
+import { fromContentUri, toRawContentUri } from "../Utils/GitHubUtils";
+import * as NotificationConsoleUtils from "../Utils/NotificationConsoleUtils";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../Utils/NotificationConsoleUtils";
 import { update } from "../Utils/arm/generatedClients/cosmos/databaseAccounts";
+import { listByDatabaseAccount } from "../Utils/arm/generatedClients/cosmosNotebooks/notebookWorkspaces";
 import { useSidePanel } from "../hooks/useSidePanel";
 import { useTabs } from "../hooks/useTabs";
 import "./ComponentRegisterer";
 import { DialogProps, useDialog } from "./Controls/Dialog";
 import { GalleryTab as GalleryTabKind } from "./Controls/NotebookGallery/GalleryViewerComponent";
 import { useCommandBar } from "./Menus/CommandBar/CommandBarComponentAdapter";
-import { NotebookContentItem } from "./Notebook/NotebookContentItem";
+import * as FileSystemUtil from "./Notebook/FileSystemUtil";
+import { SnapshotRequest } from "./Notebook/NotebookComponent/types";
+import { NotebookContentItem, NotebookContentItemType } from "./Notebook/NotebookContentItem";
 import type NotebookManager from "./Notebook/NotebookManager";
+import { NotebookPaneContent } from "./Notebook/NotebookManager";
+import { NotebookUtil } from "./Notebook/NotebookUtil";
 import { useNotebook } from "./Notebook/useNotebook";
 import { AddCollectionPanel } from "./Panes/AddCollectionPanel";
 import { CassandraAddCollectionPane } from "./Panes/CassandraAddCollectionPane/CassandraAddCollectionPane";
 import { ExecuteSprocParamsPane } from "./Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane";
+import { StringInputPane } from "./Panes/StringInputPane/StringInputPane";
+import { UploadFilePane } from "./Panes/UploadFilePane/UploadFilePane";
 import { UploadItemsPane } from "./Panes/UploadItemsPane/UploadItemsPane";
 import { CassandraAPIDataClient, TableDataClient, TablesAPIDataClient } from "./Tables/TableDataClient";
+import NotebookV2Tab, { NotebookTabOptions } from "./Tabs/NotebookV2Tab";
 import TabsBase from "./Tabs/TabsBase";
 import TerminalTab from "./Tabs/TerminalTab";
 import Database from "./Tree/Database";
@@ -75,6 +87,7 @@ export default class Explorer {
   // Notebooks
   public notebookManager?: NotebookManager;
 
+  private _isInitializingNotebooks: boolean;
   private notebookToImport: {
     name: string;
     content: string;
@@ -86,6 +99,7 @@ export default class Explorer {
     const startKey: number = TelemetryProcessor.traceStart(Action.InitializeDataExplorer, {
       dataExplorerArea: Constants.Areas.ResourceTree,
     });
+    this._isInitializingNotebooks = false;
 
     this.phoenixClient = new PhoenixClient(userContext?.databaseAccount?.id);
     useNotebook.subscribe(
@@ -191,10 +205,12 @@ export default class Explorer {
         container: this,
         resourceTree: this.resourceTree,
         refreshCommandBarButtons: () => this.refreshCommandBarButtons(),
+        refreshNotebookList: () => this.refreshNotebookList(),
       });
     }
 
     this.refreshCommandBarButtons();
+    this.refreshNotebookList();
   }
 
   public openEnableSynapseLinkDialog(): void {
@@ -357,6 +373,7 @@ export default class Explorer {
     userContext.authType === AuthType.ResourceToken
       ? this.refreshDatabaseForResourceToken()
       : this.refreshAllDatabases();
+    this.refreshNotebookList();
   };
 
   // Facade
@@ -364,6 +381,19 @@ export default class Explorer {
     window.open(Constants.Urls.feedbackEmail, "_blank");
   };
 
+  public async initNotebooks(databaseAccount: DataModels.DatabaseAccount): Promise<void> {
+    if (!databaseAccount) {
+      throw new Error("No database account specified");
+    }
+
+    if (this._isInitializingNotebooks) {
+      return;
+    }
+    this._isInitializingNotebooks = true;
+    this.refreshNotebookList();
+    this._isInitializingNotebooks = false;
+  }
+
   public async allocateContainer(poolId: PoolIdType, mode?: string): Promise<void> {
     const shouldUseNotebookStates = poolId === PoolIdType.DefaultPoolId ? true : false;
     const notebookServerInfo = shouldUseNotebookStates
@@ -442,6 +472,8 @@ export default class Explorer {
           ? useNotebook.getState().setIsAllocating(false)
           : useQueryCopilot.getState().setIsAllocatingContainer(false);
         this.refreshCommandBarButtons();
+        this.refreshNotebookList();
+        this._isInitializingNotebooks = false;
       }
     }
   }
@@ -478,6 +510,104 @@ export default class Explorer {
         .then((memoryUsageInfo) => useNotebook.getState().setMemoryUsageInfo(memoryUsageInfo));
   }
 
+  public resetNotebookWorkspace(): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookClient) {
+      handleError(
+        "Attempt to reset notebook workspace, but notebook is not enabled",
+        "Explorer/resetNotebookWorkspace",
+      );
+      return;
+    }
+    const dialogContent = useNotebook.getState().isPhoenixNotebooks
+      ? "Notebooks saved in the temporary workspace will be deleted. Do you want to proceed?"
+      : "This lets you keep your notebook files and the workspace will be restored to default. Proceed anyway?";
+
+    const resetConfirmationDialogProps: DialogProps = {
+      isModal: true,
+      title: "Reset Workspace",
+      subText: dialogContent,
+      primaryButtonText: "OK",
+      secondaryButtonText: "Cancel",
+      onPrimaryButtonClick: this._resetNotebookWorkspace,
+      onSecondaryButtonClick: () => useDialog.getState().closeDialog(),
+    };
+    useDialog.getState().openDialog(resetConfirmationDialogProps);
+  }
+
+  private async _containsDefaultNotebookWorkspace(databaseAccount: DataModels.DatabaseAccount): Promise<boolean> {
+    if (!databaseAccount) {
+      return false;
+    }
+    try {
+      const { value: workspaces } = await listByDatabaseAccount(
+        userContext.subscriptionId,
+        userContext.resourceGroup,
+        userContext.databaseAccount.name,
+      );
+      return workspaces && workspaces.length > 0 && workspaces.some((workspace) => workspace.name === "default");
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer/_containsDefaultNotebookWorkspace");
+      return false;
+    }
+  }
+
+  private _resetNotebookWorkspace = async () => {
+    useDialog.getState().closeDialog();
+    const clearInProgressMessage = logConsoleProgress("Resetting notebook workspace");
+    let connectionStatus: ContainerConnectionInfo;
+    try {
+      const notebookServerInfo = useNotebook.getState().notebookServerInfo;
+      if (!notebookServerInfo || !notebookServerInfo.notebookServerEndpoint) {
+        const error = "No server endpoint detected";
+        Logger.logError(error, "NotebookContainerClient/resetWorkspace");
+        logConsoleError(error);
+        return;
+      }
+      TelemetryProcessor.traceStart(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        useTabs.getState().closeAllNotebookTabs(true);
+        connectionStatus = {
+          status: ConnectionStatusType.Connecting,
+        };
+        useNotebook.getState().setConnectionInfo(connectionStatus);
+      }
+      const connectionInfo = await this.notebookManager?.notebookClient.resetWorkspace();
+      if (connectionInfo?.status !== HttpStatusCodes.OK) {
+        throw new Error(`Reset Workspace: Received status code- ${connectionInfo?.status}`);
+      }
+      if (!connectionInfo?.data?.phoenixServiceUrl) {
+        throw new Error(`Reset Workspace: PhoenixServiceUrl is invalid!`);
+      }
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        await this.setNotebookInfo(true, connectionInfo, connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      logConsoleInfo("Successfully reset notebook workspace");
+      TelemetryProcessor.traceSuccess(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+      });
+    } catch (error) {
+      logConsoleError(`Failed to reset notebook workspace: ${error}`);
+      TelemetryProcessor.traceFailure(Action.PhoenixResetWorkspace, {
+        dataExplorerArea: Areas.Notebook,
+        error: getErrorMessage(error),
+        errorStack: getErrorStack(error),
+      });
+      if (useNotebook.getState().isPhoenixNotebooks) {
+        connectionStatus = {
+          status: ConnectionStatusType.Failed,
+        };
+        useNotebook.getState().resetContainerConnection(connectionStatus);
+        useNotebook.getState().setIsRefreshed(!useNotebook.getState().isRefreshed);
+      }
+      throw error;
+    } finally {
+      clearInProgressMessage();
+    }
+  };
+
   private getDeltaDatabases(
     updatedDatabaseList: DataModels.Database[],
     databases: ViewModels.Database[],
@@ -566,6 +696,406 @@ export default class Explorer {
     }
   }
 
+  public uploadFile(
+    name: string,
+    content: string,
+    parent: NotebookContentItem,
+    isGithubTree?: boolean,
+  ): Promise<NotebookContentItem> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to upload notebook, but notebook is not enabled";
+      handleError(error, "Explorer/uploadFile");
+      throw new Error(error);
+    }
+
+    const promise = this.notebookManager?.notebookContentClient.uploadFileAsync(name, content, parent, isGithubTree);
+    promise
+      .then(() => this.resourceTree.triggerRender())
+      .catch((reason) => useDialog.getState().showOkModalDialog("Unable to upload file", getErrorMessage(reason)));
+    return promise;
+  }
+
+  public async importAndOpen(path: string): Promise<boolean> {
+    const name = NotebookUtil.getName(path);
+    const item = NotebookUtil.createNotebookContentItem(name, path, "file");
+    const parent = this.resourceTree.myNotebooksContentRoot;
+
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
+      const existingItem = _.find(parent.children, (node) => node.name === name);
+      if (existingItem) {
+        return this.openNotebook(existingItem);
+      }
+
+      const content = await this.readFile(item);
+      const uploadedItem = await this.uploadFile(name, content, parent);
+      return this.openNotebook(uploadedItem);
+    }
+
+    return Promise.resolve(false);
+  }
+
+  public async importAndOpenContent(name: string, content: string): Promise<boolean> {
+    const parent = this.resourceTree.myNotebooksContentRoot;
+
+    if (parent && parent.children && useNotebook.getState().isNotebookEnabled && this.notebookManager?.notebookClient) {
+      if (this.notebookToImport && this.notebookToImport.name === name && this.notebookToImport.content === content) {
+        this.notebookToImport = undefined; // we don't want to try opening this notebook again
+      }
+
+      const existingItem = _.find(parent.children, (node) => node.name === name);
+      if (existingItem) {
+        return this.openNotebook(existingItem);
+      }
+
+      const uploadedItem = await this.uploadFile(name, content, parent);
+      return this.openNotebook(uploadedItem);
+    }
+
+    this.notebookToImport = { name, content }; // we'll try opening this notebook later on
+    return Promise.resolve(false);
+  }
+
+  public async publishNotebook(
+    name: string,
+    content: NotebookPaneContent,
+    notebookContentRef?: string,
+    onTakeSnapshot?: (request: SnapshotRequest) => void,
+    onClosePanel?: () => void,
+  ): Promise<void> {
+    if (this.notebookManager) {
+      await this.notebookManager.openPublishNotebookPane(
+        name,
+        content,
+        notebookContentRef,
+        onTakeSnapshot,
+        onClosePanel,
+      );
+    }
+  }
+
+  public copyNotebook(name: string, content: string): void {
+    this.notebookManager?.openCopyNotebookPane(name, content);
+  }
+
+  /**
+   * Note: To keep it simple, this creates a disconnected NotebookContentItem that is not connected to the resource tree.
+   * Connecting it to a tree possibly requires the intermediate missing folders if the item is nested in a subfolder.
+   * Manually creating the missing folders between the root and its parent dir would break the UX: expanding a folder
+   * will not fetch its content if the children array exists (and has only one child which was manually created).
+   * Fetching the intermediate folders possibly involves a few chained async calls which isn't ideal.
+   *
+   * @param name
+   * @param path
+   */
+  public createNotebookContentItemFile(name: string, path: string): NotebookContentItem {
+    return NotebookUtil.createNotebookContentItem(name, path, "file");
+  }
+
+  public async openNotebook(notebookContentItem: NotebookContentItem): Promise<boolean> {
+    if (!notebookContentItem || !notebookContentItem.path) {
+      throw new Error(`Invalid notebookContentItem: ${notebookContentItem}`);
+    }
+    if (notebookContentItem.type === NotebookContentItemType.Notebook && useNotebook.getState().isPhoenixNotebooks) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+    }
+
+    const notebookTabs = useTabs
+      .getState()
+      .getTabs(
+        ViewModels.CollectionTabKind.NotebookV2,
+        (tab) =>
+          (tab as NotebookV2Tab).notebookPath &&
+          FileSystemUtil.isPathEqual((tab as NotebookV2Tab).notebookPath(), notebookContentItem.path),
+      ) as NotebookV2Tab[];
+    let notebookTab = notebookTabs && notebookTabs[0];
+
+    if (notebookTab) {
+      useTabs.getState().activateTab(notebookTab);
+    } else {
+      const options: NotebookTabOptions = {
+        account: userContext.databaseAccount,
+        tabKind: ViewModels.CollectionTabKind.NotebookV2,
+        node: undefined,
+        title: notebookContentItem.name,
+        tabPath: notebookContentItem.path,
+        collection: undefined,
+        masterKey: userContext.masterKey || "",
+        isTabsContentExpanded: ko.observable(true),
+        onLoadStartKey: undefined,
+        container: this,
+        notebookContentItem,
+      };
+
+      try {
+        const NotebookTabV2 = await import(/* webpackChunkName: "NotebookV2Tab" */ "./Tabs/NotebookV2Tab");
+        notebookTab = new NotebookTabV2.default(options);
+        useTabs.getState().activateNewTab(notebookTab);
+      } catch (reason) {
+        console.error("Import NotebookV2Tab failed!", reason);
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  public renameNotebook(notebookFile: NotebookContentItem, isGithubTree?: boolean): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to rename notebook, but notebook is not enabled";
+      handleError(error, "Explorer/renameNotebook");
+      throw new Error(error);
+    }
+
+    // Don't delete if tab is open to avoid accidental deletion
+    const openedNotebookTabs = useTabs
+      .getState()
+      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
+        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), notebookFile.path);
+      });
+    if (openedNotebookTabs.length > 0) {
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to rename file", "This file is being edited. Please close the tab and try again.");
+    } else {
+      useSidePanel.getState().openSidePanel(
+        "Rename Notebook",
+        <StringInputPane
+          closePanel={() => {
+            useSidePanel.getState().closeSidePanel();
+            this.resourceTree.triggerRender();
+          }}
+          inputLabel="Enter new notebook name"
+          submitButtonLabel="Rename"
+          errorMessage="Could not rename notebook"
+          inProgressMessage="Renaming notebook to"
+          successMessage="Renamed notebook to"
+          paneTitle="Rename Notebook"
+          defaultInput={FileSystemUtil.stripExtension(notebookFile.name, "ipynb")}
+          onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
+            this.notebookManager?.notebookContentClient.renameNotebook(notebookFile, input, isGithubTree)
+          }
+          notebookFile={notebookFile}
+        />,
+      );
+    }
+  }
+
+  public onCreateDirectory(parent: NotebookContentItem, isGithubTree?: boolean): void {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to create notebook directory, but notebook is not enabled";
+      handleError(error, "Explorer/onCreateDirectory");
+      throw new Error(error);
+    }
+
+    useSidePanel.getState().openSidePanel(
+      "Create new directory",
+      <StringInputPane
+        closePanel={() => {
+          useSidePanel.getState().closeSidePanel();
+          this.resourceTree.triggerRender();
+        }}
+        errorMessage="Could not create directory "
+        inProgressMessage="Creating directory "
+        successMessage="Created directory "
+        inputLabel="Enter new directory name"
+        paneTitle="Create new directory"
+        submitButtonLabel="Create"
+        defaultInput=""
+        onSubmit={(notebookFile: NotebookContentItem, input: string): Promise<NotebookContentItem> =>
+          this.notebookManager?.notebookContentClient.createDirectory(notebookFile, input, isGithubTree)
+        }
+        notebookFile={parent}
+      />,
+    );
+  }
+
+  public readFile(notebookFile: NotebookContentItem): Promise<string> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to read file, but notebook is not enabled";
+      handleError(error, "Explorer/downloadFile");
+      throw new Error(error);
+    }
+
+    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path);
+  }
+
+  public downloadFile(notebookFile: NotebookContentItem): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to download file, but notebook is not enabled";
+      handleError(error, "Explorer/downloadFile");
+      throw new Error(error);
+    }
+
+    const clearMessage = NotificationConsoleUtils.logConsoleProgress(`Downloading ${notebookFile.path}`);
+
+    return this.notebookManager?.notebookContentClient.readFileContent(notebookFile.path).then(
+      (content: string) => {
+        const blob = stringToBlob(content, "text/plain");
+        if (navigator.msSaveBlob) {
+          // for IE and Edge
+          navigator.msSaveBlob(blob, notebookFile.name);
+        } else {
+          const downloadLink: HTMLAnchorElement = document.createElement("a");
+          const url = URL.createObjectURL(blob);
+          downloadLink.href = url;
+          downloadLink.target = "_self";
+          downloadLink.download = notebookFile.name;
+
+          // for some reason, FF displays the download prompt only when
+          // the link is added to the dom so we add and remove it
+          document.body.appendChild(downloadLink);
+          downloadLink.click();
+          downloadLink.remove();
+        }
+
+        clearMessage();
+      },
+      (error) => {
+        logConsoleError(`Could not download notebook ${getErrorMessage(error)}`);
+        clearMessage();
+      },
+    );
+  }
+
+  private refreshNotebookList = async (): Promise<void> => {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      return;
+    }
+
+    await this.resourceTree.initialize();
+    await useNotebook.getState().initializeNotebooksTree(this.notebookManager);
+
+    this.notebookManager?.refreshPinnedRepos();
+    if (this.notebookToImport) {
+      this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
+    }
+  };
+
+  public deleteNotebookFile(item: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to delete notebook file, but notebook is not enabled";
+      handleError(error, "Explorer/deleteNotebookFile");
+      throw new Error(error);
+    }
+
+    // Don't delete if tab is open to avoid accidental deletion
+    const openedNotebookTabs = useTabs
+      .getState()
+      .getTabs(ViewModels.CollectionTabKind.NotebookV2, (tab: NotebookV2Tab) => {
+        return tab.notebookPath && FileSystemUtil.isPathEqual(tab.notebookPath(), item.path);
+      });
+    if (openedNotebookTabs.length > 0) {
+      useDialog
+        .getState()
+        .showOkModalDialog("Unable to delete file", "This file is being edited. Please close the tab and try again.");
+      return Promise.reject();
+    }
+
+    if (item.type === NotebookContentItemType.Directory && item.children && item.children.length > 0) {
+      useDialog.getState().openDialog({
+        isModal: true,
+        title: "Unable to delete file",
+        subText: "Directory is not empty.",
+        primaryButtonText: "Close",
+        secondaryButtonText: undefined,
+        onPrimaryButtonClick: () => useDialog.getState().closeDialog(),
+        onSecondaryButtonClick: undefined,
+      });
+      return Promise.reject();
+    }
+
+    return this.notebookManager?.notebookContentClient.deleteContentItem(item, isGithubTree).then(
+      () => logConsoleInfo(`Successfully deleted: ${item.path}`),
+      (reason) => logConsoleError(`Failed to delete "${item.path}": ${JSON.stringify(reason)}`),
+    );
+  }
+
+  /**
+   * This creates a new notebook file, then opens the notebook
+   */
+  public async onNewNotebookClicked(parent?: NotebookContentItem, isGithubTree?: boolean): Promise<void> {
+    if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
+      const error = "Attempt to create new notebook, but notebook is not enabled";
+      handleError(error, "Explorer/onNewNotebookClicked");
+      throw new Error(error);
+    }
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      if (isGithubTree) {
+        await this.allocateContainer(PoolIdType.DefaultPoolId);
+        parent = parent || this.resourceTree.myNotebooksContentRoot;
+        this.createNewNoteBook(parent, isGithubTree);
+      } else {
+        useDialog.getState().showOkCancelModalDialog(
+          Notebook.newNotebookModalTitle,
+          undefined,
+          "Create",
+          async () => {
+            await this.allocateContainer(PoolIdType.DefaultPoolId);
+            parent = parent || this.resourceTree.myNotebooksContentRoot;
+            this.createNewNoteBook(parent, isGithubTree);
+          },
+          "Cancel",
+          undefined,
+          this.getNewNoteWarningText(),
+        );
+      }
+    } else {
+      parent = parent || this.resourceTree.myNotebooksContentRoot;
+      this.createNewNoteBook(parent, isGithubTree);
+    }
+  }
+
+  private getNewNoteWarningText(): JSX.Element {
+    return (
+      <>
+        <p>{Notebook.newNotebookModalContent1}</p>
+        <br />
+        <p>
+          {Notebook.newNotebookModalContent2}
+          <Link href={Notebook.cosmosNotebookHomePageUrl} target="_blank">
+            {Notebook.learnMore}
+          </Link>
+        </p>
+      </>
+    );
+  }
+
+  private createNewNoteBook(parent?: NotebookContentItem, isGithubTree?: boolean): void {
+    const clearInProgressMessage = logConsoleProgress(`Creating new notebook in ${parent.path}`);
+    const startKey: number = TelemetryProcessor.traceStart(Action.CreateNewNotebook, {
+      dataExplorerArea: Constants.Areas.Notebook,
+    });
+
+    this.notebookManager?.notebookContentClient
+      .createNewNotebookFile(parent, isGithubTree)
+      .then((newFile: NotebookContentItem) => {
+        logConsoleInfo(`Successfully created: ${newFile.name}`);
+        TelemetryProcessor.traceSuccess(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+          },
+          startKey,
+        );
+        return this.openNotebook(newFile);
+      })
+      .then(() => this.resourceTree.triggerRender())
+      .catch((error) => {
+        const errorMessage = `Failed to create a new notebook: ${getErrorMessage(error)}`;
+        logConsoleError(errorMessage);
+        TelemetryProcessor.traceFailure(
+          Action.CreateNewNotebook,
+          {
+            dataExplorerArea: Constants.Areas.Notebook,
+            error: errorMessage,
+            errorStack: getErrorStack(error),
+          },
+          startKey,
+        );
+      })
+      .finally(clearInProgressMessage);
+  }
+
   // TODO: Delete this function when ResourceTreeAdapter is removed.
   public async refreshContentItem(item: NotebookContentItem): Promise<void> {
     if (!useNotebook.getState().isNotebookEnabled || !this.notebookManager?.notebookContentClient) {
@@ -722,6 +1252,32 @@ export default class Explorer {
     }
   }
 
+  public async handleOpenFileAction(path: string): Promise<void> {
+    if (useNotebook.getState().isPhoenixNotebooks === undefined) {
+      await useNotebook.getState().getPhoenixStatus();
+    }
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      await this.allocateContainer(PoolIdType.DefaultPoolId);
+    }
+
+    // We still use github urls like https://github.com/Azure-Samples/cosmos-notebooks/blob/master/CSharp_quickstarts/GettingStarted_CSharp.ipynb
+    // when launching a notebook quickstart from Portal. In future we should just use gallery id and use Juno to fetch instead of directly
+    // calling GitHub. For now convert this url to a raw url and download content.
+    const gitHubInfo = fromContentUri(path);
+    if (gitHubInfo) {
+      const rawUrl = toRawContentUri(gitHubInfo.owner, gitHubInfo.repo, gitHubInfo.branch, gitHubInfo.path);
+      const response = await fetch(rawUrl);
+      if (response.status === Constants.HttpStatusCodes.OK) {
+        this.notebookToImport = {
+          name: NotebookUtil.getName(path),
+          content: await response.text(),
+        };
+
+        this.importAndOpenContent(this.notebookToImport.name, this.notebookToImport.content);
+      }
+    }
+  }
+
   public openUploadItemsPanePane(): void {
     useSidePanel.getState().openSidePanel("Upload " + getUploadName(), <UploadItemsPane />);
   }
@@ -731,6 +1287,54 @@ export default class Explorer {
       .openSidePanel("Input parameters", <ExecuteSprocParamsPane storedProcedure={storedProcedure} />);
   }
 
+  public openUploadFilePanel(parent?: NotebookContentItem): void {
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      useDialog.getState().showOkCancelModalDialog(
+        Notebook.newNotebookUploadModalTitle,
+        undefined,
+        "Upload",
+        async () => {
+          await this.allocateContainer(PoolIdType.DefaultPoolId);
+          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(
+        "Upload file to notebook server",
+        <UploadFilePane uploadFile={(name: string, content: string) => this.uploadFile(name, content, parent)} />,
+      );
+  }
+
+  public getDownloadModalConent(fileName: string): JSX.Element {
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      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> {
     if (userContext.apiType !== "Postgres" && userContext.apiType !== "VCoreMongo") {
       userContext.authType === AuthType.ResourceToken
@@ -755,6 +1359,10 @@ export default class Explorer {
       dataExplorerArea: Constants.Areas.Notebook,
     });
 
+    if (useNotebook.getState().isPhoenixNotebooks) {
+      await this.initNotebooks(userContext.databaseAccount);
+    }
+
     await this.refreshSampleData();
   }