Allow to install packed extensions from URL or local file

package.json

@@ -47,7 +47,7 @@
     "bundledHelmVersion": "3.3.4"
   },
   "engines": {
-    "node": ">=12.0 <13.0"
+    "node": ">=12 <13"
   },
   "lingui": {
     "locales": [
@@ -214,7 +214,7 @@
     "@types/node": "^12.12.45",
     "@types/proper-lockfile": "^4.1.1",
     "@types/react-beautiful-dnd": "^13.0.0",
-    "@types/tar": "^4.0.3",
+    "@types/tar": "^4.0.4",
     "array-move": "^3.0.0",
     "await-lock": "^2.1.0",
     "chalk": "^4.1.0",
@@ -251,7 +251,7 @@
     "serializr": "^2.0.3",
     "shell-env": "^3.0.0",
     "spdy": "^4.0.2",
-    "tar": "^6.0.2",
+    "tar": "^6.0.5",
     "tcp-port-used": "^1.0.1",
     "tempy": "^0.5.0",
     "uuid": "^8.1.0",
@@ -314,7 +314,6 @@
     "@types/sharp": "^0.26.0",
     "@types/shelljs": "^0.8.8",
     "@types/spdy": "^3.4.4",
-    "@types/tar": "^4.0.3",
     "@types/tcp-port-used": "^1.0.0",
     "@types/tempy": "^0.3.0",
     "@types/terser-webpack-plugin": "^3.0.0",

src/common/utils/downloadFile.ts

@@ -0,0 +1,35 @@
+import request from "request";
+
+export interface DownloadFileOptions {
+  url: string;
+  gzip?: boolean;
+}
+
+export interface DownloadFileTicket {
+  url: string;
+  promise: Promise<Buffer>;
+  cancel(): void;
+}
+
+export function downloadFile({ url, gzip = true }: DownloadFileOptions): DownloadFileTicket {
+  const fileChunks: Buffer[] = [];
+  const req = request(url, { gzip });
+  const promise: Promise<Buffer> = new Promise((resolve, reject) => {
+    req.on("data", (chunk: Buffer) => {
+      fileChunks.push(chunk);
+    });
+    req.once("error", err => {
+      reject({ url, err });
+    });
+    req.once("complete", () => {
+      resolve(Buffer.concat(fileChunks));
+    });
+  });
+  return {
+    url,
+    promise,
+    cancel() {
+      req.abort();
+    }
+  };
+}

src/common/utils/escapeRegExp.ts

@@ -0,0 +1,5 @@
+// Helper to sanitize / escape special chars for passing to RegExp-constructor
+
+export function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+}

src/common/utils/index.ts

@@ -15,3 +15,6 @@ export * from "./saveToAppFiles";
 export * from "./singleton";
 export * from "./openExternal";
 export * from "./rectify-array";
+export * from "./downloadFile";
+export * from "./escapeRegExp";
+export * from "./tar";

src/common/utils/tar.ts

@@ -0,0 +1,55 @@
+// Helper for working with tarball files (.tar, .tgz)
+// Docs: https://github.com/npm/node-tar
+import tar, { ExtractOptions, FileStat } from "tar";
+import path from "path";
+
+export interface ReadFileFromTarOpts {
+  tarPath: string;
+  filePath: string;
+  parseJson?: boolean;
+}
+
+export function readFileFromTar<R = Buffer>({ tarPath, filePath, parseJson }: ReadFileFromTarOpts): Promise<R> {
+  return new Promise(async (resolve, reject) => {
+    const fileChunks: Buffer[] = [];
+
+    await tar.list({
+      file: tarPath,
+      filter: path => path === filePath,
+      onentry(entry: FileStat) {
+        entry.on("data", chunk => {
+          fileChunks.push(chunk);
+        });
+        entry.once("error", err => {
+          reject(new Error(`reading file has failed ${entry.path}: ${err}`));
+        });
+        entry.once("end", () => {
+          const data = Buffer.concat(fileChunks);
+          const result = parseJson ? JSON.parse(data.toString("utf8")) : data;
+          resolve(result);
+        });
+      },
+    });
+
+    if (!fileChunks.length) {
+      reject(new Error("Not found"));
+    }
+  });
+}
+
+export async function listTarEntries(filePath: string): Promise<string[]> {
+  const entries: string[] = [];
+  await tar.list({
+    file: filePath,
+    onentry: (entry: FileStat) => entries.push(entry.path as any as string),
+  });
+  return entries;
+}
+
+export function extractTar(filePath: string, opts: ExtractOptions & { sync?: boolean } = {}) {
+  return tar.extract({
+    file: filePath,
+    cwd: path.dirname(filePath),
+    ...opts,
+  });
+}

src/common/vars.ts

@@ -41,3 +41,5 @@ export const apiKubePrefix = "/api-kube"; // k8s cluster apis
 // Links
 export const issuesTrackerUrl = "https://github.com/lensapp/lens/issues";
 export const slackUrl = "https://join.slack.com/t/k8slens/shared_invite/enQtOTc5NjAyNjYyOTk4LWU1NDQ0ZGFkOWJkNTRhYTc2YjVmZDdkM2FkNGM5MjhiYTRhMDU2NDQ1MzIyMDA4ZGZlNmExOTc0N2JmY2M3ZGI";
+export const docsUrl = "https://docs.k8slens.dev/";
+export const supportUrl = "https://docs.k8slens.dev/latest/support/";

src/extensions/extension-discovery.ts

@@ -16,7 +16,7 @@ export interface InstalledExtension {
   }
 
 const logModule = "[EXTENSION-DISCOVERY]";
-const manifestFilename = "package.json";
+export const manifestFilename = "package.json";
 
 /**
  * Returns true if the lstat is for a directory-like file (e.g. isDirectory or symbolic link)

src/extensions/lens-extension.ts

@@ -11,6 +11,7 @@ export interface LensExtensionManifest {
   description?: string;
   main?: string; // path to %ext/dist/main.js
   renderer?: string; // path to %ext/dist/renderer.js
+  lens?: object; // fixme: add more required fields for validation
 }
 
 export class LensExtension {
@@ -96,3 +97,7 @@ export class LensExtension {
     // mock
   }
 }
+
+export function sanitizeExtensionName(name: string) {
+  return name.replace("@", "").replace("/", "--");
+}

src/extensions/registries/__tests__/page-registry.test.ts

@@ -25,8 +25,8 @@ describe("getPageUrl", () => {
     expect(getExtensionPageUrl({ extensionId: ext.name, pageId: "/test" })).toBe("/extension/foo-bar/test");
   });
 
-  it("removes @", () => {
-    expect(getExtensionPageUrl({ extensionId: "@foo/bar" })).toBe("/extension/foo-bar");
+  it("removes @ and replace `/` to `--`", () => {
+    expect(getExtensionPageUrl({ extensionId: "@foo/bar" })).toBe("/extension/foo--bar");
   });
 
   it("adds / prefix", () => {

src/extensions/registries/page-registry.ts

@@ -5,7 +5,7 @@ import path from "path";
 import { action } from "mobx";
 import { compile } from "path-to-regexp";
 import { BaseRegistry } from "./base-registry";
-import { LensExtension } from "../lens-extension";
+import { LensExtension, sanitizeExtensionName } from "../lens-extension";
 import logger from "../../main/logger";
 import { recitfy } from "../../common/utils";
 
@@ -45,10 +45,6 @@ export interface PageComponents {
   Page: React.ComponentType<any>;
 }
 
-export function sanitizeExtensionName(name: string) {
-  return name.replace("@", "").replace("/", "-");
-}
-
 export function getExtensionPageUrl<P extends object>({ extensionId, pageId = "", params }: PageMenuTarget<P>): string {
   const extensionBaseUrl = compile(`/extension/:name`)({
     name: sanitizeExtensionName(extensionId), // compile only with extension-id first and define base path

src/main/menu.ts

@@ -1,7 +1,7 @@
 import { app, BrowserWindow, dialog, ipcMain, IpcMainEvent, Menu, MenuItem, MenuItemConstructorOptions, webContents, shell } from "electron";
 import { autorun } from "mobx";
 import { WindowManager } from "./window-manager";
-import { appName, isMac, isWindows, isTestEnv } from "../common/vars";
+import { appName, isMac, isWindows, isTestEnv, docsUrl, supportUrl } from "../common/vars";
 import { addClusterURL } from "../renderer/components/+add-cluster/add-cluster.route";
 import { preferencesURL } from "../renderer/components/+preferences/preferences.route";
 import { whatsNewURL } from "../renderer/components/+whats-new/whats-new.route";
@@ -24,6 +24,7 @@ export function showAbout(browserWindow: BrowserWindow) {
     `${appName}: ${app.getVersion()}`,
     `Electron: ${process.versions.electron}`,
     `Chrome: ${process.versions.chrome}`,
+    `Node: ${process.versions.node}`,
     `Copyright 2020 Mirantis, Inc.`,
   ];
   dialog.showMessageBoxSync(browserWindow, {
@@ -215,13 +216,13 @@ export function buildMenu(windowManager: WindowManager) {
       {
         label: "Documentation",
         click: async () => {
-          shell.openExternal('https://docs.k8slens.dev/');
+          shell.openExternal(docsUrl);
         },
       },
       {
         label: "Support",
         click: async () => {
-          shell.openExternal('https://docs.k8slens.dev/latest/support/');
+          shell.openExternal(supportUrl);
         },
       },
       ...ignoreOnMac([

src/renderer/components/+add-cluster/add-cluster.scss

@@ -1,12 +1,4 @@
 .AddCluster {
-  .droppable {
-    box-shadow: 0 0 0 5px inset $primary;
-
-    > * {
-      pointer-events: none;
-    }
-  }
-
   .hint {
     margin-top: -$padding;
     color: $textColorSecondary;