Add initial version for uploading additional files during install

src/components/editormodal/EditorModal.tsx

@@ -26,7 +26,7 @@ const EditorModal = ({ file, fileData, onClose, onSave }: EditorModalProps) => {
     const [tab, setTab] = useState<ConfigurationTab>(ConfigurationTab.GENERAL);
 
     return (
-        <Modal show={!!file} size="lg" scrollable={true} centered={false}>
+        <Modal show={!!file} size="xl" scrollable={true} centered={false}>
             <Modal.Header
                 style={{
                     paddingBottom: "0px",

src/components/fields/BooleanField.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { Col, Form, Row } from "react-bootstrap";
+import { Col, Form, InputGroup, Row } from "react-bootstrap";
+import ToolTip from "../tooltip/ToolTip";
 
 type BooleanFieldProps = {
     label?: string;
@@ -18,19 +19,21 @@ const BooleanField = ({
 }: BooleanFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
-                <Form.Check
-                    type="switch"
-                    aria-label={placeholder}
-                    onChange={(event) =>
-                        setValue(Boolean(event.target.checked))
-                    }
-                    checked={Boolean(value)}
-                />
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
+            <Col sm="8">
+                <InputGroup>
+                    <Form.Check
+                        style={{ paddingTop: "8px" }}
+                        type="switch"
+                        aria-label={placeholder}
+                        onChange={(event) =>
+                            setValue(Boolean(event.target.checked))
+                        }
+                        checked={Boolean(value)}
+                    />
+                </InputGroup>
             </Col>
         </Form.Group>
     );

src/components/fields/PinField.tsx

@@ -5,6 +5,7 @@ import { Board } from "../../model/Boards";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import ToolTip from "../tooltip/ToolTip";
 
 type SelectFieldProps = {
     label?: string;
@@ -56,10 +57,10 @@ const PinField = ({
 
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <InputGroup>
                     <Form.Select
                         aria-label={placeholder}
@@ -122,7 +123,6 @@ const PinField = ({
                         </InputGroup.Text>
                     )}
                 </InputGroup>
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
                 {hasConflict && (
                     <Form.Text muted>
                         <Alert variant="warning">

src/components/fields/SelectField.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from "react";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
+import ToolTip from "../tooltip/ToolTip";
 
 type Option = {
     name: string;
@@ -29,10 +30,10 @@ const SelectField = ({
 }: SelectFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <InputGroup>
                     <Form.Select
                         disabled={disabled}
@@ -60,8 +61,6 @@ const SelectField = ({
                     </Form.Select>
                     {groupedControls && groupedControls}
                 </InputGroup>
-
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
             </Col>
         </Form.Group>
     );

src/components/fields/TextField.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Col, Form, InputGroup, Row } from "react-bootstrap";
 import { ReactElement } from "react-markdown/lib/react-markdown";
+import ToolTip from "../tooltip/ToolTip";
 
 type TextFieldProps = {
     label?: string;
@@ -31,8 +32,8 @@ const TextField = ({
 }: TextFieldProps) => {
     return (
         <Form.Group as={Row} className="mb-3">
-            <Form.Label column sm="3">
-                {label}
+            <Form.Label column sm="4">
+                {label} <ToolTip>{helpText}</ToolTip>
             </Form.Label>
             <Col>
                 <InputGroup hasValidation>
@@ -53,7 +54,6 @@ const TextField = ({
                     {unit && <InputGroup.Text>{unit}</InputGroup.Text>}
                     {groupedControls && groupedControls}
                 </InputGroup>
-                {helpText && <Form.Text muted>{helpText}</Form.Text>}
             </Col>
         </Form.Group>
     );

src/components/fields/UnknownField.tsx

@@ -36,10 +36,10 @@ const UnknownField = <T extends unknown>({
     return (
         <Form.Group as={Row} className="mb-3">
             <h4>{label}</h4>
-            <Form.Label column sm="3">
+            <Form.Label column sm="4">
                 {label}
             </Form.Label>
-            <Col sm="9">
+            <Col sm="8">
                 <Form.Control
                     as="textarea"
                     rows={6}

src/components/installermodal/ConfirmPage.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
 import { faClose, faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,17 +10,25 @@ import {
     GithubReleaseManifest
 } from "../../services";
 import SelectField from "../fields/SelectField";
+import BooleanField from "../fields/BooleanField";
 
 type Props = {
     onCancel: () => void;
-    onInstall: (baud: number) => Promise<void>;
+    onInstall: (baud: number, files: string[]) => Promise<void>;
     release: GithubRelease;
     manifest: GithubReleaseManifest;
     choice: FirmwareChoice;
 };
 
-const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
+const ConfirmPage = ({
+    release,
+    choice,
+    manifest,
+    onInstall,
+    onCancel
+}: Props) => {
     const [baud, setBaud] = useLocalStorage("baud", "921600");
+    const [files, setFiles] = useState<string[]>([]);
 
     return (
         <>
@@ -34,23 +42,12 @@ const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
                 </p>
 
                 <Col lg={8}>
-                    <SelectField
-                        label="Baud rate"
-                        options={[
-                            {
-                                name: "921600",
-                                value: "921600"
-                            },
-                            { name: "115200", value: "115200" }
-                        ]}
-                        value={baud}
-                        setValue={(value) => setBaud(value)}
-                    ></SelectField>
-
-                    {/*manifest.files &&
+                    {manifest.files && <h5>Extra Options</h5>}
+                    {manifest.files &&
                         Object.keys(manifest.files).map((key) => {
                             return (
                                 <BooleanField
+                                    key={key}
                                     setValue={(value: boolean) => {
                                         if (value) {
                                             setFiles((files) => [
@@ -67,14 +64,30 @@ const ConfirmPage = ({ release, choice, onInstall, onCancel }: Props) => {
                                     value={files.includes(key)}
                                 />
                             );
-                        })*/}
+                        })}
+                </Col>
+
+                <Col lg={8}>
+                    <SelectField
+                        label="Installation speed"
+                        options={[
+                            {
+                                name: "921600 baud",
+                                value: "921600"
+                            },
+                            { name: "115200 baud", value: "115200" }
+                        ]}
+                        value={baud}
+                        setValue={(value) => setBaud(value)}
+                        helpText="Some controllers need to be installed at a lower speed. If you are experiencing problems you can try and decrease the speed."
+                    ></SelectField>
                 </Col>
             </Modal.Body>
             <Modal.Footer>
                 <Button onClick={onCancel} variant="secondary">
                     <FontAwesomeIcon icon={faClose as IconDefinition} /> Cancel
                 </Button>
-                <Button onClick={() => onInstall(+baud)}>
+                <Button onClick={() => onInstall(+baud, files)}>
                     <FontAwesomeIcon
                         icon={faSave as IconDefinition}
                         style={{ marginRight: "8px" }}

src/components/installermodal/InstallerModal.tsx

@@ -4,10 +4,13 @@ import { Modal } from "react-bootstrap";
 import {
     ControllerStatus,
     FirmwareChoice,
+    FirmwareFile,
     GithubRelease,
     GithubReleaseManifest,
+    GithubService,
     InstallService,
-    InstallerState
+    InstallerState,
+    validateSignature
 } from "../../services";
 import { Progress } from "../../panels";
 import { FlashProgress } from "../../services/FlashService";
@@ -53,7 +56,7 @@ const InstallerModal = ({
         console.log(data);
     };
 
-    const onInstall = async (baud: number) => {
+    const onInstall = async (baud: number, files: string[]) => {
         try {
             await controllerService?.disconnect(false);
         } catch (error) {
@@ -85,6 +88,33 @@ const InstallerModal = ({
                 setState(InstallerState.ERROR);
             }
 
+            if (!hasErrors) {
+                setState(InstallerState.UPLOADING_FILES);
+            }
+
+            await Promise.all(
+                files.map((file) => {
+                    const extraFile = manifest.files?.[file] as FirmwareFile;
+
+                    if (!extraFile) {
+                        return;
+                    }
+
+                    console.log("Uploading: ", extraFile);
+                    return GithubService.getExtraFile(release, extraFile)
+                        .then((data) => {
+                            validateSignature(extraFile.signature, data);
+                            return data;
+                        })
+                        .then((data) =>
+                            controllerService?.uploadFile(
+                                extraFile["controller-path"],
+                                Buffer.from(data)
+                            )
+                        );
+                })
+            );
+
             if (!hasErrors) {
                 setState(InstallerState.DONE);
             }
@@ -146,6 +176,17 @@ const InstallerModal = ({
                     </Log>
                 </Modal.Body>
             )}
+            {state === InstallerState.UPLOADING_FILES && (
+                <Modal.Body>
+                    <h3>Uploading files</h3>
+                    <p>
+                        Uploading files... <Spinner />
+                    </p>
+                    <Log show={showLog} onShow={setShowLog}>
+                        {log}
+                    </Log>
+                </Modal.Body>
+            )}
             {state === InstallerState.DONE && (
                 <>
                     <Modal.Body>

src/components/tooltip/ToolTip.tsx

@@ -0,0 +1,27 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { ReactNode } from "react";
+import { OverlayTrigger, Tooltip } from "react-bootstrap";
+
+type Props = {
+    children: ReactNode;
+};
+
+const ToolTip = ({ children }: Props) => {
+    return (
+        <span style={{ marginLeft: "2px" }}>
+            {children && (
+                <OverlayTrigger overlay={<Tooltip>{children}</Tooltip>}>
+                    <FontAwesomeIcon
+                        icon={faInfoCircle as IconDefinition}
+                        size="sm"
+                        color="#3e6cf8"
+                    />
+                </OverlayTrigger>
+            )}
+        </span>
+    );
+};
+
+export default ToolTip;