Implement dialog to input board user fields

Author: silvanocerza

Diff for: arduino-ide-extension/src/browser/arduino-ide-frontend-module.ts

@@ -253,6 +253,7 @@ import {
   UploadCertificateDialogProps,
   UploadCertificateDialogWidget,
 } from './dialogs/certificate-uploader/certificate-uploader-dialog';
+import { UserFieldsDialog, UserFieldsDialogProps, UserFieldsDialogWidget } from './dialogs/user-fields/user-fields-dialog';
 
 const ElementQueries = require('css-element-queries/src/ElementQueries');
 
@@ -735,4 +736,10 @@ export default new ContainerModule((bind, unbind, isBound, rebind) => {
   bind(UploadCertificateDialogProps).toConstantValue({
     title: 'UploadCertificate',
   });
+
+  bind(UserFieldsDialogWidget).toSelf().inSingletonScope();
+  bind(UserFieldsDialog).toSelf().inSingletonScope();
+  bind(UserFieldsDialogProps).toConstantValue({
+    title: 'UserFields',
+  });
 });

Diff for: arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-component.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { BoardUserField } from '../../../common/protocol';
+
+export const UserFieldsComponent = ({
+  initialBoardUserFields,
+  updateUserFields,
+}: {
+  initialBoardUserFields: BoardUserField[];
+  updateUserFields: (userFields: BoardUserField[]) => void;
+}): React.ReactElement => {
+  const [boardUserFields, setBoardUserFields] = React.useState<
+    BoardUserField[]
+  >(initialBoardUserFields);
+  React.useEffect(() => {
+    setBoardUserFields(initialBoardUserFields);
+  }, [initialBoardUserFields]);
+
+  const updateUserField =
+    (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
+      let newBoardUserFields = [...boardUserFields];
+      newBoardUserFields[index].value = e.target.value;
+      setBoardUserFields(newBoardUserFields);
+    };
+
+  React.useEffect(() => {
+    updateUserFields(boardUserFields);
+  }, [boardUserFields]);
+
+  return (
+    <div>
+      {boardUserFields.map((field, index) => {
+        return (
+          <div className="dialogSection" key={index}>
+            <div className="dialogRow">
+              <label className="field-label">{field.label}</label>
+            </div>
+            <div className="dialogRow">
+              <input
+                type={field.secret ? 'password' : 'text'}
+                value={field.value}
+                className="theia-input"
+                placeholder={'Enter ' + field.label}
+                onChange={updateUserField(index)}
+              />
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};

Diff for: arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-dialog.tsx

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { inject, injectable } from 'inversify';
+import {
+  AbstractDialog,
+  DialogProps,
+  ReactWidget,
+} from '@theia/core/lib/browser';
+import { Widget } from '@phosphor/widgets';
+import { Message } from '@phosphor/messaging';
+import { UploadSketch } from '../../contributions/upload-sketch';
+import { UserFieldsComponent } from './user-fields-component';
+import { BoardUserField } from '../../../common/protocol';
+
+@injectable()
+export class UserFieldsDialogWidget extends ReactWidget {
+  protected _currentUserFields: BoardUserField[] = [];
+
+  constructor() {
+    super();
+  }
+
+  set currentUserFields(userFields: BoardUserField[]) {
+    this.setUserFields(userFields);
+  }
+
+  get currentUserFields(): BoardUserField[] {
+    return this._currentUserFields;
+  }
+
+  resetUserFieldsValue(): void {
+    this._currentUserFields = this._currentUserFields.map((field) => {
+      field.value = '';
+      return field;
+    });
+  }
+
+  protected setUserFields(userFields: BoardUserField[]): void {
+    this._currentUserFields = userFields;
+  }
+
+  protected render(): React.ReactNode {
+    return (
+      <form>
+        <UserFieldsComponent
+          initialBoardUserFields={this._currentUserFields}
+          updateUserFields={this.setUserFields.bind(this)}
+        />
+      </form>
+    );
+  }
+}
+
+@injectable()
+export class UserFieldsDialogProps extends DialogProps {}
+
+@injectable()
+export class UserFieldsDialog extends AbstractDialog<BoardUserField[]> {
+  @inject(UserFieldsDialogWidget)
+  protected readonly widget: UserFieldsDialogWidget;
+
+  constructor(
+    @inject(UserFieldsDialogProps)
+    protected readonly props: UserFieldsDialogProps
+  ) {
+    super({
+      title: UploadSketch.Commands.UPLOAD_WITH_CONFIGURATION.label || '',
+    });
+    this.titleNode.classList.add('user-fields-dialog-title');
+    this.contentNode.classList.add('user-fields-dialog-content');
+    this.appendCloseButton('CANCEL');
+    this.appendAcceptButton('UPLOAD');
+  }
+
+  set value(userFields: BoardUserField[]) {
+    this.widget.currentUserFields = userFields;
+  }
+
+  get value(): BoardUserField[] {
+    return this.widget.currentUserFields;
+  }
+
+  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();
+  }
+
+  close(): void {
+    this.widget.resetUserFieldsValue();
+    this.widget.close();
+    super.close();
+  }
+}

Diff for: arduino-ide-extension/src/browser/style/index.css

@@ -10,94 +10,99 @@
 @import './settings-dialog.css';
 @import './firmware-uploader-dialog.css';
 @import './certificate-uploader-dialog.css';
+@import './user-fields-dialog.css';
 @import './debug.css';
 @import './sketchbook.css';
 @import './cloud-sketchbook.css';
 @import './fonts.css';
 @import './custom-codicon.css';
 
 .theia-input.warning:focus {
-    outline-width: 1px;
-    outline-style: solid;
-    outline-offset: -1px;
-    opacity: 1 !important;
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+  outline-width: 1px;
+  outline-style: solid;
+  outline-offset: -1px;
+  opacity: 1 !important;
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
 .theia-input.warning {
-    background-color: var(--theia-warningBackground);
+  background-color: var(--theia-warningBackground);
 }
 
-.theia-input.warning::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
-    opacity: 1; /* Firefox */
+.theia-input.warning::placeholder {
+  /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
+  opacity: 1; /* Firefox */
 }
 
-.theia-input.warning:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+.theia-input.warning:-ms-input-placeholder {
+  /* Internet Explorer 10-11 */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
-.theia-input.warning::-ms-input-placeholder { /* Microsoft Edge */
-    color: var(--theia-warningForeground);
-    background-color: var(--theia-warningBackground);
+.theia-input.warning::-ms-input-placeholder {
+  /* Microsoft Edge */
+  color: var(--theia-warningForeground);
+  background-color: var(--theia-warningBackground);
 }
 
-/* Makes the sidepanel a bit wider when opening the widget */ 
+/* Makes the sidepanel a bit wider when opening the widget */
 .p-DockPanel-widget {
-    min-width: 200px;
-    min-height: 200px;
+  min-width: 200px;
+  min-height: 200px;
 }
 
 /* Overrule the default Theia CSS button styles. */
 button.theia-button,
 .theia-button {
-    border: 1px solid var(--theia-dropdown-border);
+  border: 1px solid var(--theia-dropdown-border);
 }
 
 button.theia-button:hover,
 .theia-button:hover {
-    border: 1px solid var(--theia-focusBorder);
+  border: 1px solid var(--theia-focusBorder);
 }
 
 button.theia-button {
-    height: 31px;
+  height: 31px;
 }
 
 button.theia-button.secondary {
-    background-color: var(--theia-secondaryButton-background);
-    color: var(--theia-secondaryButton-foreground);
+  background-color: var(--theia-secondaryButton-background);
+  color: var(--theia-secondaryButton-foreground);
 }
 
 button.theia-button.main {
-    color: var(--theia-button-foreground);
+  color: var(--theia-button-foreground);
 }
 
 /* To make the progress-bar slightly thicker, and use the color from the status bar */
 .theia-progress-bar-container {
-    width: 100%;
-    height: 4px;
+  width: 100%;
+  height: 4px;
 }
 
 .theia-progress-bar {
-    height: 4px;
-    width: 3%;
-    animation: progress-animation 1.3s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
+  height: 4px;
+  width: 3%;
+  animation: progress-animation 1.3s 0s infinite
+    cubic-bezier(0.645, 0.045, 0.355, 1);
 }
 
 .theia-notification-item-progressbar {
-    height: 4px;
-    width: 66%;
+  height: 4px;
+  width: 66%;
 }
 
 .flex-line {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
 }
 
 .fa-reload {
-    font-size: 14px;
-}
+  font-size: 14px;
+}

Diff for: arduino-ide-extension/src/browser/style/user-fields-dialog.css

@@ -0,0 +1,28 @@
+.user-fields-dialog-title {
+  font-family: Open Sans;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 27px;
+  letter-spacing: 0.01em;
+  text-align: left;
+}
+
+.user-fields-dialog-content {
+  width: 408px;
+}
+
+.user-fields-dialog-content .field-label {
+  color: #2c353a;
+  font-family: Open Sans;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+  letter-spacing: 0.01em;
+  text-align: left;
+}
+
+.user-fields-dialog-content .theia-input {
+  flex-grow: 1;
+}