Tree view enhancement

packages/_metapackage/tsconfig.json

@@ -15,6 +15,7 @@
     { "path": "../lab-extension" },
     { "path": "../notebook-extension" },
     { "path": "../terminal-extension" },
+    { "path": "../tree" },
     { "path": "../tree-extension" },
     { "path": "../ui-components" }
   ]

packages/application-extension/src/index.ts

@@ -242,6 +242,11 @@ const menuSpacer: JupyterFrontEndPlugin<void> = {
 
 /**
  * Add commands to open the tree and running pages.
+ *
+ * ## NOTES:
+ * The optional token IFileBrowserCommands is useful to ensure the corresponding
+ * plugin has been activated. Otherwise this plugin can be activated before the commands
+ * 'toggle-main' has been added, which create a duplicated entry.
  */
 const pages: JupyterFrontEndPlugin<void> = {
   id: '@jupyter-notebook/application-extension:pages',
@@ -262,18 +267,22 @@ const pages: JupyterFrontEndPlugin<void> = {
         window.open(`${baseUrl}lab`);
       }
     });
+    const page = PageConfig.getOption('notebookPage');
 
     app.commands.addCommand(CommandIDs.openTree, {
-      label: trans.__('Open Files'),
+      label: trans.__('File Browser'),
       execute: () => {
-        window.open(`${baseUrl}tree`);
+        if (page === 'tree') {
+          app.commands.execute('filebrowser:activate');
+        } else {
+          window.open(`${baseUrl}tree`);
+        }
       }
     });
 
     if (palette) {
-      [CommandIDs.openLab, CommandIDs.openTree].forEach(command => {
-        palette.addItem({ command, category: 'View' });
-      });
+      palette.addItem({ command: CommandIDs.openLab, category: 'View' });
+      palette.addItem({ command: CommandIDs.openTree, category: 'View' });
     }
   }
 };

packages/tree-extension/src/index.ts

@@ -44,6 +44,14 @@ const FILE_BROWSER_FACTORY = 'FileBrowser';
  */
 const FILE_BROWSER_PLUGIN_ID = '@jupyterlab/filebrowser-extension:browser';
 
+/**
+ * The namespace for command IDs.
+ */
+namespace CommandIDs {
+  // The command to activate the filebrowser widget in tree view.
+  export const activate = 'filebrowser:activate';
+}
+
 /**
  * Plugin to add extra commands to the file browser to create
  * new notebooks, files, consoles and terminals
@@ -94,6 +102,28 @@ const createNew: JupyterFrontEndPlugin<void> = {
   }
 };
 
+/**
+ * A plugin to add file browser commands for the tree view.
+ */
+const openFileBrowser: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-notebook/tree-extension:open-file-browser',
+  requires: [INotebookTree, IFileBrowserFactory],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    notebookTree: INotebookTree,
+    factory: IFileBrowserFactory
+  ) => {
+    const { commands } = app;
+    commands.addCommand(CommandIDs.activate, {
+      execute: () => {
+        const { defaultBrowser: browser } = factory;
+        notebookTree.currentWidget = browser;
+      }
+    });
+  }
+};
+
 /**
  * A plugin to add the file browser widget to an INotebookShell
  */
@@ -183,5 +213,9 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
 /**
  * Export the plugins as default.
  */
-const plugins: JupyterFrontEndPlugin<any>[] = [createNew, notebookTreeWidget];
+const plugins: JupyterFrontEndPlugin<any>[] = [
+  createNew,
+  openFileBrowser,
+  notebookTreeWidget
+];
 export default plugins;

ui-tests/test/tree.spec.ts

@@ -36,3 +36,12 @@ test('should update url when navigating in filebrowser', async ({
   const url = new URL(page.url());
   expect(url.pathname).toEqual(`/tree/${tmpPath}/${SUBFOLDER}`);
 });
+
+test('Should activate file browser tab', async ({ page, tmpPath }) => {
+  await page.goto(`tree/${tmpPath}`);
+  await page.click('text="Running"');
+  await expect(page.locator('#main-panel #jp-running-sessions')).toBeVisible();
+
+  await page.menu.clickMenuItem('View>File Browser');
+  await expect(page.locator('#main-panel #filebrowser')).toBeVisible();
+});