Add the file filter button to the file browser toolbar

jupyter · Oct 15, 2024 · 88c5fe4 · 88c5fe4
1 parent faee9e4
commit 88c5fe4
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 12 deletions.
diff --git a/packages/tree-extension/schema/widget.json b/packages/tree-extension/schema/widget.json
@@ -4,6 +4,12 @@
   "jupyter.lab.toolbars": {
     "FileBrowser": [
       { "name": "spacer", "type": "spacer", "rank": 900 },
+      {
+        "name": "toggle-file-filter",
+        "label": "",
+        "command": "filebrowser:toggle-file-filter",
+        "rank": 990
+      },
       { "name": "new-dropdown", "rank": 1000 },
       { "name": "uploader", "rank": 1010 },
       { "name": "refresh", "command": "filebrowser:refresh", "rank": 1020 }

diff --git a/packages/tree-extension/src/index.ts b/packages/tree-extension/src/index.ts
@@ -7,6 +7,7 @@ import {
 } from '@jupyterlab/application';
 
 import {
+  ICommandPalette,
   IToolbarWidgetRegistry,
   createToolbarFactory,
   setToolbar,
@@ -45,7 +46,6 @@ import { Menu, MenuBar } from '@lumino/widgets';
 import { NotebookTreeWidget, INotebookTree } from '@jupyter-notebook/tree';
 
 import { FilesActionButtons } from './fileactions';
-import { IStateDB } from '@jupyterlab/statedb';
 
 /**
  * The file browser factory.
@@ -64,6 +64,7 @@ namespace CommandIDs {
   // The command to activate the filebrowser widget in tree view.
   export const activate = 'filebrowser:activate';
 
+  // Activate the file filter in the file browser
   export const toggleFileFilter = 'filebrowser:toggle-file-filter';
 }
 
@@ -185,6 +186,24 @@ const fileActions: JupyterFrontEndPlugin<void> = {
   },
 };
 
+/**
+ * A plugin to add the file filter toggle command to the palette
+ */
+const fileFilterCommand: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-notebook/tree-extension:file-filter-command',
+  description: 'A plugin to add file filter command to the palette.',
+  autoStart: true,
+  optional: [ICommandPalette],
+  activate: (app: JupyterFrontEnd, palette: ICommandPalette | null) => {
+    if (palette) {
+      palette.addItem({
+        command: CommandIDs.toggleFileFilter,
+        category: 'File Browser',
+      });
+    }
+  },
+};
+
 /**
  * Plugin to load the default plugins that are loaded on all the Notebook pages
  * (tree, edit, view, etc.) so they are visible in the settings editor.
@@ -278,7 +297,6 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
     ISettingRegistry,
     IToolbarWidgetRegistry,
     IFileBrowserFactory,
-    IStateDB,
   ],
   optional: [
     IRunningSessionManagers,
@@ -294,7 +312,6 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
     settingRegistry: ISettingRegistry,
     toolbarRegistry: IToolbarWidgetRegistry,
     factory: IFileBrowserFactory,
-    stateDB: IStateDB,
     manager: IRunningSessionManagers | null,
     settingEditorTracker: ISettingEditorTracker | null,
     jsonSettingEditorTracker: IJSONSettingEditorTracker | null
@@ -402,6 +419,7 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
 const plugins: JupyterFrontEndPlugin<any>[] = [
   createNew,
   fileActions,
+  fileFilterCommand,
   loadPlugins,
   openFileBrowser,
   notebookTreeWidget,

diff --git a/packages/tree-extension/style/base.css b/packages/tree-extension/style/base.css
@@ -32,15 +32,6 @@
   background: inherit;
 }
 
-.jp-FileBrowser-filterBox {
-  padding: 0;
-  flex: 0 0 auto;
-}
-
-.jp-FileBrowser-filterBox input {
-  line-height: 24px;
-}
-
 .jp-DirListing-content .jp-DirListing-checkboxWrapper {
   visibility: visible;
 }