confirm before install, unpack tar first steps

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

src/renderer/components/+extensions/extensions.scss

@@ -51,15 +51,12 @@
       align-self: flex-start;
     }
   }
+}
 
-  .SearchInput {
-    margin-top: $margin / 2;
-    margin-bottom: $margin * 2;
-    max-width: none;
-
-    > label {
-      padding: $padding $padding * 2;
-      border-radius: $radius;
-    }
+.InstallingExtensionNotification {
+  .Button {
+    background-color: unset;
+    border: 1px solid currentColor;
+    box-shadow: none !important;
   }
 }

src/renderer/components/+extensions/extensions.tsx

@@ -1,6 +1,7 @@
 import "./extensions.scss";
-import { remote, shell } from "electron";
+import { app, remote, shell } from "electron";
 import path from "path";
+import tar from "tar";
 import fse from "fs-extra";
 import React from "react";
 import { computed, observable } from "mobx";
@@ -9,7 +10,7 @@ import { t, Trans } from "@lingui/macro";
 import { _i18n } from "../../i18n";
 import { Button } from "../button";
 import { WizardLayout } from "../layout/wizard-layout";
-import { DropFileInput, Input, InputValidators } from "../input";
+import { DropFileInput, Input, InputValidators, SearchInput } from "../input";
 import { Icon } from "../icon";
 import { PageLayout } from "../layout/page-layout";
 import { Clipboard } from "../clipboard";
@@ -76,7 +77,7 @@ export class Extensions extends React.Component {
     if (tarballUrl) {
       try {
         const { promise: filePromise } = downloadFile({ url: tarballUrl });
-        this.installExtensionFromFile([await filePromise]);
+        this.requestInstall([await filePromise]);
       } catch (err) {
         Notifications.error(`Installing extension from ${tarballUrl} has failed: ${String(err)}`);
       }
@@ -84,24 +85,49 @@ export class Extensions extends React.Component {
   }
 
   installFromSelectFileDialog = async (filePaths: string[]) => {
-    logger.info('Install from select dialog', { filePaths });
+    logger.info('Install from file-select dialog', { files: filePaths });
     const files: File[] = await Promise.all(
       filePaths.map(filePath => {
         const fileName = path.basename(filePath);
         return fse.readFile(filePath).then(buffer => new File([buffer], fileName));
       })
     );
-    return this.installExtensionFromFile(files);
+    return this.requestInstall(files);
   }
 
   installOnDrop = (files: File[]) => {
-    logger.info('Install from D&D', { files });
-    return this.installExtensionFromFile(files);
+    logger.info('Install from D&D', { files: files.map(file => file.path) });
+    return this.requestInstall(files);
   }
 
   // todo
-  async installExtensionFromFile(files: File[]) {
-    console.log(`Install files:`, files);
+  async installExtension(tarball: File, cleanUp?: () => void) {
+    logger.info(`Installing extension ${tarball.name} to ${this.extensionsPath}`);
+    const tempDir = path.join(app.getPath("temp"), "extensions");
+    await fse.ensureDir(tempDir);
+    const unpack = () => {
+      tar.extract({
+        cwd: tempDir,
+      })
+    }
+    if (cleanUp) {
+      cleanUp();
+    }
+  }
+
+  // todo: show name and description from unpacked archive
+  async requestInstall(files: File[]) {
+    files.forEach((ext: File) => {
+      const removeNotification = Notifications.info(
+        <div className="InstallingExtensionNotification flex gaps">
+          <p>Install extension <em>{ext.name}</em>?</p>
+          <Button
+            label="Confirm"
+            onClick={() => this.installExtension(ext, removeNotification)}
+          />
+        </div>
+      );
+    })
   }
 
   renderInfo() {
@@ -140,11 +166,11 @@ export class Extensions extends React.Component {
           </div>
           <Button
             primary
-            label="Select local extensions"
+            label="Select extensions to install"
             onClick={this.selectLocalExtensionsDialog}
           />
           <p className="hint">
-            <Trans><b>Pro-Tip 1</b>: you can download NPM-package to local folder with</Trans>
+            <Trans><b>Pro-Tip 1</b>: you can download tarball from NPM via</Trans>
             <Clipboard showNotification>
               <code>npm pack %package-name</code>
             </Clipboard>
@@ -202,10 +228,7 @@ export class Extensions extends React.Component {
       <PageLayout showOnTop className="Extensions" header={<h2>Extensions</h2>}>
         <DropFileInput onDropFiles={this.installOnDrop}>
           <WizardLayout infoPanel={this.renderInfo()}>
-            <Input
-              autoFocus
-              theme="round-black"
-              className="SearchInput"
+            <SearchInput
               placeholder={_i18n._(t`Search extensions`)}
               value={this.search}
               onChange={(value) => this.search = value}

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>