Add the file filter button to the file browser toolbar (jupyter#7479)

* Add the file filter button to the file browser toolbar

* update snapshot

* lower maxDiffPixels

* more updates

* update

* hide placeholder text on mobile

* update tree snapshot

Author: jtpio

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 }

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,

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;
 }
@@ -66,3 +57,7 @@
   margin: 1px;
   min-height: var(--jp-private-toolbar-height);
 }
+
+body[data-format='mobile'] #fileAction-placeholder {
+  display: none;
+}

ui-tests/test/mobile.spec.ts

@@ -36,7 +36,7 @@ test.describe('Mobile', () => {
     await page.waitForSelector('#top-panel-wrapper', { state: 'hidden' });
 
     expect(await page.screenshot()).toMatchSnapshot('tree.png', {
-      maxDiffPixels: 500,
+      maxDiffPixels: 300,
     });
   });
 

ui-tests/test/mobile.spec.ts-snapshots/tree-chromium-linux.png

@@ -34,7 +34,7 @@ test.describe('Settings', () => {
     await page.reload({ waitUntil: 'networkidle' });
     await page.menu.getMenuItem(showHeaderPath);
     expect(await page.screenshot()).toMatchSnapshot('top-hidden.png', {
-      maxDiffPixels: 500,
+      maxDiffPixels: 300,
     });
 
     await page.waitForSelector('#top-panel', { state: 'hidden' });
@@ -43,7 +43,7 @@ test.describe('Settings', () => {
     await page.reload({ waitUntil: 'networkidle' });
     await page.menu.getMenuItem(showHeaderPath);
     expect(await page.screenshot()).toMatchSnapshot('top-visible.png', {
-      maxDiffPixels: 500,
+      maxDiffPixels: 300,
     });
   });
 });