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/clipboard/clipboard.scss

@@ -0,0 +1,3 @@
+.Clipboard {
+  cursor: pointer;
+}

src/renderer/components/clipboard/clipboard.tsx

@@ -0,0 +1,62 @@
+import "./clipboard.scss";
+import React from "react";
+import { findDOMNode } from "react-dom";
+import { autobind } from "../../../common/utils";
+import { Notifications } from "../notifications";
+import { copyToClipboard } from "../../utils/copyToClipboard";
+import logger from "../../../main/logger";
+import { cssNames } from "../../utils";
+
+export interface CopyToClipboardProps {
+  resetSelection?: boolean;
+  showNotification?: boolean;
+  cssSelectorLimit?: string; // allows to copy partial content with css-selector in children-element context
+  getNotificationMessage?(copiedText: string): React.ReactNode;
+}
+
+export const defaultProps: Partial<CopyToClipboardProps> = {
+  getNotificationMessage(copiedText: string) {
+    return <p>Copied to clipboard: <em>{copiedText}</em></p>;
+  }
+};
+
+export class Clipboard extends React.Component<CopyToClipboardProps> {
+  static displayName = "Clipboard";
+  static defaultProps = defaultProps as object;
+
+  get rootElem(): HTMLElement {
+    return findDOMNode(this) as HTMLElement;
+  }
+
+  get rootReactElem(): React.ReactElement<React.HTMLProps<any>> {
+    return React.Children.only(this.props.children) as React.ReactElement;
+  }
+
+  @autobind()
+  onClick(evt: React.MouseEvent) {
+    if (this.rootReactElem.props.onClick) {
+      this.rootReactElem.props.onClick(evt); // pass event to children-root-element if any
+    }
+    const { showNotification, resetSelection, getNotificationMessage, cssSelectorLimit } = this.props;
+    const contentElem = this.rootElem.querySelector<any>(cssSelectorLimit) || this.rootElem;
+    if (contentElem) {
+      const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection });
+      if (copied && showNotification) {
+        Notifications.ok(getNotificationMessage(copiedText));
+      }
+    }
+  }
+
+  render() {
+    try {
+      const rootElem = this.rootReactElem;
+      return React.cloneElement(rootElem, {
+        className: cssNames(Clipboard.displayName, rootElem.props.className),
+        onClick: this.onClick,
+      });
+    } catch (err) {
+      logger.error(`Invalid usage components/CopyToClick usage. Children must contain root html element.`, { err: String(err) });
+      return this.rootReactElem;
+    }
+  }
+}

src/renderer/components/clipboard/index.ts

@@ -0,0 +1 @@
+export * from "./clipboard";