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 <=14"
   },
   "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",
     "chalk": "^4.1.0",
     "command-exists": "1.2.9",
@@ -248,7 +248,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",
@@ -310,7 +310,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,36 @@
+import request from "request";
+
+export interface DownloadFileOptions {
+  url: string;
+  gzip?: boolean;
+}
+
+export interface DownloadFileTicket {
+  url: string;
+  promise: Promise<Buffer>;
+  cancel(): void;
+}
+
+export function downloadFile(opts: DownloadFileOptions): DownloadFileTicket {
+  const { url, gzip = true } = opts;
+  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.on("complete", () => {
+      resolve(Buffer.concat(fileChunks));
+    });
+    req.on("error", err => {
+      reject({ url, err });
+    });
+  });
+  return {
+    url: url,
+    promise: promise,
+    cancel() {
+      req.abort();
+    }
+  };
+}

src/common/utils/index.ts

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

src/common/utils/tar.ts

@@ -0,0 +1,49 @@
+// 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 {
+  fileName?: string;
+  fileMatcher?(path: string, entry: FileStat): boolean;
+  notFoundMessage?: string;
+}
+
+export function readFileFromTar(tarFilePath: string, opts: ReadFileFromTarOpts): Promise<Buffer> {
+  return new Promise(async (resolve, reject) => {
+    const fileChunks: Buffer[] = [];
+    const {
+      fileName,
+      fileMatcher = (path: string) => path === fileName,
+      notFoundMessage = "File not found",
+    } = opts;
+
+    await tar.list({
+      file: tarFilePath,
+      filter: fileMatcher,
+      onentry(entry: FileStat) {
+        entry.on("data", chunk => {
+          fileChunks.push(chunk);
+        });
+        entry.on("error", err => {
+          reject(`Reading ${entry.path} error: ${err}`);
+        });
+        entry.on("end", () => {
+          resolve(Buffer.concat(fileChunks));
+        });
+      },
+    });
+
+    if (!fileChunks.length) {
+      reject(notFoundMessage);
+    }
+  });
+}
+
+export function extractTar(filePath: string, opts: ExtractOptions & { sync?: boolean } = {}) {
+  return tar.extract({
+    file: filePath,
+    cwd: path.dirname(filePath),
+    ...opts,
+  });
+}

src/extensions/extension-manager.ts

@@ -97,6 +97,15 @@ export class ExtensionManager {
     }
   }
 
+  getNpmPackageTarballUrl(packageName: string) {
+    try {
+      const command = [this.npmPath, "view", packageName, "dist.tarball", "--silent"];
+      return child_process.execSync(command.join(" "), { encoding: "utf8" }).trim();
+    } catch (err) {
+      return null;
+    }
+  }
+
   protected installPackages(): Promise<void> {
     return new Promise((resolve, reject) => {
       const child = child_process.fork(this.npmPath, ["install", "--silent", "--no-audit", "--only=prod", "--prefer-offline", "--no-package-lock"], {

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 {
@@ -95,3 +96,7 @@ export class LensExtension {
     // mock
   }
 }
+
+export function sanitizeExtensionName(name: string) {
+  return name.replace("@", "").replace("/", "-");
+}

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/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;

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

@@ -8,7 +8,7 @@ import { KubeConfig } from "@kubernetes/client-node";
 import { _i18n } from "../../i18n";
 import { t, Trans } from "@lingui/macro";
 import { Select, SelectOption } from "../select";
-import { Input } from "../input";
+import { DropFileInput, Input } from "../input";
 import { AceEditor } from "../ace-editor";
 import { Button } from "../button";
 import { Icon } from "../icon";
@@ -43,7 +43,6 @@ export class AddCluster extends React.Component {
   @observable proxyServer = "";
   @observable isWaiting = false;
   @observable showSettings = false;
-  @observable dropAreaActive = false;
 
   componentDidMount() {
     clusterStore.setActive(null);
@@ -119,6 +118,11 @@ export class AddCluster extends React.Component {
     }
   };
 
+  onDropKubeConfig = (files: File[]) => {
+    this.sourceTab = KubeConfigSourceTab.FILE;
+    this.setKubeConfig(files[0].path);
+  };
+
   @action
   addClusters = () => {
     let newClusters: ClusterModel[] = [];
@@ -137,7 +141,7 @@ export class AddCluster extends React.Component {
           return true;
         } catch (err) {
           this.error = String(err.message);
-          if (err instanceof ExecValidationNotFoundError ) {
+          if (err instanceof ExecValidationNotFoundError) {
             Notifications.error(<Trans>Error while adding cluster(s): {this.error}</Trans>);
             return false;
           } else {
@@ -228,7 +232,7 @@ export class AddCluster extends React.Component {
           <Tab
             value={KubeConfigSourceTab.FILE}
             label={<Trans>Select kubeconfig file</Trans>}
-            active={this.sourceTab == KubeConfigSourceTab.FILE} />
+            active={this.sourceTab == KubeConfigSourceTab.FILE}/>
           <Tab
             value={KubeConfigSourceTab.TEXT}
             label={<Trans>Paste as text</Trans>}
@@ -342,71 +346,55 @@ export class AddCluster extends React.Component {
     return (
       <div className={cssNames("kube-context flex gaps align-center", context)}>
         <span>{context}</span>
-        {isNew && <Icon small material="fiber_new" />}
-        {isSelected && <Icon small material="check" className="box right" />}
+        {isNew && <Icon small material="fiber_new"/>}
+        {isSelected && <Icon small material="check" className="box right"/>}
       </div>
     );
   };
 
   render() {
     const addDisabled = this.selectedContexts.length === 0;
-
     return (
-      <WizardLayout
-        className="AddCluster"
-        infoPanel={this.renderInfo()}
-        contentClass={{ droppable: this.dropAreaActive }}
-        contentProps={{
-          onDragEnter: event => this.dropAreaActive = true,
-          onDragLeave: event => this.dropAreaActive = false,
-          onDragOver: event => {
-            event.preventDefault(); // enable onDrop()-callback
-            event.dataTransfer.dropEffect = "move";
-          },
-          onDrop: event => {
-            this.sourceTab = KubeConfigSourceTab.FILE;
-            this.dropAreaActive = false;
-            this.setKubeConfig(event.dataTransfer.files[0].path);
-          }
-        }}
-      >
-        <h2><Trans>Add Cluster</Trans></h2>
-        {this.renderKubeConfigSource()}
-        {this.renderContextSelector()}
-        <div className="cluster-settings">
-          <a href="#" onClick={() => this.showSettings = !this.showSettings}>
-            <Trans>Proxy settings</Trans>
-          </a>
-        </div>
-        {this.showSettings && (
-          <div className="proxy-settings">
-            <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
-            <Input
-              autoFocus
-              value={this.proxyServer}
-              onChange={value => this.proxyServer = value}
-              theme="round-black"
+      <DropFileInput onDropFiles={this.onDropKubeConfig}>
+        <WizardLayout className="AddCluster" infoPanel={this.renderInfo()}>
+          <h2><Trans>Add Cluster</Trans></h2>
+          {this.renderKubeConfigSource()}
+          {this.renderContextSelector()}
+          <div className="cluster-settings">
+            <a href="#" onClick={() => this.showSettings = !this.showSettings}>
+              <Trans>Proxy settings</Trans>
+            </a>
+          </div>
+          {this.showSettings && (
+            <div className="proxy-settings">
+              <p>HTTP Proxy server. Used for communicating with Kubernetes API.</p>
+              <Input
+                autoFocus
+                value={this.proxyServer}
+                onChange={value => this.proxyServer = value}
+                theme="round-black"
+              />
+              <small className="hint">
+                {'A HTTP proxy server URL (format: http://<address>:<port>).'}
+              </small>
+            </div>
+          )}
+          {this.error && (
+            <div className="error">{this.error}</div>
+          )}
+          <div className="actions-panel">
+            <Button
+              primary
+              disabled={addDisabled}
+              label={<Trans>Add cluster(s)</Trans>}
+              onClick={this.addClusters}
+              waiting={this.isWaiting}
+              tooltip={addDisabled ? _i18n._("Select at least one cluster to add.") : undefined}
+              tooltipOverrideDisabled
             />
-            <small className="hint">
-              {'A HTTP proxy server URL (format: http://<address>:<port>).'}
-            </small>
           </div>
-        )}
-        {this.error && (
-          <div className="error">{this.error}</div>
-        )}
-        <div className="actions-panel">
-          <Button
-            primary
-            disabled={addDisabled}
-            label={<Trans>Add cluster(s)</Trans>}
-            onClick={this.addClusters}
-            waiting={this.isWaiting}
-            tooltip={addDisabled ? _i18n._("Select at least one cluster to add.") : undefined}
-            tooltipOverrideDisabled
-          />
-        </div>
-      </WizardLayout>
+        </WizardLayout>
+      </DropFileInput>
     );
   }
 }