Switch to LabIcon (#44)

Author: fcollonval

.binder/environment.yml

@@ -3,7 +3,7 @@ channels:
 dependencies:
     - python>=3.6
     - pytest
-    - jupyterlab>=2.0.0,<3.0.0
+    - jupyterlab>=2.2.0,<3.0.0
     - cookiecutter
     - nodejs
     - git

.github/workflows/publish.yml

@@ -22,7 +22,7 @@ jobs:
     - name: Install dependencies
       run: |
         python -m pip install --upgrade pip
-        pip install jupyterlab setuptools twine wheel
+        pip install "jupyterlab>=2.2.0,<3.0.0" setuptools twine wheel
     - name: Publish the Python package
       env:
         TWINE_USERNAME: __token__

environment.yml

@@ -4,7 +4,7 @@ channels:
 dependencies:
     - python>=3.6
     - pytest
-    - jupyterlab>=2.0.0,<3.0.0
+    - jupyterlab>=2.2.0,<3.0.0
     - cookiecutter
     - nodejs
     - git

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hadim/jupyter-archive",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A Jupyterlab extension to make, download and extract archive files.",
   "keywords": [
     "jupyter",
@@ -26,26 +26,30 @@
     "url": "https://github.com/hadim/jupyter-archive.git"
   },
   "scripts": {
-    "build": "yarn run build:lib",
+    "build": "jlpm run build:lib",
     "build:labextension": "cd jupyter_archive && rimraf labextension && mkdirp labextension && cd labextension && npm pack ../..",
     "build:lib": "tsc",
-    "build:all": "yarn run build:labextension",
-    "clean": "yarn run clean:lib",
+    "build:all": "jlpm run build:labextension",
+    "clean": "jlpm run clean:lib",
     "clean:lib": "rimraf lib && rimraf tsconfig.tsbuildinfo",
     "clean:labextension": "rimraf jupyter_archive/labextension",
-    "clean:all": "yarn run clean:lib && yarn run clean:labextension",
-    "prepare": "yarn run clean && yarn run build",
+    "clean:all": "jlpm run clean:lib && jlpm run clean:labextension",
+    "prepare": "jlpm run clean && jlpm run build",
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^2.0.2",
-    "@jupyterlab/filebrowser": "^2.0.2"
+    "@jupyterlab/application": "^2.2.0",
+    "@jupyterlab/apputils": "^2.2.0",
+    "@jupyterlab/coreutils": "^4.2.0",
+    "@jupyterlab/filebrowser": "^2.2.0",
+    "@jupyterlab/services": "^5.2.0",
+    "@jupyterlab/settingregistry": "^2.2.0",
+    "@jupyterlab/ui-components": "^2.2.0"
   },
   "devDependencies": {
     "mkdirp": "^1.0.3",
     "rimraf": "~3.0.0",
-    "typescript": "~3.7.3",
-    "yarn": "~1.22"
+    "typescript": "~3.7.3"
   },
   "sideEffects": [
     "style/*.css"

schema/archive.json

@@ -1,4 +1,5 @@
 {
+  "jupyter.lab.setting-icon": "jupyter-archive:archive",
   "title": "Archive",
   "description": "Archive handler options.",
   "properties": {

src/icon.ts

@@ -0,0 +1,14 @@
+import { LabIcon } from "@jupyterlab/ui-components";
+
+// icon svg import statements
+import archiveSvg from "../style/icons/archive.svg";
+import unarchiveSvg from "../style/icons/unarchive.svg";
+
+export const archiveIcon = new LabIcon({
+  name: "jupyter-archive:archive",
+  svgstr: archiveSvg,
+});
+export const unarchiveIcon = new LabIcon({
+  name: "jupyter-archive:unarchive",
+  svgstr: unarchiveSvg,
+});

src/index.ts

@@ -1,15 +1,16 @@
 import {
   JupyterFrontEnd,
-  JupyterFrontEndPlugin
+  JupyterFrontEndPlugin,
 } from "@jupyterlab/application";
 import { showErrorMessage } from "@jupyterlab/apputils";
 import { URLExt, PathExt } from "@jupyterlab/coreutils";
-import { ISettingRegistry } from '@jupyterlab/settingregistry';
+import { ISettingRegistry } from "@jupyterlab/settingregistry";
 import { IFileBrowserFactory } from "@jupyterlab/filebrowser";
 import { ServerConnection } from "@jupyterlab/services";
 import { each } from "@lumino/algorithm";
 import { IDisposable } from "@lumino/disposable";
 import { Menu } from "@lumino/widgets";
+import { archiveIcon, unarchiveIcon } from "./icon";
 
 const DIRECTORIES_URL = "directories";
 const EXTRACT_ARCHVE_URL = "extract-archive";
@@ -46,10 +47,7 @@ function downloadArchiveRequest(
   const fullurl = new URL(url);
 
   // Generate a random token.
-  const rand = () =>
-    Math.random()
-      .toString(36)
-      .substr(2);
+  const rand = () => Math.random().toString(36).substr(2);
   const token = (length: number) =>
     (rand() + rand() + rand() + rand()).substr(0, length);
 
@@ -99,11 +97,13 @@ function extractArchiveRequest(path: string): Promise<void> {
   url = fullurl.toString();
   const request = { method: "GET" };
 
-  return ServerConnection.makeRequest(url, request, settings).then(response => {
-    if (response.status !== 200) {
-      throw new ServerConnection.ResponseError(response);
+  return ServerConnection.makeRequest(url, request, settings).then(
+    (response) => {
+      if (response.status !== 200) {
+        throw new ServerConnection.ResponseError(response);
+      }
     }
-  });
+  );
 }
 
 /**
@@ -134,7 +134,7 @@ const extension: JupyterFrontEndPlugin<void> = {
       ".tar.bz",
       ".tar.bz2",
       ".txz",
-      ".tar.xz"
+      ".tar.xz",
     ];
     let archiveFormat: ArchiveFormat; // Default value read from settings
     let followSymlinks: string; // Default value read from settings
@@ -151,24 +151,24 @@ const extension: JupyterFrontEndPlugin<void> = {
 
     // Create submenus
     const archiveFolder = new Menu({
-      commands
+      commands,
     });
     archiveFolder.title.label = "Download As";
-    archiveFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";
+    archiveFolder.title.icon = archiveIcon;
     const archiveCurrentFolder = new Menu({
-      commands
+      commands,
     });
     archiveCurrentFolder.title.label = "Download Current Folder As";
-    archiveCurrentFolder.title.iconClass = "jp-MaterialIcon jp-DownloadIcon";
+    archiveCurrentFolder.title.icon = archiveIcon;
 
-    ["zip", "tar.bz2", "tar.gz", "tar.xz"].forEach(format => {
+    ["zip", "tar.bz2", "tar.gz", "tar.xz"].forEach((format) => {
       archiveFolder.addItem({
         command: CommandIDs.downloadArchive,
-        args: { format }
+        args: { format },
       });
       archiveCurrentFolder.addItem({
         command: CommandIDs.downloadArchiveCurrentFolder,
-        args: { format }
+        args: { format },
       });
     });
 
@@ -193,26 +193,26 @@ const extension: JupyterFrontEndPlugin<void> = {
               selector: selectorOnlyDir,
               rank: 10,
               type: "submenu",
-              submenu: archiveFolder
+              submenu: archiveFolder,
             });
 
             archiveCurrentFolderItem = app.contextMenu.addItem({
               selector: selectorContent,
               rank: 3,
               type: "submenu",
-              submenu: archiveCurrentFolder
+              submenu: archiveCurrentFolder,
             });
           } else {
             archiveFolderItem = app.contextMenu.addItem({
               command: CommandIDs.downloadArchive,
               selector: selectorOnlyDir,
-              rank: 10
+              rank: 10,
             });
 
             archiveCurrentFolderItem = app.contextMenu.addItem({
               command: CommandIDs.downloadArchiveCurrentFolder,
               selector: selectorContent,
-              rank: 3
+              rank: 3,
             });
           }
         }
@@ -224,8 +224,8 @@ const extension: JupyterFrontEndPlugin<void> = {
     // Load the settings
     settingRegistry
       .load("@hadim/jupyter-archive:archive")
-      .then(settings => {
-        settings.changed.connect(settings => {
+      .then((settings) => {
+        settings.changed.connect((settings) => {
           const newFormat = settings.get("format").composite as ArchiveFormat;
           updateFormat(newFormat, archiveFormat);
           followSymlinks = settings.get("followSymlinks").composite as string;
@@ -237,7 +237,7 @@ const extension: JupyterFrontEndPlugin<void> = {
         followSymlinks = settings.get("followSymlinks").composite as string;
         downloadHidden = settings.get("downloadHidden").composite as string;
       })
-      .catch(reason => {
+      .catch((reason) => {
         console.error(reason);
         showErrorMessage(
           "Fail to read settings for '@hadim/jupyter-archive:archive'",
@@ -247,44 +247,43 @@ const extension: JupyterFrontEndPlugin<void> = {
 
     // Add the 'downloadArchive' command to the file's menu.
     commands.addCommand(CommandIDs.downloadArchive, {
-      execute: args => {
+      execute: (args) => {
         const widget = tracker.currentWidget;
         if (widget) {
-          each(widget.selectedItems(), item => {
+          each(widget.selectedItems(), (item) => {
             if (item.type == "directory") {
               const format = args["format"] as ArchiveFormat;
               downloadArchiveRequest(
                 item.path,
                 allowedArchiveExtensions.indexOf("." + format) >= 0
                   ? format
                   : archiveFormat,
-              followSymlinks,
-              downloadHidden
+                followSymlinks,
+                downloadHidden
               );
             }
           });
         }
       },
-      iconClass: args =>
-        "format" in args ? "" : "jp-MaterialIcon jp-DownloadIcon",
-      label: args => {
+      icon: (args) => ("format" in args ? "" : archiveIcon),
+      label: (args) => {
         const format = (args["format"] as ArchiveFormat) || "";
         const label = format.replace(".", " ").toLocaleUpperCase();
         return label ? `${label} Archive` : "Download as an Archive";
-      }
+      },
     });
 
     // Add the 'extractArchive' command to the file's menu.
     commands.addCommand(CommandIDs.extractArchive, {
       execute: () => {
         const widget = tracker.currentWidget;
         if (widget) {
-          each(widget.selectedItems(), item => {
+          each(widget.selectedItems(), (item) => {
             extractArchiveRequest(item.path);
           });
         }
       },
-      iconClass: "jp-MaterialIcon jp-DownCaretIcon",
+      icon: unarchiveIcon,
       isVisible: () => {
         const widget = tracker.currentWidget;
         let visible = false;
@@ -294,26 +293,27 @@ const extension: JupyterFrontEndPlugin<void> = {
           const splitName = basename.split(".");
           let lastTwoParts = "";
           if (splitName.length >= 2) {
-            lastTwoParts = "." + splitName.splice(splitName.length - 2, 2).join(".");
+            lastTwoParts =
+              "." + splitName.splice(splitName.length - 2, 2).join(".");
           }
           visible =
-            allowedArchiveExtensions.indexOf(PathExt.extname(basename)) >=
-            0 || allowedArchiveExtensions.indexOf(lastTwoParts) >= 0;
+            allowedArchiveExtensions.indexOf(PathExt.extname(basename)) >= 0 ||
+            allowedArchiveExtensions.indexOf(lastTwoParts) >= 0;
         }
         return visible;
       },
-      label: "Extract Archive"
+      label: "Extract Archive",
     });
 
     app.contextMenu.addItem({
       command: CommandIDs.extractArchive,
       selector: selectorNotDir,
-      rank: 10
+      rank: 10,
     });
 
     // Add the 'downloadArchiveCurrentFolder' command to file browser content.
     commands.addCommand(CommandIDs.downloadArchiveCurrentFolder, {
-      execute: args => {
+      execute: (args) => {
         const widget = tracker.currentWidget;
         if (widget) {
           const format = args["format"] as ArchiveFormat;
@@ -327,17 +327,16 @@ const extension: JupyterFrontEndPlugin<void> = {
           );
         }
       },
-      iconClass: args =>
-        "format" in args ? "" : "jp-MaterialIcon jp-DownloadIcon",
-      label: args => {
+      icon: (args) => ("format" in args ? "" : archiveIcon),
+      label: (args) => {
         const format = (args["format"] as ArchiveFormat) || "";
         const label = format.replace(".", " ").toLocaleUpperCase();
         return label
           ? `${label} Archive`
           : "Download Current Folder as an Archive";
-      }
+      },
     });
-  }
+  },
 };
 
 export default extension;

src/svg.d.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+// including this file in a package allows for the use of import statements
+// with svg files. Example: `import xSvg from 'path/xSvg.svg'`
+
+// for use with raw-loader in Webpack.
+// The svg will be imported as a raw string
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}