Move handling of the file browser settings to a separate plugin, enable file browser single click navigation (#7481)

* Move handling of the file browser settings to a separate plugin

* fix typo

* optional settingregistry

* remove upstream filebrowser plugin

* fix file actions buttons

* hold ctrl

* update changelog

* wording

* remove console.log

* fix comments

Author: jtpio

CHANGELOG.md

@@ -40,11 +40,13 @@ The file browser now:
 
 - supports resizing the columns and remembers the column sizes after reloading JupyterLab
 - supports uploading folders by drag-and-drop
-- supports navigation with a single click (opt-in)
+- supports navigation with a single click
 - adds a file filter collapsed by default (funnel icon)
 
 ![a screenshot showing that it's now possible to resize the file browser columns](https://github.com/user-attachments/assets/b0d9cd0a-2828-43f7-a922-e8b271e5f7fc)
 
+In Jupyter Notebook, the single click navigation is enabled by default. If you would like to disable it to get the same experience as in JupyterLab, go to `Settings → File Browser` and make sure "Navigate files and directories with single click" is unchecked.
+
 ### Improved kernel and server interactions
 
 The previous release enabled connecting to external kernels, such as those spawned by a third-party application like Blender. In this release the kernel selector dialog was improved to also show the external kernels.

app/package.json

@@ -310,7 +310,6 @@
           "@jupyterlab/filebrowser-extension:file-upload-status",
           "@jupyterlab/filebrowser-extension:open-with",
           "@jupyterlab/filebrowser-extension:search",
-          "@jupyterlab/filebrowser-extension:settings",
           "@jupyterlab/filebrowser-extension:share-file"
         ],
         "@jupyter-notebook/tree-extension": true,

packages/tree-extension/src/index.ts

@@ -170,6 +170,9 @@ const fileActions: JupyterFrontEndPlugin<void> = {
         selectionChanged.emit(void 0);
       };
     });
+    browser.model.pathChanged.connect(() => {
+      selectionChanged.emit(void 0);
+    });
 
     // Create a toolbar item that adds buttons to the file browser toolbar
     // to perform actions on the files
@@ -186,6 +189,58 @@ const fileActions: JupyterFrontEndPlugin<void> = {
   },
 };
 
+/**
+ * A plugin to set the default file browser settings.
+ */
+const fileBrowserSettings: JupyterFrontEndPlugin<void> = {
+  id: '@jupyter-notebook/tree-extension:settings',
+  description: 'Set up the default file browser settings',
+  requires: [IDefaultFileBrowser],
+  optional: [ISettingRegistry],
+  autoStart: true,
+  activate: (
+    app: JupyterFrontEnd,
+    browser: IDefaultFileBrowser,
+    settingRegistry: ISettingRegistry | null
+  ) => {
+    // Default config for notebook.
+    // This is a different set of defaults than JupyterLab.
+    const defaultFileBrowserConfig = {
+      navigateToCurrentDirectory: false,
+      singleClickNavigation: true,
+      showLastModifiedColumn: true,
+      showFileSizeColumn: true,
+      showHiddenFiles: false,
+      showFileCheckboxes: true,
+      sortNotebooksFirst: true,
+      showFullPath: false,
+    };
+
+    // Apply defaults on plugin activation
+    let key: keyof typeof defaultFileBrowserConfig;
+    for (key in defaultFileBrowserConfig) {
+      browser[key] = defaultFileBrowserConfig[key];
+    }
+
+    if (settingRegistry) {
+      void settingRegistry.load(FILE_BROWSER_PLUGIN_ID).then((settings) => {
+        function onSettingsChanged(settings: ISettingRegistry.ISettings): void {
+          let key: keyof typeof defaultFileBrowserConfig;
+          for (key in defaultFileBrowserConfig) {
+            const value = settings.get(key).user as boolean;
+            // only set the setting if it is defined by the user
+            if (value !== undefined) {
+              browser[key] = value;
+            }
+          }
+        }
+        settings.changed.connect(onSettingsChanged);
+        onSettingsChanged(settings);
+      });
+    }
+  },
+};
+
 /**
  * A plugin to add the file filter toggle command to the palette
  */
@@ -360,25 +415,6 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
       nbTreeWidget.tabBar.addTab(running.title);
     }
 
-    const settings = settingRegistry.load(FILE_BROWSER_PLUGIN_ID);
-    Promise.all([settings, app.restored])
-      .then(([settings]) => {
-        // Set Notebook 7 defaults if there is no user setting override
-        [
-          'showFileCheckboxes',
-          'showFileSizeColumn',
-          'sortNotebooksFirst',
-          'showFullPath',
-        ].forEach((setting) => {
-          if (settings.user[setting] === undefined) {
-            void settings.set(setting, true);
-          }
-        });
-      })
-      .catch((reason: Error) => {
-        console.error(reason.message);
-      });
-
     app.shell.add(nbTreeWidget, 'main', { rank: 100 });
 
     // add a separate tab for each setting editor
@@ -419,6 +455,7 @@ const notebookTreeWidget: JupyterFrontEndPlugin<INotebookTree> = {
 const plugins: JupyterFrontEndPlugin<any>[] = [
   createNew,
   fileActions,
+  fileBrowserSettings,
   fileFilterCommand,
   loadPlugins,
   openFileBrowser,

ui-tests/test/filebrowser.spec.ts

@@ -20,6 +20,7 @@ test.describe('File Browser', () => {
   test('Select one folder', async ({ page, tmpPath }) => {
     await page.filebrowser.refresh();
 
+    await page.keyboard.down('Control');
     await page.getByText('folder1').last().click();
 
     const toolbar = page.getByRole('toolbar');
@@ -31,6 +32,7 @@ test.describe('File Browser', () => {
   test('Select one file', async ({ page, tmpPath }) => {
     await page.filebrowser.refresh();
 
+    await page.keyboard.down('Control');
     await page.getByText('empty.ipynb').last().click();
 
     const toolbar = page.getByRole('toolbar');