Fix compatibility issues with jlab 1.0

Author: parente

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@parente/jupyterlab-quickopen",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Quickly open a file in JupyterLab by part of its name",
   "keywords": [
     "jupyter",
@@ -31,17 +31,17 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^0.19.1",
-    "@jupyterlab/apputils": "^0.19.1",
-    "@jupyterlab/coreutils": "^2.2.1",
-    "@jupyterlab/docmanager": "^0.19.1",
-    "@jupyterlab/services": "^3.2.1",
-    "@phosphor/messaging": "^1.2.2",
-    "@phosphor/widgets": "^1.6.0"
+    "@jupyterlab/application": "^1.0.0",
+    "@jupyterlab/apputils": "^1.0.0",
+    "@jupyterlab/coreutils": "^3.0.0",
+    "@jupyterlab/docmanager": "^1.0.0",
+    "@jupyterlab/services": "^4.0.0",
+    "@phosphor/messaging": "^1.2.3",
+    "@phosphor/widgets": "^1.8.1"
   },
   "devDependencies": {
     "rimraf": "^2.6.1",
-    "typescript": "~3.1.1"
+    "typescript": "~3.5.2"
   },
   "jupyterlab": {
     "extension": true,

schema/plugin.json

@@ -1,17 +1,17 @@
 {
-    "jupyter.lab.setting-icon-class": "jp-FaIcon fa fa-search",
-    "jupyter.lab.setting-icon-label": "Quick Open",
-    "title": "Quick Open",
-    "description": "Quick open panel settings",
-    "properties": {
-      "excludes": {
-        "title": "Exclude Patterns",
-        "description": "File and directory patterns to exclude from the list",
-        "type": "array",
-        "items": { "type": "string" },
-        "default": ["node_modules", "__pycache__"]
-      }
-    },
-    "additionalProperties": false,
-    "type": "object"
-  }
+  "jupyter.lab.setting-icon-class": "jp-SearchIcon",
+  "jupyter.lab.setting-icon-label": "Quick Open",
+  "title": "Quick Open",
+  "description": "Quick open panel settings",
+  "properties": {
+    "excludes": {
+      "title": "Exclude Patterns",
+      "description": "File and directory patterns to exclude from the list",
+      "type": "array",
+      "items": { "type": "string" },
+      "default": ["node_modules", "__pycache__"]
+    }
+  },
+  "additionalProperties": false,
+  "type": "object"
+}

src/index.ts

@@ -1,54 +1,52 @@
-import {
-  JupyterLab, JupyterLabPlugin
-} from '@jupyterlab/application';
-import { ICommandPalette } from '@jupyterlab/apputils';
-import { ISettingRegistry, URLExt, PathExt } from '@jupyterlab/coreutils';
-import { IDocumentManager } from '@jupyterlab/docmanager';
-import { ServerConnection } from '@jupyterlab/services';
-import { CommandRegistry } from '@phosphor/commands';
-import { JSONObject } from '@phosphor/coreutils';
-import { Message } from '@phosphor/messaging';
-import { ISignal, Signal } from '@phosphor/signaling';
-import { CommandPalette } from '@phosphor/widgets';
+import { ILabShell, JupyterFrontEnd, JupyterFrontEndPlugin } from "@jupyterlab/application";
+import { ICommandPalette } from "@jupyterlab/apputils";
+import { ISettingRegistry, URLExt, PathExt } from "@jupyterlab/coreutils";
+import { IDocumentManager } from "@jupyterlab/docmanager";
+import { ServerConnection } from "@jupyterlab/services";
+import { CommandRegistry } from "@phosphor/commands";
+import { ReadonlyJSONObject } from "@phosphor/coreutils";
+import { Message } from "@phosphor/messaging";
+import { ISignal, Signal } from "@phosphor/signaling";
+import { CommandPalette } from "@phosphor/widgets";
 import "../style/index.css";
 
 /** Structure of the JSON response from the server */
 interface QuickOpenResponse {
-  readonly contents: { [key: string]: string[] },
-  readonly scanSeconds: number,
+  readonly contents: { [key: string]: string[] };
+  readonly scanSeconds: number;
 }
 
-
 /** Makes a HTTP request for the server-side quick open scan */
 async function fetchContents(excludes: string[]): Promise<QuickOpenResponse> {
-  const query = excludes.map(exclude => {
-    return 'excludes='+encodeURIComponent(exclude);
-  }).join('&');
+  const query = excludes
+    .map(exclude => {
+      return "excludes=" + encodeURIComponent(exclude);
+    })
+    .join("&");
 
   const settings = ServerConnection.makeSettings();
-  const fullUrl = URLExt.join(settings.baseUrl, '/api/quickopen') + '?' + query;
-  const response = await ServerConnection.makeRequest(fullUrl, {method: 'GET'}, settings);
+  const fullUrl = URLExt.join(settings.baseUrl, "/api/quickopen") + "?" + query;
+  const response = await ServerConnection.makeRequest(fullUrl, { method: "GET" }, settings);
   if (response.status !== 200) {
     throw new ServerConnection.ResponseError(response);
   }
   return await response.json();
 }
 
-
 /**
  * Shows files nested under directories in the root notebooks directory
  * configured on the server.
  */
 class QuickOpenWidget extends CommandPalette {
   private _pathSelected = new Signal<this, string>(this);
-  private _settings: JSONObject;
+  private _settings: ReadonlyJSONObject;
 
   constructor(options: CommandPalette.IOptions) {
     super(options);
 
-    this.id = 'jupyterlab-quickopen';
-    this.title.iconClass = 'jp-SideBar-tabIcon jp-FaIcon fa fa-search';
-    this.title.caption = 'Quick Open';
+    this.id = "jupyterlab-quickopen";
+    this.title.iconClass = "jp-SideBar-tabIcon jp-SearchIcon";
+    this.title.caption = "Quick Open";
   }
 
   /** Signal when a selected path is activated. */
@@ -57,7 +55,7 @@ class QuickOpenWidget extends CommandPalette {
   }
 
   /** Current extension settings */
-  set settings(settings: JSONObject) {
+  set settings(settings: ReadonlyJSONObject) {
     this._settings = settings;
   }
 
@@ -73,11 +71,11 @@ class QuickOpenWidget extends CommandPalette {
     // Remove all paths from the view
     this.clearItems();
 
-    for(let category in response.contents) {
-      for(let fn of response.contents[category]) {
+    for (let category in response.contents) {
+      for (let fn of response.contents[category]) {
         // Creates commands that are relative file paths on the server
         let command = `${category}/${fn}`;
-        if(!this.commands.hasCommand(command)) {
+        if (!this.commands.hasCommand(command)) {
           // Only add the command to the registry if it does not yet exist
           // TODO: Track disposables and remove
           this.commands.addCommand(command, {
@@ -93,24 +91,23 @@ class QuickOpenWidget extends CommandPalette {
       }
     }
   }
-
 }
 
-
 /**
  * Initialization data for the jupyterlab-quickopen extension.
  */
-const extension: JupyterLabPlugin<void> = {
-  id: '@parente/jupyterlab-quickopen:plugin',
+const extension: JupyterFrontEndPlugin<void> = {
+  id: "@parente/jupyterlab-quickopen:plugin",
   autoStart: true,
-  requires: [ICommandPalette, IDocumentManager, ISettingRegistry],
+  requires: [ICommandPalette, IDocumentManager, ILabShell, ISettingRegistry],
   activate: async (
-    app: JupyterLab,
+    app: JupyterFrontEnd,
     palette: ICommandPalette,
     docManager: IDocumentManager,
-    settingRegistry: ISettingRegistry) => {
-
-    window['docManager'] = docManager;
+    labShell: ILabShell,
+    settingRegistry: ISettingRegistry
+  ) => {
+    window["docManager"] = docManager;
 
     console.log(`Activated extension: ${extension.id}`);
     const commands: CommandRegistry = new CommandRegistry();
@@ -120,29 +117,29 @@ const extension: JupyterLabPlugin<void> = {
     // Listen for path selection signals and show the selected files in the
     // appropriate editor/viewer
     widget.pathSelected.connect((sender: QuickOpenWidget, path: string) => {
-      app.shell.collapseLeft();
+      labShell.collapseLeft();
       docManager.openOrReveal(PathExt.normalize(path));
     });
 
     // Listen for setting changes and apply them to the widget
     widget.settings = settings.composite;
     settings.changed.connect((settings: ISettingRegistry.ISettings) => {
       widget.settings = settings.composite;
-    })
+    });
 
     // Add a command to activate the quickopen sidebar so that the user can
     // find it in the command palette, assign a hotkey, etc.
-    const command: string = 'quickopen:activate';
+    const command: string = "quickopen:activate";
     app.commands.addCommand(command, {
-      label: 'Quick Open',
+      label: "Quick Open",
       execute: () => {
-        app.shell.activateById(widget.id);
+        labShell.activateById(widget.id);
       }
     });
-    palette.addItem({command, category: 'File Operations'});
+    palette.addItem({ command, category: "File Operations" });
 
     // Add the quickopen widget as a left sidebar
-    app.shell.addToLeftArea(widget, { rank: 1000 });
+    labShell.add(widget, "left", { rank: 1000 });
   }
 };
 

style/index.css

@@ -1,5 +1,3 @@
-.jp-FaIcon {
-    font-size: 20px;
-    color: #777;
-    margin: auto;
-}
+.jp-SearchIcon {
+  background-image: var(--jp-icon-search);
+}