Merge pull request #83 from DenisaCG/toggleFilter

Fix toggle file filter button for drive browser

Author: DenisaCG

schema/drives-file-browser.json

@@ -24,14 +24,9 @@
       },
       {
         "name": "toggle-file-filter",
-        "command": "filebrowser:toggle-file-filter",
+        "command": "drives:toggle-file-filter",
         "label": "",
         "rank": 40
-      },
-      {
-        "name": "file-name-searcher",
-        "label": "",
-        "rank": 50
       }
     ]
   },

src/plugins/driveBrowserPlugin.ts

@@ -19,7 +19,11 @@ import {
   Dialog
 } from '@jupyterlab/apputils';
 import { ISettingRegistry } from '@jupyterlab/settingregistry';
-import { FilenameSearcher, IScore } from '@jupyterlab/ui-components';
+import {
+  filterIcon,
+  FilenameSearcher,
+  IScore
+} from '@jupyterlab/ui-components';
 import { CommandRegistry } from '@lumino/commands';
 import { Widget } from '@lumino/widgets';
 
@@ -143,7 +147,10 @@ export const driveFileBrowser: JupyterFrontEndPlugin<void> = {
       }
     );
 
-    // connect the filebrowser toolbar to the settings registry for the plugin
+    // Add commands
+    Private.addCommands(app, drive, driveBrowser);
+
+    // Connect the filebrowser toolbar to the settings registry for the plugin.
     setToolbar(
       driveBrowser,
       createToolbarFactory(
@@ -176,9 +183,6 @@ export const driveFileBrowser: JupyterFrontEndPlugin<void> = {
 
         // Listen for your plugin setting changes using Signal
         setting.changed.connect(loadSetting);
-
-        // Add commands
-        Private.addCommands(app, drive);
       })
       .catch(reason => {
         console.error(
@@ -308,7 +312,11 @@ namespace Private {
     }
   }
 
-  export function addCommands(app: JupyterFrontEnd, drive: Drive): void {
+  export function addCommands(
+    app: JupyterFrontEnd,
+    drive: Drive,
+    browser: FileBrowser
+  ): void {
     app.commands.addCommand(CommandIDs.createNewDrive, {
       execute: async () => {
         return showDialog({
@@ -337,5 +345,19 @@ namespace Private {
       selector: '#drive-file-browser.jp-SidePanel .jp-DirListing-content',
       rank: 100
     });
+
+    app.commands.addCommand(CommandIDs.toggleFileFilter, {
+      execute: () => {
+        // Update toggled state, then let the toolbar button update
+        browser.showFileFilter = !browser.showFileFilter;
+        app.commands.notifyCommandChanged(CommandIDs.toggleFileFilter);
+      },
+      isToggled: () => {
+        const toggled = browser.showFileFilter;
+        return toggled;
+      },
+      icon: filterIcon.bindprops({ stylesheet: 'menuItem' }),
+      label: 'Toggle File Filter'
+    });
   }
 }

src/token.ts

@@ -9,6 +9,7 @@ export namespace CommandIDs {
   export const toggleBrowser = 'drives:toggle-main';
   export const createNewDrive = 'drives:create-new-drive';
   export const launcher = 'launcher:create';
+  export const toggleFileFilter = 'drives:toggle-file-filter';
 }
 
 /**