Tree view enhancement (#6588)

* Opens by default the newly created tab in tree view

* Adds a command to open the file browser when in tree view, which also fixes the broken menu entry 'file Browser' in view

* (1) Remove the menu entry 'Open Files' in tree view, which was opening a new browser tab with the same contents, and was like a duplication of 'File Browser' entry, and (2) rename the menu entry 'Open Files' to 'File Browser' for consistency

* Add test on 'File Browser' menu entry

* Fix pre-commit

* Fix test on File Browser menu entry

* update snapshots of view menu

* Do not activate newly created tree tab by default

* Do not add 'openTree' command if it already exists (meaning that the current page contains a filebrowser plugin)

* Wait for the file browser commands from JupyterLab to be fully created before create a new one

* File Browser menu entry execution depends on the current page ('tree' or other)

* Add the dependency to @jupyter-notebook/tree in application-extension

* Fix typo

* Remove dependency to tree in application-extension

* Clean unused dependency

* Delete a remaining comment

Author: brichet

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

@@ -262,18 +262,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/menus.spec.ts-snapshots/opened-menu-view-chromium-linux.png

@@ -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();
+});