Fix filebrowser model path with mouse event (#16)

* Fix filebrowser model path with mouse event

* Trigger test for all PRs

* Clean code
Correct CI

* Fix manifest

* Forget include in MANIFEST

* No tests were added

Author: fcollonval

.github/workflows/build.yml

@@ -6,21 +6,15 @@ on:
     - master
   pull_request:
     branches:
-    - master
+    - '*'
 
 defaults:
   run:
     shell: bash -l {0}
 
 jobs:
   run:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      fail-fast: false
-      matrix:
-        os: [ubuntu-latest]
-        python-version: [3.8]
+    runs-on: ubuntu-latest
 
     steps:
     - name: Checkout
@@ -29,15 +23,19 @@ jobs:
     - name: Install Mamba
       uses: mamba-org/provision-with-micromamba@main
 
-    - name: Install jupyterlab-unfold
-      run: pip install .
+    - name: Build the extension
+      run: |
+        set -eux
+        yarn
+        yarn run eslint:check
+        python -m pip install .
 
-    - name: Check installation files
+    - name: Check installation
       run: |
         test -d $CONDA_PREFIX/share/jupyter/labextensions/jupyterlab-unfold
         test -f $CONDA_PREFIX/share/jupyter/labextensions/jupyterlab-unfold/package.json
+        
+        jupyter labextension list 2>&1 | grep -ie "jupyterlab-unfold.*OK"
+        python -m jupyterlab.browser_check
 
-    - name: Lint check
-      run: |
-        yarn install
-        yarn eslint:check
+        check-manifest -v

MANIFEST.in

@@ -8,11 +8,15 @@ include install.json
 include ts*.json
 include yarn.lock
 
+include images/screenshot.png
+include environment.yml
+
 graft jupyterlab-unfold/labextension
 
 # Javascript files
 graft src
 graft style
+include schema/jupyterlab-unfold-settings.json
 prune **/node_modules
 prune lib
 prune binder

environment.yml

@@ -2,6 +2,7 @@ name: jupyterlab-unfold
 channels:
   - conda-forge
 dependencies:
+  - check-manifest
   - jupyterlab >=3.1,<4
   - yarn
   - jupyter-packaging

src/index.ts

@@ -56,7 +56,6 @@ const extension: JupyterFrontEndPlugin<IFileBrowserFactory> = {
         manager: docManager,
         driveName: options.driveName || '',
         refreshInterval: options.refreshInterval,
-        app,
         state:
           options.state === null
             ? undefined

src/unfold.ts

@@ -12,7 +12,7 @@ import { DOMUtils, showErrorMessage } from '@jupyterlab/apputils';
 
 import { JupyterFrontEnd } from '@jupyterlab/application';
 
-import { Contents, ContentsManager } from '@jupyterlab/services';
+import { Contents } from '@jupyterlab/services';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
@@ -85,21 +85,6 @@ export namespace DirTreeListing {
   }
 }
 
-/**
- * The namespace for the `FilterFileTreeBrowserModel` class statics.
- */
-export namespace FilterFileTreeBrowserModel {
-  /**
-   * An options object for initializing a file tree listing widget.
-   */
-  export interface IOptions extends FilterFileBrowserModel.IOptions {
-    /**
-     * The JupyterFrontEnd app.
-     */
-    app: JupyterFrontEnd;
-  }
-}
-
 /**
  * The namespace for the `FileTreeBrowser` class statics.
  */
@@ -161,7 +146,7 @@ export class FileTreeRenderer extends DirListing.Renderer {
   ): void {
     super.updateItemNode(node, model, fileType, translator, hiddenColumns);
 
-    if (model.type === 'directory' && this.model.isOpen(model)) {
+    if (model.type === 'directory' && this.model.isOpen(model.path)) {
       const iconContainer = DOMUtils.findElement(
         node,
         'jp-DirListing-itemIcon'
@@ -222,26 +207,6 @@ export class DirTreeListing extends DirListing {
     return this._model;
   }
 
-  protected async handleFileSelect(event: MouseEvent): Promise<void> {
-    super.handleFileSelect(event);
-    const entry = this.modelForClick(event);
-
-    if (entry) {
-      if (entry.type === 'directory') {
-        this.model.path = '/' + entry.path;
-
-        if (
-          this._singleClickToUnfold &&
-          Object.keys(this.selection).length === 1
-        ) {
-          this.model.toggle(entry.path);
-        }
-      } else {
-        this.model.path = '/' + PathExt.dirname(entry.path);
-      }
-    }
-  }
-
   private async _eventDblClick(event: MouseEvent): Promise<void> {
     const entry = this.modelForClick(event);
 
@@ -389,24 +354,56 @@ export class DirTreeListing extends DirListing {
       case 'lm-drop':
         this._eventDrop(event as IDragEvent);
         break;
+      case 'mousedown':
+        super.handleEvent(event);
+        this._changeModelPath(event as MouseEvent);
+        break;
       default:
         super.handleEvent(event);
         break;
     }
   }
 
+  /**
+   * Change the model path on each 'mousedown' event
+   *
+   * Note: This allow to change the path to the root when the user
+   * is clicking on an empty space.
+   */
+  private _changeModelPath(event: MouseEvent): void {
+    const entry = this.modelForClick(event);
+
+    if (entry) {
+      if (entry.type === 'directory') {
+        this.model.path = '/' + entry.path;
+
+        if (
+          this._singleClickToUnfold &&
+          (event.button === 0 || // State toggled on main button
+            (event.button === 2 && !this.model.isOpen(entry.path)) || // State toggled on right click if folder is closed
+            event.type === 'click') // State toggled on click and double click
+        ) {
+          this.model.toggle(entry.path);
+        }
+      } else {
+        this.model.path = '/' + PathExt.dirname(entry.path);
+      }
+    } else {
+      this.model.path = this.model.rootPath;
+    }
+  }
+
   private _singleClickToUnfold = true;
 }
 
 /**
  * Filetree browser model with optional filter on element.
  */
 export class FilterFileTreeBrowserModel extends FilterFileBrowserModel {
-  constructor(options: FilterFileTreeBrowserModel.IOptions) {
+  constructor(options: FilterFileBrowserModel.IOptions) {
     super(options);
 
-    this.app = options.app;
-    this.contentManager = this.app.serviceManager.contents;
+    this.contentManager = this.manager.services.contents;
     this.basePath = '.';
 
     this._savedState = options.state || null;
@@ -523,15 +520,15 @@ export class FilterFileTreeBrowserModel extends FilterFileBrowserModel {
   }
 
   /**
-   * Check whether a directory entry is open or not.
+   * Check whether a directory path is opened or not.
    *
-   * @param model - The given entry.
+   * @param path - The given path
    *
-   * @returns Whether the directory is open or not.
+   * @returns Whether the directory is opened or not.
    *
    */
-  isOpen(model: Contents.IModel): boolean {
-    return !!this.openState[model.path];
+  isOpen(path: string): boolean {
+    return !!this.openState[path];
   }
 
   private async fetchContent(
@@ -555,7 +552,7 @@ export class FilterFileTreeBrowserModel extends FilterFileBrowserModel {
 
       const isOpen =
         (pathToUpdate && pathToUpdate.startsWith('/' + entry.path)) ||
-        this.isOpen(entry);
+        this.isOpen(entry.path);
 
       if (isOpen) {
         const subEntryContent = await this.fetchContent(
@@ -602,8 +599,7 @@ export class FilterFileTreeBrowserModel extends FilterFileBrowserModel {
   private _stateKey: string | null = null;
   private _path = '.';
   private basePath: string;
-  private contentManager: ContentsManager;
-  private app: JupyterFrontEnd;
+  private contentManager: Contents.IManager;
   private openState: { [path: string]: boolean } = {};
 }