Extend submit support ID with problem description field (#3350)

Author: haslinghuis

locales/en/messages.json

@@ -555,6 +555,9 @@
     "supportWarningDialogText": {
         "message": "Please confirm data submission to the Betaflight team.<br><br>This process will run some commands and submit the output to the build server.<br><br>You will then be provided a unique identifier for your data submission.<br><br>Please ensure you provide this unique identifier to the Betaflight team when using Discord or opening an issues on Github."
     },
+    "supportWarningDialogInputPlaceHolder": {
+        "message": "Describe the problem"
+    },
     "releaseCheckLoaded": {
         "message" : "Loaded release information for $1 from GitHub."
     },

src/css/tabs/cli.less

@@ -56,6 +56,16 @@
 		border: 1px solid var(--subtleAccent);
 		resize: none;
 	}
+	textarea[name='supportWarningDialogInput'] {
+		-webkit-box-sizing: border-box;
+		width: 100%;
+		margin-top: 8px;
+		height: 22px;
+		line-height: 20px;
+		padding-left: 5px;
+		border: 1px solid var(--subtleAccent);
+		resize: none;
+	}
 	#content-watermark {
 		z-index: 0;
 	}

src/js/tabs/cli.js

@@ -273,17 +273,19 @@ cli.initialize = function (callback) {
 
         $('.tab-cli .support').click(function() {
 
-            function submitSupportData() {
+            function submitSupportData(data) {
                 clearHistory();
                 const api = new BuildApi();
-                api.getSupportCommands((commands) => {
+
+                api.getSupportCommands(commands => {
+                    commands = [`###\n# Problem description\n# ${data}\n###`, ...commands];
                     executeCommands(commands.join('\n')).then(() => {
                         const delay = setInterval(() => {
                             const time = new Date().getTime();
                             if (self.lastArrival < time - 250) {
                                 clearInterval(delay);
                                 const text = self.outputHistory;
-                                api.submitSupportData(text, (key) => {
+                                api.submitSupportData(text, key => {
                                     writeToOutput(i18n.getMessage('buildServerSupportRequestSubmission', [key]));
                                 });
                             }
@@ -292,15 +294,7 @@ cli.initialize = function (callback) {
                 });
             }
 
-            const dialogSettings = {
-                title: i18n.getMessage("supportWarningDialogTitle"),
-                text: i18n.getMessage("supportWarningDialogText"),
-                buttonYesText: i18n.getMessage("submit"),
-                buttonNoText: i18n.getMessage("cancel"),
-                buttonYesCallback: submitSupportData,
-            };
-
-            GUI.showYesNoDialog(dialogSettings);
+            self.supportWarningDialog(submitSupportData);
         });
 
         // Tab key detection must be on keydown,
@@ -561,6 +555,25 @@ cli.send = function (line, callback) {
     serial.send(bufferOut, callback);
 };
 
+cli.supportWarningDialog = function (onAccept) {
+    const supportWarningDialog = $('.supportWarningDialog')[0];
+    const supportWarningDialogTextArea = $('.tab-cli textarea[name="supportWarningDialogInput"]');
+
+    if (!supportWarningDialog.hasAttribute('open')) {
+        supportWarningDialog.showModal();
+
+        $('.cancel').on('click', function() {
+            supportWarningDialog.close();
+        });
+
+        $('.submit').on('click', function() {
+            supportWarningDialog.close();
+            onAccept(supportWarningDialogTextArea.val());
+            supportWarningDialogTextArea.val('');
+        });
+    }
+};
+
 cli.cleanup = function (callback) {
     if (TABS.cli.GUI.snippetPreviewWindow) {
         TABS.cli.GUI.snippetPreviewWindow.destroy();

src/tabs/cli.html

@@ -43,4 +43,18 @@
             <a class="confirm" href="#" i18n="cliConfirmSnippetBtn"></a>
         </div>
     </div>
+
+    <dialog class="supportWarningDialog">
+        <h3 i18n="supportWarningDialogTitle"></h3>
+        <div class="content">
+            <div i18n="supportWarningDialogText"></div>
+            <div>
+                <textarea name="supportWarningDialogInput" i18n_placeholder="supportWarningDialogInputPlaceHolder" rows="3" cols="0"></textarea>
+            </div>
+        </div>
+        <div class="buttons">
+            <a class="submit regular-button" href="#" i18n="submit"></a>
+            <a class="cancel regular-button" href="#" i18n="cancel"></a>
+        </div>
+    </dialog>
 </div>