Make file browser respond to focussed elements

Author: gabalafou

packages/filebrowser-extension/schema/browser.json

@@ -157,11 +157,6 @@
       "keys": ["Accel Shift F"],
       "selector": "body"
     },
-    {
-      "command": "filebrowser:go-up",
-      "keys": ["Backspace"],
-      "selector": ".jp-DirListing-content .jp-DirListing-itemText"
-    },
     {
       "command": "filebrowser:delete",
       "keys": ["Delete"],

packages/filebrowser-extension/src/index.ts

@@ -365,6 +365,11 @@ const downloadPlugin: JupyterFrontEndPlugin<void> = {
             Clipboard.copyToSystem(url);
           });
       },
+      isVisible: () =>
+        // So long as this command only handles one file at time, don't show it
+        // if multiple files are selected.
+        !!tracker.currentWidget &&
+        Array.from(tracker.currentWidget.selectedItems()).length === 1,
       icon: copyIcon.bindprops({ stylesheet: 'menuItem' }),
       label: trans.__('Copy Download Link'),
       mnemonic: 0
@@ -890,14 +895,8 @@ function addCommands(
       if (model.path === model.rootPath) {
         return;
       }
-      try {
-        await model.cd('..');
-      } catch (reason) {
-        console.warn(
-          `${CommandIDs.goUp} failed to go to parent directory of ${model.path}`,
-          reason
-        );
-      }
+
+      browserForPath.goUp();
     }
   });
 
@@ -1076,6 +1075,11 @@ function addCommands(
         return widget.rename();
       }
     },
+    isVisible: () =>
+      // So long as this command only handles one file at time, don't show it
+      // if multiple files are selected.
+      !!tracker.currentWidget &&
+      Array.from(tracker.currentWidget.selectedItems()).length === 1,
     icon: editIcon.bindprops({ stylesheet: 'menuItem' }),
     label: trans.__('Rename'),
     mnemonic: 0
@@ -1095,8 +1099,10 @@ function addCommands(
       Clipboard.copyToSystem(item.value.path);
     },
     isVisible: () =>
+      // So long as this command only handles one file at time, don't show it
+      // if multiple files are selected.
       !!tracker.currentWidget &&
-      !tracker.currentWidget.selectedItems().next().done,
+      Array.from(tracker.currentWidget.selectedItems()).length === 1,
     icon: fileIcon.bindprops({ stylesheet: 'menuItem' }),
     label: trans.__('Copy Path')
   });

packages/filebrowser/src/browser.ts

@@ -79,8 +79,6 @@ export class FileBrowser extends SidePanel {
       this._trans.__('file browser')
     );
 
-    this._directoryPending = false;
-
     // File browser widgets container
     this.mainPanel = new Panel();
     this.mainPanel.addClass(FILE_BROWSER_PANEL_CLASS);
@@ -263,63 +261,52 @@ export class FileBrowser extends SidePanel {
     return this.listing.paste();
   }
 
-  /**
-   * Create a new directory
-   */
-  createNewDirectory(): void {
-    if (this._directoryPending === true) {
-      return;
+  private _createNew(
+    future: Private.FutureNewDirectoryItem,
+    createOptions: Contents.ICreateOptions
+  ): Promise<Contents.IModel> {
+    if (future.pending === true) {
+      return future.promise;
     }
-    this._directoryPending = true;
-    // TODO: We should provide a hook into when the
-    // directory is done being created. This probably
-    // means storing a pendingDirectory promise and
-    // returning that if there is already a directory
-    // request.
-    void this._manager
-      .newUntitled({
-        path: this.model.path,
-        type: 'directory'
-      })
-      .then(async model => {
-        await this.listing.selectItemByName(model.name);
+    const newItem = {
+      pending: true,
+      promise: this._manager.newUntitled(createOptions).then(async model => {
+        await this.listing.selectItemByName(model.name, true);
         await this.rename();
-        this._directoryPending = false;
+        return model;
       })
+    };
+    Object.assign(future, newItem);
+    const { promise } = newItem;
+    promise
       .catch(err => {
         void showErrorMessage(this._trans.__('Error'), err);
-        this._directoryPending = false;
+      })
+      .finally(() => {
+        future.pending = false;
       });
+    return promise;
+  }
+
+  /**
+   * Create a new directory
+   */
+  createNewDirectory(): Promise<Contents.IModel> {
+    return this._createNew(this._futureNewDirectory, {
+      path: this.model.path,
+      type: 'directory'
+    });
   }
 
   /**
    * Create a new file
    */
-  createNewFile(options: FileBrowser.IFileOptions): void {
-    if (this._filePending === true) {
-      return;
-    }
-    this._filePending = true;
-    // TODO: We should provide a hook into when the
-    // file is done being created. This probably
-    // means storing a pendingFile promise and
-    // returning that if there is already a file
-    // request.
-    void this._manager
-      .newUntitled({
-        path: this.model.path,
-        type: 'file',
-        ext: options.ext
-      })
-      .then(async model => {
-        await this.listing.selectItemByName(model.name);
-        await this.rename();
-        this._filePending = false;
-      })
-      .catch(err => {
-        void showErrorMessage(this._trans.__('Error'), err);
-        this._filePending = false;
-      });
+  createNewFile(options: FileBrowser.IFileOptions): Promise<Contents.IModel> {
+    return this._createNew(this._futureNewFile, {
+      path: this.model.path,
+      type: 'file',
+      ext: options.ext
+    });
   }
 
   /**
@@ -347,6 +334,15 @@ export class FileBrowser extends SidePanel {
     return this.listing.download();
   }
 
+  /**
+   * cd ..
+   *
+   * Go up one level in the directory tree.
+   */
+  async goUp() {
+    return this.listing.goUp();
+  }
+
   /**
    * Shut down kernels on the applicable currently selected items.
    *
@@ -420,8 +416,14 @@ export class FileBrowser extends SidePanel {
 
   private _filenameSearcher: ReactWidget;
   private _manager: IDocumentManager;
-  private _directoryPending: boolean;
-  private _filePending: boolean;
+  private _futureNewDirectory: Private.FutureNewDirectoryItem = {
+    pending: false,
+    promise: null
+  };
+  private _futureNewFile: Private.FutureNewDirectoryItem = {
+    pending: false,
+    promise: null
+  };
   private _navigateToCurrentDirectory: boolean;
   private _showLastModifiedColumn: boolean = true;
   private _useFuzzyFilter: boolean = true;
@@ -480,3 +482,21 @@ export namespace FileBrowser {
     ext: string;
   }
 }
+
+namespace Private {
+  /**
+   * A special type with the following properties:
+   * - When `pending` is `true`, the `promise` field points to a promise for a
+   *   new directory or file.
+   * - When `pending` is `false`, the `promise` field has no guarantee.
+   */
+  export type FutureNewDirectoryItem =
+    | {
+        pending: true;
+        promise: Promise<Contents.IModel>;
+      }
+    | {
+        pending: false;
+        promise: any;
+      };
+}