Add checkboxes to file browser

packages/filebrowser-extension/schema/browser.json

@@ -126,10 +126,15 @@
         "selector": ".jp-DirListing-header",
         "rank": 14
       },
+      {
+        "command": "filebrowser:toggle-file-checkboxes",
+        "selector": ".jp-DirListing-header",
+        "rank": 15
+      },
       {
         "command": "filebrowser:share-main",
         "selector": ".jp-DirListing-item[data-isdir]",
-        "rank": 15
+        "rank": 16
       },
       {
         "type": "separator",
@@ -227,6 +232,12 @@
       "title": "Show hidden files",
       "description": "Whether to show hidden files. The server parameter `ContentsManager.allow_hidden` must be set to `True` to display hidden files.",
       "default": false
+    },
+    "showFileCheckboxes": {
+      "type": "boolean",
+      "title": "Use checkboxes to select items",
+      "description": "Whether to show checkboxes next to files and folders",
+      "default": false
     }
   },
   "additionalProperties": false,

packages/filebrowser-extension/src/index.ts

@@ -65,6 +65,7 @@ import { ContextMenu } from '@lumino/widgets';
 import { JSONObject } from '@lumino/coreutils';
 
 const FILE_BROWSER_FACTORY = 'FileBrowser';
+const FILE_BROWSER_PLUGIN_ID = '@jupyterlab/filebrowser-extension:browser';
 
 /**
  * The command IDs used by the file browser plugin.
@@ -133,6 +134,8 @@ namespace CommandIDs {
   export const search = 'filebrowser:search';
 
   export const toggleHiddenFiles = 'filebrowser:toggle-hidden-files';
+
+  export const toggleFileCheckboxes = 'filebrowser:toggle-file-checkboxes';
 }
 
 /**
@@ -144,7 +147,7 @@ const namespace = 'filebrowser';
  * The default file browser extension.
  */
 const browser: JupyterFrontEndPlugin<void> = {
-  id: '@jupyterlab/filebrowser-extension:browser',
+  id: FILE_BROWSER_PLUGIN_ID,
   requires: [IFileBrowserFactory, ITranslator],
   optional: [
     ILayoutRestorer,
@@ -210,41 +213,39 @@ const browser: JupyterFrontEndPlugin<void> = {
       }
 
       if (settingRegistry) {
-        void settingRegistry
-          .load('@jupyterlab/filebrowser-extension:browser')
-          .then(settings => {
-            /**
-             * File browser configuration.
-             */
-            const fileBrowserConfig = {
-              navigateToCurrentDirectory: false,
-              showLastModifiedColumn: true,
-              useFuzzyFilter: true,
-              showHiddenFiles: false
-            };
-            const fileBrowserModelConfig = {
-              filterDirectories: true
-            };
-
-            function onSettingsChanged(
-              settings: ISettingRegistry.ISettings
-            ): void {
-              for (const key in fileBrowserConfig) {
-                const value = settings.get(key).composite as boolean;
-                fileBrowserConfig[
-                  key as keyof typeof fileBrowserConfig
-                ] = value;
-                browser[key as keyof typeof fileBrowserConfig] = value;
-              }
-
-              const value = settings.get('filterDirectories')
-                .composite as boolean;
-              fileBrowserModelConfig.filterDirectories = value;
-              browser.model.filterDirectories = value;
+        void settingRegistry.load(FILE_BROWSER_PLUGIN_ID).then(settings => {
+          /**
+           * File browser configuration.
+           */
+          const fileBrowserConfig = {
+            navigateToCurrentDirectory: false,
+            showLastModifiedColumn: true,
+            useFuzzyFilter: true,
+            showHiddenFiles: false,
+            showFileCheckboxes: false
+          };
+          const fileBrowserModelConfig = {
+            filterDirectories: true
+          };
+
+          function onSettingsChanged(
+            settings: ISettingRegistry.ISettings
+          ): void {
+            let key: keyof typeof fileBrowserConfig;
+            for (key in fileBrowserConfig) {
+              const value = settings.get(key).composite as boolean;
+              fileBrowserConfig[key] = value;
+              browser[key] = value;
             }
-            settings.changed.connect(onSettingsChanged);
-            onSettingsChanged(settings);
-          });
+
+            const value = settings.get('filterDirectories')
+              .composite as boolean;
+            fileBrowserModelConfig.filterDirectories = value;
+            browser.model.filterDirectories = value;
+          }
+          settings.changed.connect(onSettingsChanged);
+          onSettingsChanged(settings);
+        });
       }
     });
   }
@@ -1131,7 +1132,7 @@ function addCommands(
         const value = !browser.navigateToCurrentDirectory;
         const key = 'navigateToCurrentDirectory';
         return settingRegistry
-          .set('@jupyterlab/filebrowser-extension:browser', key, value)
+          .set(FILE_BROWSER_PLUGIN_ID, key, value)
           .catch((reason: Error) => {
             console.error(`Failed to set navigateToCurrentDirectory setting`);
           });
@@ -1147,7 +1148,7 @@ function addCommands(
       const key = 'showLastModifiedColumn';
       if (settingRegistry) {
         return settingRegistry
-          .set('@jupyterlab/filebrowser-extension:browser', key, value)
+          .set(FILE_BROWSER_PLUGIN_ID, key, value)
           .catch((reason: Error) => {
             console.error(`Failed to set showLastModifiedColumn setting`);
           });
@@ -1164,14 +1165,30 @@ function addCommands(
       const key = 'showHiddenFiles';
       if (settingRegistry) {
         return settingRegistry
-          .set('@jupyterlab/filebrowser-extension:browser', key, value)
+          .set(FILE_BROWSER_PLUGIN_ID, key, value)
           .catch((reason: Error) => {
             console.error(`Failed to set showHiddenFiles setting`);
           });
       }
     }
   });
 
+  commands.addCommand(CommandIDs.toggleFileCheckboxes, {
+    label: trans.__('Show File Checkboxes'),
+    isToggled: () => browser.showFileCheckboxes,
+    execute: () => {
+      const value = !browser.showFileCheckboxes;
+      const key = 'showFileCheckboxes';
+      if (settingRegistry) {
+        return settingRegistry
+          .set(FILE_BROWSER_PLUGIN_ID, key, value)
+          .catch((reason: Error) => {
+            console.error(`Failed to set showFileCheckboxes setting`);
+          });
+      }
+    }
+  });
+
   commands.addCommand(CommandIDs.search, {
     label: trans.__('Search on File Names'),
     execute: () => alert('search')

packages/filebrowser/src/browser.ts

@@ -187,6 +187,22 @@ export class FileBrowser extends SidePanel {
     this._showHiddenFiles = value;
   }
 
+  /**
+   * Whether to show checkboxes next to files and folders
+   */
+  get showFileCheckboxes(): boolean {
+    return this._showFileCheckboxes;
+  }
+
+  set showFileCheckboxes(value: boolean) {
+    if (this.listing.setColumnVisibility) {
+      this.listing.setColumnVisibility('is_selected', value);
+      this._showFileCheckboxes = value;
+    } else {
+      console.warn('Listing does not support toggling column visibility');
+    }
+  }
+
   /**
    * Create an iterator over the listing's selected items.
    *
@@ -404,6 +420,7 @@ export class FileBrowser extends SidePanel {
   private _showLastModifiedColumn: boolean = true;
   private _useFuzzyFilter: boolean = true;
   private _showHiddenFiles: boolean = false;
+  private _showFileCheckboxes: boolean = false;
 }
 
 /**