Make file browser respond to focussed elements

packages/filebrowser-extension/schema/browser.json

@@ -136,6 +136,11 @@
   "title": "File Browser",
   "description": "File Browser settings.",
   "jupyter.lab.shortcuts": [
+    {
+      "command": "filebrowser:go-up",
+      "keys": ["Backspace"],
+      "selector": ".jp-DirListing:focus"
+    },
     {
       "command": "filebrowser:go-up",
       "keys": ["Backspace"],

packages/filebrowser-extension/src/index.ts

@@ -375,6 +375,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
@@ -986,19 +991,8 @@ function addCommands(
         return;
       }
       const { model } = browserForPath;
-
       await model.restored;
-      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
-        );
-      }
+      void browserForPath.goUp();
     }
   });
 
@@ -1181,6 +1175,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
@@ -1200,8 +1199,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

@@ -69,8 +69,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);
@@ -226,63 +224,57 @@ export class FileBrowser extends SidePanel {
     return this.listing.paste();
   }
 
+  private async _createNew(
+    options: Contents.ICreateOptions
+  ): Promise<Contents.IModel> {
+    try {
+      const model = await this._manager.newUntitled(options);
+      await this.listing.selectItemByName(model.name, true);
+      await this.rename();
+      return model;
+    } catch (err) {
+      void showErrorMessage(this._trans.__('Error'), err);
+      throw err;
+    }
+  }
+
   /**
    * Create a new directory
    */
-  createNewDirectory(): void {
-    if (this._directoryPending === true) {
-      return;
+  async createNewDirectory(): Promise<Contents.IModel> {
+    if (this._directoryPending) {
+      return this._directoryPending;
+    }
+    this._directoryPending = this._createNew({
+      path: this.model.path,
+      type: 'directory'
+    });
+    try {
+      return await this._directoryPending;
+    } finally {
+      this._directoryPending = null;
     }
-    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);
-        await this.rename();
-        this._directoryPending = false;
-      })
-      .catch(err => {
-        void showErrorMessage(this._trans.__('Error'), err);
-        this._directoryPending = false;
-      });
   }
 
   /**
    * Create a new file
    */
-  createNewFile(options: FileBrowser.IFileOptions): void {
-    if (this._filePending === true) {
-      return;
+  async createNewFile(
+    options: FileBrowser.IFileOptions
+  ): Promise<Contents.IModel> {
+    if (this._filePending) {
+      return this._filePending;
+    }
+    this._filePending = this._createNew({
+      path: this.model.path,
+      type: 'file',
+      ext: options.ext
+    });
+    try {
+      return await this._filePending;
+    } finally {
+      this._filePending = null;
     }
-    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;
-      });
   }
 
   /**
@@ -310,6 +302,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.
    *
@@ -382,8 +383,8 @@ export class FileBrowser extends SidePanel {
   protected mainPanel: Panel;
 
   private _manager: IDocumentManager;
-  private _directoryPending: boolean;
-  private _filePending: boolean;
+  private _directoryPending: Promise<Contents.IModel> | null = null;
+  private _filePending: Promise<Contents.IModel> | null = null;
   private _navigateToCurrentDirectory: boolean;
   private _showLastModifiedColumn: boolean = true;
   private _showFileSizeColumn: boolean = false;