From 88c5fe4caac0a879f20edc0e49f08ea1c4248e50 Mon Sep 17 00:00:00 2001
From: Jeremy Tuloup <jeremy.tuloup@gmail.com>
Date: Tue, 15 Oct 2024 16:54:45 +0000
Subject: [PATCH] Add the file filter button to the file browser toolbar

---
 packages/tree-extension/schema/widget.json |  6 ++++++
 packages/tree-extension/src/index.ts       | 24 +++++++++++++++++++---
 packages/tree-extension/style/base.css     |  9 --------
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/tree-extension/schema/widget.json b/packages/tree-extension/schema/widget.json
index e62f7c358d..60cefd4b36 100644
--- 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
index 6504f58a3f..2fb092bfa2 100644
--- 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
index da2dd64595..05aa551d4a 100644
--- 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;
 }