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