[ATL-1533] Firmware&Certificate Uploader (#469)

Co-authored-by: Alberto Iannaccone <a.iannaccone@arduino.cc>

arduino-ide-extension/src/browser/dialogs/cloud-share-sketch-dialog.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { clipboard } from 'electron';
+import {
+  AbstractDialog,
+  ReactWidget,
+  DialogProps,
+} from '@theia/core/lib/browser';
+import { CreateApi } from '../create/create-api';
+
+const RadioButton = (props: {
+  id: string;
+  changed: (evt: React.BaseSyntheticEvent) => void;
+  value: string;
+  isSelected: boolean;
+  isDisabled: boolean;
+  label: string;
+}) => {
+  return (
+    <p className="RadioButton">
+      <input
+        id={props.id}
+        onChange={props.changed}
+        value={props.value}
+        type="radio"
+        checked={props.isSelected}
+        disabled={props.isDisabled}
+      />
+      <label htmlFor={props.id}>{props.label}</label>
+    </p>
+  );
+};
+
+export const ShareSketchComponent = ({
+  treeNode,
+  createApi,
+  domain = 'https://create.arduino.cc',
+}: {
+  treeNode: any;
+  createApi: CreateApi;
+  domain?: string;
+}): React.ReactElement => {
+  const [loading, setloading] = React.useState<boolean>(false);
+
+  const radioChangeHandler = async (event: React.BaseSyntheticEvent) => {
+    setloading(true);
+    const sketch = await createApi.editSketch({
+      id: treeNode.sketchId,
+      params: {
+        is_public: event.target.value === 'private' ? false : true,
+      },
+    });
+    // setPublicVisibility(sketch.is_public);
+    treeNode.isPublic = sketch.is_public;
+    setloading(false);
+  };
+
+  const sketchLink = `${domain}/editor/_/${treeNode.sketchId}/preview`;
+  const embedLink = `<iframe src="${sketchLink}?embed" style="height:510px;width:100%;margin:10px 0" frameborder=0></iframe>`;
+
+  return (
+    <div id="widget-container arduino-sharesketch-dialog">
+      <p>Choose visibility of your Sketch:</p>
+      <RadioButton
+        changed={radioChangeHandler}
+        id="1"
+        isSelected={treeNode.isPublic === false}
+        label="Private. Only you can view the Sketch."
+        value="private"
+        isDisabled={loading}
+      />
+      <RadioButton
+        changed={radioChangeHandler}
+        id="2"
+        isSelected={treeNode.isPublic === true}
+        label="Public. Anyone with the link can view the Sketch."
+        value="public"
+        isDisabled={loading}
+      />
+
+      {treeNode.isPublic && (
+        <div>
+          <p>Link:</p>
+          <div className="sketch-link">
+            <input
+              type="text"
+              readOnly
+              value={sketchLink}
+              className="theia-input"
+            />
+            <button
+              onClick={() => clipboard.writeText(sketchLink)}
+              value="copy"
+              className="theia-button secondary"
+            >
+              Copy
+            </button>
+          </div>
+          <p>Embed:</p>
+          <div className="sketch-link-embed">
+            <textarea
+              readOnly
+              value={embedLink}
+              className="theia-input stretch"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+@injectable()
+export class ShareSketchWidget extends ReactWidget {
+  constructor(private treeNode: any, private createApi: CreateApi) {
+    super();
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <ShareSketchComponent
+        treeNode={this.treeNode}
+        createApi={this.createApi}
+      />
+    );
+  }
+}
+
+@injectable()
+export class ShareSketchDialogProps extends DialogProps {
+  readonly node: any;
+  readonly createApi: CreateApi;
+}
+
+@injectable()
+export class ShareSketchDialog extends AbstractDialog<void> {
+  protected widget: ShareSketchWidget;
+
+  constructor(
+    @inject(ShareSketchDialogProps)
+    protected readonly props: ShareSketchDialogProps
+  ) {
+    super({ title: props.title });
+    this.contentNode.classList.add('arduino-share-sketch-dialog');
+    this.widget = new ShareSketchWidget(props.node, props.createApi);
+  }
+
+  get value(): void {
+    return;
+  }
+  protected onAfterAttach(msg: Message): void {
+    if (this.widget.isAttached) {
+      Widget.detach(this.widget);
+    }
+    Widget.attach(this.widget, this.contentNode);
+    super.onAfterAttach(msg);
+    this.update();
+  }
+
+  protected onUpdateRequest(msg: Message): void {
+    super.onUpdateRequest(msg);
+    this.widget.update();
+  }
+
+  protected onActivateRequest(msg: Message): void {
+    super.onActivateRequest(msg);
+    this.widget.activate();
+  }
+}