Merge pull request #85 from DenisaCG/driveBrowserToolbar

Update drive browser commands visbility

Author: DenisaCG

schema/drives-file-browser.json

@@ -11,8 +11,7 @@
       },
       {
         "name": "new-directory",
-        "command": "filebrowser:create-new-directory",
-        "label": "",
+        "command": "drives:create-new-directory",
         "rank": 10
       },
       { "name": "uploader", "label": "", "rank": 20 },
@@ -32,7 +31,46 @@
         "name": "new-drive",
         "command": "drives:create-new-drive",
         "label": "",
-        "rank": 50
+        "rank": 5
+      }
+    ]
+  },
+  "jupyter.lab.menus": {
+    "context": [
+      {
+        "command": "filebrowser:create-new-file",
+        "selector": ".jp-DirListing-content",
+        "rank": 51,
+        "disabled": true
+      },
+      {
+        "command": "drives:create-new-file",
+        "selector": ".jp-DirListing-content",
+        "rank": 51
+      },
+      {
+        "command": "filebrowser:create-new-directory",
+        "selector": ".jp-DirListing-content",
+        "rank": 55,
+        "disabled": true
+      },
+      {
+        "command": "drives:create-new-directory",
+        "selector": ".jp-DirListing-content",
+        "rank": 55
+      },
+      {
+        "command": "notebook:create-new",
+        "selector": ".jp-DirListing-content",
+        "args": {
+          "isContextMenu": true
+        },
+        "disabled": true
+      },
+      {
+        "command": "drives:create-new-notebook",
+        "selector": ".jp-DirListing-content",
+        "rank": 54
       }
     ]
   },

src/plugins/driveBrowserPlugin.ts

@@ -22,7 +22,10 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 import {
   filterIcon,
   FilenameSearcher,
-  IScore
+  IScore,
+  newFolderIcon,
+  fileIcon,
+  notebookIcon
 } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
@@ -110,6 +113,7 @@ export const driveFileBrowser: JupyterFrontEndPlugin<void> = {
     driveBrowser.title.icon = driveBrowserIcon;
     driveBrowser.title.caption = 'Drive File Browser';
     driveBrowser.id = 'drive-file-browser';
+    driveBrowser.addClass('drive-browser');
 
     void Private.restoreBrowser(driveBrowser, commands, router, tree, labShell);
 
@@ -118,12 +122,10 @@ export const driveFileBrowser: JupyterFrontEndPlugin<void> = {
       restorer.add(driveBrowser, 'drive-file-browser');
     }
 
-    toolbarRegistry.addFactory(
-      FILE_BROWSER_FACTORY,
-      'uploader',
-      (fileBrowser: FileBrowser) =>
-        new Uploader({ model: fileBrowser.model, translator })
-    );
+    const uploader = new Uploader({ model: driveBrowser.model, translator });
+    toolbarRegistry.addFactory(FILE_BROWSER_FACTORY, 'uploader', () => {
+      return uploader;
+    });
 
     toolbarRegistry.addFactory(
       FILE_BROWSER_FACTORY,
@@ -147,16 +149,24 @@ export const driveFileBrowser: JupyterFrontEndPlugin<void> = {
       }
     );
 
+    // Add commands
+    Private.addCommands(app, drive, driveBrowser);
+
     const updateVisibility = () => {
-      // Visibility of command changed.
+      // Visibility of context menu and toolbar commands changed.
+      if (driveBrowser.model.path !== 's3:') {
+        uploader.enabled = true;
+      } else {
+        uploader.enabled = false;
+      }
       app.commands.notifyCommandChanged(CommandIDs.createNewDrive);
+      app.commands.notifyCommandChanged(CommandIDs.createNewDirectory);
+      app.commands.notifyCommandChanged(CommandIDs.launcher);
     };
 
     // Listen for path changes.
     driveBrowser.model.pathChanged.connect(updateVisibility);
-
-    // Add commands
-    Private.addCommands(app, drive, driveBrowser);
+    updateVisibility();
 
     // Connect the filebrowser toolbar to the settings registry for the plugin.
     setToolbar(
@@ -326,7 +336,7 @@ namespace Private {
     browser: FileBrowser
   ): void {
     app.commands.addCommand(CommandIDs.createNewDrive, {
-      isVisible: () => {
+      isEnabled: () => {
         return browser.model.path === 's3:';
       },
       execute: async () => {
@@ -354,7 +364,7 @@ namespace Private {
     app.contextMenu.addItem({
       command: CommandIDs.createNewDrive,
       selector: '#drive-file-browser.jp-SidePanel .jp-DirListing-content',
-      rank: 100
+      rank: 105
     });
 
     app.commands.addCommand(CommandIDs.toggleFileFilter, {
@@ -370,5 +380,38 @@ namespace Private {
       icon: filterIcon.bindprops({ stylesheet: 'menuItem' }),
       label: 'Toggle File Filter'
     });
+
+    app.commands.addCommand(CommandIDs.createNewDirectory, {
+      isEnabled: () => {
+        return browser.model.path !== 's3:';
+      },
+      execute: () => {
+        app.commands.execute('filebrowser:create-new-directory');
+      },
+      icon: newFolderIcon.bindprops({ stylesheet: 'menuItem' }),
+      label: 'New Folder'
+    });
+
+    app.commands.addCommand(CommandIDs.createNewFile, {
+      isEnabled: () => {
+        return browser.model.path !== 's3:';
+      },
+      execute: () => {
+        app.commands.execute('filebrowser:create-new-file');
+      },
+      icon: fileIcon.bindprops({ stylesheet: 'menuItem' }),
+      label: 'New File'
+    });
+
+    app.commands.addCommand(CommandIDs.createNewNotebook, {
+      isEnabled: () => {
+        return browser.model.path !== 's3:';
+      },
+      execute: () => {
+        app.commands.execute('notebook:create-new');
+      },
+      icon: notebookIcon.bindprops({ stylesheet: 'menuItem' }),
+      label: 'New Notebook'
+    });
   }
 }

src/plugins/launcherPlugin.ts

@@ -44,6 +44,10 @@ function activate(
   commands.addCommand(CommandIDs.launcher, {
     label: trans.__('New Launcher'),
     icon: args => (args.toolbar ? addIcon : undefined),
+    isEnabled: () => {
+      const currentBrowser = factory?.tracker.currentWidget;
+      return currentBrowser?.model.path !== 's3:';
+    },
     execute: (args: ReadonlyPartialJSONObject) => {
       // get current file browser used
       const currentBrowser = factory?.tracker.currentWidget;

src/token.ts

@@ -10,6 +10,9 @@ export namespace CommandIDs {
   export const createNewDrive = 'drives:create-new-drive';
   export const launcher = 'launcher:create';
   export const toggleFileFilter = 'drives:toggle-file-filter';
+  export const createNewDirectory = 'drives:create-new-directory';
+  export const createNewFile = 'drives:create-new-file';
+  export const createNewNotebook = 'drives:create-new-notebook';
 }
 
 /**

style/base.css

@@ -3,6 +3,10 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+.drive-browser {
+  min-width: 285px !important;
+}
+
 li {
   list-style-type: none;
 }