Allow to install packed extensions from URL or local file (#1456)

* Option to install an extension from filesystem/url #1227 -- part 1 (UI)

Signed-off-by: Roman <ixrock@gmail.com>

* DropFileInput: common component to handle droped files (replaced also in add-cluster-page)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: install via url-string on input.submit

Signed-off-by: Roman <ixrock@gmail.com>

* ui tweaks & minor fixes

Signed-off-by: Roman <ixrock@gmail.com>

* more ui/ux tweaks & fixes

Signed-off-by: Roman <ixrock@gmail.com>

* layout fixes

Signed-off-by: Roman <ixrock@gmail.com>

* component renaming: `copy-to-click` => `copy-to-clipboard` => `clipboard`

Signed-off-by: Roman <ixrock@gmail.com>

* reworks -- part 1

Signed-off-by: Roman <ixrock@gmail.com>

* fix downloading file, added common/utils/downloadFile

Signed-off-by: Roman <ixrock@gmail.com>

* confirm before install, unpack tar first steps

Signed-off-by: Roman <ixrock@gmail.com>

* installation flow, extracting .tgz

Signed-off-by: Roman <ixrock@gmail.com>

* clean up, fix lint issues

Signed-off-by: Roman <ixrock@gmail.com>

* update .azure-pipelines.yml

Signed-off-by: Roman <ixrock@gmail.com>

* fixes & refactoring

Signed-off-by: Roman <ixrock@gmail.com>

* fix lint harder :/

Signed-off-by: Roman <ixrock@gmail.com>

* fix validation

Signed-off-by: Roman <ixrock@gmail.com>

* fix validation harder

Signed-off-by: Roman <ixrock@gmail.com>

* responding to comments, fixed package validation

Signed-off-by: Roman <ixrock@gmail.com>

* common/utils/tar.ts: reject with Error-type

Signed-off-by: Roman <ixrock@gmail.com>

* fix: unit-tests

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/notifications/notifications.store.ts

@@ -1,7 +1,6 @@
 import React from "react";
 import { action, observable } from "mobx";
 import { autobind } from "../../utils";
-import isObject from "lodash/isObject";
 import uniqueId from "lodash/uniqueId";
 import { JsonApiErrorParsed } from "../../api/json-api";
 
@@ -23,21 +22,25 @@ export interface Notification {
 
 @autobind()
 export class NotificationsStore {
-  public notifications = observable<Notification>([], { deep: false });
+  public notifications = observable.array<Notification>([], { deep: false });
 
   protected autoHideTimers = new Map<NotificationId, number>();
 
-  addAutoHideTimer(notification: Notification) {
-    this.removeAutoHideTimer(notification);
-    const { id, timeout } = notification;
-    if (timeout) {
-      const timer = window.setTimeout(() => this.remove(id), timeout);
+  getById(id: NotificationId): Notification | null {
+    return this.notifications.find(item => item.id === id) ?? null;
+  }
+
+  addAutoHideTimer(id: NotificationId) {
+    const notification = this.getById(id);
+    if (!notification) return;
+    this.removeAutoHideTimer(id);
+    if (notification?.timeout) {
+      const timer = window.setTimeout(() => this.remove(id), notification.timeout);
       this.autoHideTimers.set(id, timer);
     }
   }
 
-  removeAutoHideTimer(notification: Notification) {
-    const { id } = notification;
+  removeAutoHideTimer(id: NotificationId) {
     if (this.autoHideTimers.has(id)) {
       clearTimeout(this.autoHideTimers.get(id));
       this.autoHideTimers.delete(id);
@@ -45,22 +48,24 @@ export class NotificationsStore {
   }
 
   @action
-  add(notification: Notification) {
-    if (!notification.id) {
-      notification.id = uniqueId("notification_");
+  add(notification: Notification): () => void {
+    const id = notification.id ?? (
+      notification.id = uniqueId("notification_")
+    );
+    const index = this.notifications.findIndex(item => item.id === id);
+    if (index > -1) {
+      this.notifications.splice(index, 1, notification); // update existing with same id
+    } else {
+      this.notifications.push(notification); // add new
     }
-    const index = this.notifications.findIndex(item => item.id === notification.id);
-    if (index > -1) this.notifications.splice(index, 1, notification);
-    else this.notifications.push(notification);
-    this.addAutoHideTimer(notification);
+    this.addAutoHideTimer(id);
+    return () => this.remove(id);
   }
 
   @action
-  remove(itemOrId: NotificationId | Notification) {
-    if (!isObject(itemOrId)) {
-      itemOrId = this.notifications.find(item => item.id === itemOrId);
-    }
-    return this.notifications.remove(itemOrId as Notification);
+  remove(id: NotificationId) {
+    this.removeAutoHideTimer(id);
+    this.notifications.remove(this.getById(id));
   }
 }
 

src/renderer/components/notifications/notifications.tsx

@@ -5,7 +5,7 @@ import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { JsonApiErrorParsed } from "../../api/json-api";
 import { cssNames, prevDefault } from "../../utils";
-import { NotificationMessage, Notification, notificationsStore, NotificationStatus } from "./notifications.store";
+import { Notification, NotificationMessage, notificationsStore, NotificationStatus } from "./notifications.store";
 import { Animate } from "../animate";
 import { Icon } from "../icon";
 
@@ -75,16 +75,16 @@ export class Notifications extends React.Component {
             <Animate key={id}>
               <div
                 className={cssNames("notification flex align-center", status)}
-                onMouseLeave={() => addAutoHideTimer(notification)}
-                onMouseEnter={() => removeAutoHideTimer(notification)}>
+                onMouseLeave={() => addAutoHideTimer(id)}
+                onMouseEnter={() => removeAutoHideTimer(id)}>
                 <div className="box center">
-                  <Icon material="info_outline" />
+                  <Icon material="info_outline"/>
                 </div>
                 <div className="message box grow">{msgText}</div>
                 <div className="box center">
                   <Icon
                     material="close" className="close"
-                    onClick={prevDefault(() => remove(notification))}
+                    onClick={prevDefault(() => remove(id))}
                   />
                 </div>
               </div>