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/package.json

@@ -40,6 +40,7 @@
  },
  "dependencies": {
  "@jupyter-notebook/application": "^7.0.0-alpha.10",
+ "@jupyter-notebook/tree": "^7.0.0-alpha.10",
  "@jupyter-notebook/ui-components": "^7.0.0-alpha.10",
  "@jupyterlab/application": "^4.0.0-alpha.17",
  "@jupyterlab/apputils": "^4.0.0-alpha.17",

packages/application-extension/src/index.ts

@@ -40,6 +40,8 @@ import {
  SidePanelPalette
 } from '@jupyter-notebook/application';
 
+import { CommandIDs as filebrowserCommandIDs } from '@jupyter-notebook/tree';
+
 import { jupyterIcon } from '@jupyter-notebook/ui-components';
 
 import { PromiseDelegate } from '@lumino/coreutils';
@@ -242,6 +244,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 +269,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(filebrowserCommandIDs.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

@@ -32,7 +32,11 @@ import {
 
 import { Menu, MenuBar } from '@lumino/widgets';
 
-import { NotebookTreeWidget, INotebookTree } from '@jupyter-notebook/tree';
+import {
+ CommandIDs,
+ NotebookTreeWidget,
+ INotebookTree
+} from '@jupyter-notebook/tree';
 
 /**
  * The file browser factory.
@@ -94,6 +98,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 +209,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;

packages/tree/src/notebook-tree.ts

@@ -4,6 +4,14 @@ import { TabPanel } from '@lumino/widgets';
 
 import { INotebookTree } from './token';
 
+/**
+ * The namespace for command IDs.
+ */
+export namespace CommandIDs {
+ // The command to activate the filebrowser widget in tree view.
+ export const activate = 'filebrowser:activate';
+}
+
 /**
  * The widget added in main area of the tree view.
  */

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