Add dialog to insert user fields for board that require them to upload (#550)

* Rebuild gRPC protocol interfaces

* Implement methods to get user fields for board/port combination

* Implement dialog to input board user fields

* Add configure and upload step when uploading to board requiring user fields

* Disable Sketch > Configure and Upload menu if board doesn't support user fields

* Fix serial upload not working with all boards

* Update i18n source file

* fix user fields UI

* regenerate cli protocol

* fix localisation

* check if user fields are empty

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

arduino-ide-extension/src/browser/style/index.css

@@ -10,6 +10,7 @@
 @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';
@@ -17,87 +18,91 @@
 @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;
+}

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

@@ -0,0 +1,32 @@
+.user-fields-container {
+  max-height: 332px;
+  overflow: auto;
+  padding: 2px;
+}
+
+.user-fields-list {
+  margin: 16px 0;
+}
+
+.user-fields-dialog-content {
+  width: 408px;
+  max-height: 491px;
+}
+
+.user-fields-dialog-content .field-label {
+  color: #2c353a;
+  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;
+}
+
+.user-fields-dialog-content .button-container {
+  justify-content: flex-end;
+}