add drive browser toolbar

Author: DenisaCG

schema/drives-file-browser.json

@@ -0,0 +1,98 @@
+{
+  "title": "Jupyter Drives Settings",
+  "description": "jupyter-drives settings.",
+  "jupyter.lab.toolbars": {
+    "DriveBrowser": [
+      {
+        "name": "new-launcher",
+        "command": "launcher:create",
+        "rank": 1
+      },
+      {
+        "name": "new-directory",
+        "command": "filebrowser:create-new-directory",
+        "rank": 10
+      },
+      { "name": "uploader", "rank": 20 },
+      { "name": "refresh", "command": "filebrowser:refresh", "rank": 30 },
+      {
+        "name": "toggle-file-filter",
+        "command": "filebrowser:toggle-file-filter",
+        "rank": 40
+      },
+      {
+        "name": "file-name-searcher",
+        "rank": 50
+      }
+    ]
+  },
+  "jupyter.lab.setting-icon": "@jupyter/drives:drive-browser",
+  "jupyter.lab.setting-icon-label": "Drive Browser",
+  "type": "object",
+  "jupyter.lab.transform": true,
+  "properties": {
+    "toolbar": {
+      "title": "Drive browser toolbar items",
+      "description": "Note: To disable a toolbar item,\ncopy it to User Preferences and add the\n\"disabled\" key.",
+      "items": {
+        "$ref": "#/definitions/toolbarItem"
+      },
+      "type": "array",
+      "default": []
+    }
+  },
+  "additionalProperties": false,
+  "definitions": {
+    "toolbarItem": {
+      "properties": {
+        "name": {
+          "title": "Unique name",
+          "type": "string"
+        },
+        "args": {
+          "title": "Command arguments",
+          "type": "object"
+        },
+        "command": {
+          "title": "Command id",
+          "type": "string",
+          "default": ""
+        },
+        "disabled": {
+          "title": "Whether the item is ignored or not",
+          "type": "boolean",
+          "default": false
+        },
+        "icon": {
+          "title": "Item icon id",
+          "description": "If defined, it will override the command icon",
+          "type": "string"
+        },
+        "label": {
+          "title": "Item label",
+          "description": "If defined, it will override the command label",
+          "type": "string"
+        },
+        "caption": {
+          "title": "Item caption",
+          "description": "If defined, it will override the command caption",
+          "type": "string"
+        },
+        "type": {
+          "title": "Item type",
+          "type": "string",
+          "enum": ["command", "spacer"]
+        },
+        "rank": {
+          "title": "Item rank",
+          "type": "number",
+          "minimum": 0,
+          "default": 50
+        }
+      },
+      "required": ["name"],
+      "additionalProperties": false,
+      "type": "object"
+    }
+  }
+}

src/index.ts

@@ -5,10 +5,22 @@ import {
   JupyterFrontEnd,
   JupyterFrontEndPlugin
 } from '@jupyterlab/application';
-import { IFileBrowserFactory, FileBrowser } from '@jupyterlab/filebrowser';
+import {
+  IFileBrowserFactory,
+  FileBrowser,
+  Uploader
+} from '@jupyterlab/filebrowser';
 import { ITranslator } from '@jupyterlab/translation';
 import { addJupyterLabThemeChangeListener } from '@jupyter/web-components';
-import { Dialog, showDialog } from '@jupyterlab/apputils';
+import {
+  createToolbarFactory,
+  IToolbarWidgetRegistry,
+  setToolbar,
+  Dialog,
+  showDialog
+} from '@jupyterlab/apputils';
+import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { FilenameSearcher, IScore } from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Panel } from '@lumino/widgets';
 
@@ -25,6 +37,16 @@ namespace CommandIDs {
   export const toggleBrowser = 'drives:toggle-main';
 }
 
+/**
+ * The file browser factory ID.
+ */
+const FILE_BROWSER_FACTORY = 'DriveBrowser';
+
+/**
+ * The class name added to the  drive filebrowser filterbox node.
+ */
+const FILTERBOX_CLASS = 'jp-DriveBrowser-filterBox';
+
 const openDriveDialogPlugin: JupyterFrontEndPlugin<void> = {
   id: '@jupyter/drives:widget',
   description: 'Open a dialog to select drives to be added in the filebrowser.',
@@ -136,7 +158,12 @@ const driveFileBrowser: JupyterFrontEndPlugin<void> = {
   id: '@jupyter/drives:drives-file-browser',
   description: 'The drive file browser factory provider.',
   autoStart: true,
-  requires: [IFileBrowserFactory],
+  requires: [
+    IFileBrowserFactory,
+    IToolbarWidgetRegistry,
+    ISettingRegistry,
+    ITranslator
+  ],
   optional: [
     IRouter,
     JupyterFrontEnd.ITreeResolver,
@@ -146,6 +173,9 @@ const driveFileBrowser: JupyterFrontEndPlugin<void> = {
   activate: async (
     app: JupyterFrontEnd,
     fileBrowserFactory: IFileBrowserFactory,
+    toolbarRegistry: IToolbarWidgetRegistry,
+    settingsRegistry: ISettingRegistry,
+    translator: ITranslator,
     router: IRouter | null,
     tree: JupyterFrontEnd.ITreeResolver | null,
     labShell: ILabShell | null,
@@ -170,15 +200,15 @@ const driveFileBrowser: JupyterFrontEndPlugin<void> = {
       driveName: drive.name
     });
 
-    // // Set attributes when adding the browser to the UI
+    // Set attributes when adding the browser to the UI
     driveBrowser.node.setAttribute('role', 'region');
     driveBrowser.node.setAttribute('aria-label', 'Drive Browser Section');
 
     // instate Drive Browser Panel
     const drivePanel = new Panel();
     drivePanel.title.icon = driveBrowserIcon;
     drivePanel.title.iconClass = 'jp-sideBar-tabIcon';
-    drivePanel.title.caption = 'Drive FileBrowser';
+    drivePanel.title.caption = 'Drive File Browser';
     drivePanel.id = 'Drive-Browser-Panel';
 
     app.shell.add(drivePanel, 'left', { rank: 102 });
@@ -188,6 +218,47 @@ const driveFileBrowser: JupyterFrontEndPlugin<void> = {
     }
 
     void Private.restoreBrowser(driveBrowser, commands, router, tree, labShell);
+
+    toolbarRegistry.addFactory(
+      FILE_BROWSER_FACTORY,
+      'uploader',
+      (fileBrowser: FileBrowser) =>
+        new Uploader({ model: fileBrowser.model, translator })
+    );
+
+    toolbarRegistry.addFactory(
+      FILE_BROWSER_FACTORY,
+      'file-name-searcher',
+      (fileBrowser: FileBrowser) => {
+        const searcher = FilenameSearcher({
+          updateFilter: (
+            filterFn: (item: string) => Partial<IScore> | null,
+            query?: string
+          ) => {
+            fileBrowser.model.setFilter(value => {
+              return filterFn(value.name.toLowerCase());
+            });
+          },
+          useFuzzyFilter: true,
+          placeholder: 'Filter files by names',
+          forceRefresh: true
+        });
+        searcher.addClass(FILTERBOX_CLASS);
+        return searcher;
+      }
+    );
+
+    // connect the filebrowser toolbar to the settings registry for the plugin
+    setToolbar(
+      driveBrowser,
+      createToolbarFactory(
+        toolbarRegistry,
+        settingsRegistry,
+        FILE_BROWSER_FACTORY,
+        driveFileBrowser.id,
+        translator
+      )
+    );
   }
 };