fix(minimal-launchpad): Handle errors during the fetching of TOML fil…

…e. (espressif#54) Co-authored-by: Rushikesh Patange <rushikesh.patange@espressif.com>
RushikeshPatange · Nov 28, 2023 · 0e9aab3 · 0e9aab3
1 parent 263e9a5
commit 0e9aab3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/minimal-launchpad/index.html b/minimal-launchpad/index.html
@@ -33,7 +33,7 @@ <h5 class="modal-title" id="errorTroubleshootModalTitle">Connection In Progress<
                 <div class="modal-body">
                     <p id="errorMessageDescription">It's taking longer than usual for connecting the device.</p>
                     <p class="errorMessage" id="errorMessage" style="display: none;"></p>
-                    <p>Refer to the troubleshooting guide below for assistance in resolving the issue.</p>
+                    <p id="troubleshootAccordionLabel">Refer to the troubleshooting guide below for assistance in resolving the issue.</p>
                     <div class="accordion" id="troubleshootAccordion">
                         <div class="accordion-item border-0">
                             <h2 class="accordion-header" id="headingOne">
@@ -175,7 +175,7 @@ <h4 class="topic" data-target-tab-panel-id="about">
             </div>
         </div>
         <div style="position: absolute; top: 50%;">
-            <button class="connectButton" id="connectButton" tabindex="0" type="button">Connect Your Device<span
+            <button class="connectButton" id="connectButton" tabindex="0" type="button" disabled>Connect Your Device<span
                     class="span-svg"><svg class="svg" focusable="false" aria-hidden="true" viewBox="0 0 24 24"
                         data-testid="EastIcon">
                         <path fill="#FFFFFF" d="m15 5-1.41 1.41L18.17 11H2v2h16.17l-4.59 4.59L15 19l7-7-7-7z"></path>

diff --git a/minimal-launchpad/minimal_ui_index.js b/minimal-launchpad/minimal_ui_index.js
@@ -15,10 +15,13 @@ const errorTroubleshootModalTitle = document.getElementById("errorTroubleshootMo
 const waitButton = document.getElementById("waitButton");
 const errorMessage = document.getElementById("errorMessage");
 const errorMessageDescription = document.getElementById("errorMessageDescription");
+const troubleshootAccordionLabel = document.getElementById("troubleshootAccordionLabel");
+const troubleshootAccordion = document.getElementById("troubleshootAccordion");
 const deviceConnectionDelayTimeout = 30000;
 let deviceConnectionTimeout = undefined;
 const commandHistory = [];
 let historyIndex = -1;
+let tomlFileURL = undefined;
 
 import * as utilities from "../js/utils.js"
 import * as esptooljs from "../node_modules/esptool-js/bundle.js";
@@ -134,7 +137,6 @@ function MDtoHtml() {
 }
 // Build the Minimal Launchpad UI using the config toml file.
 async function buildMinimalLaunchpadUI() {
-    let tomlFileURL = undefined;
     const urlParams = new URLSearchParams(window.location.search);
     const url = window.location.search;
     const parameter = "flashConfigURL";
@@ -156,9 +158,19 @@ async function buildMinimalLaunchpadUI() {
             }
             if (xhr.readyState === 4 && xhr.status === 200) {
                 config = toml.parse(xhr.responseText);
-                return config;
+                connectButton.disabled = false;
             }
         }
+        xhr.onerror = function () {
+            connectButton.style.display = "none";
+            waitButton.style.display = "none";
+            troubleshootAccordionLabel.style.display = "none"
+            troubleshootAccordion.style.display = "none";
+            errorTroubleshootModalTitle.textContent = "Error getting config file";
+            errorMessageDescription.innerHTML = `We are encountering issues downloading the configuration file. Please verify if you can 
+            download <a href=${tomlFileURL} target="_blank">this file</a>, if not, check your network settings (Firewall, VPN, etc.) and try again.`
+            errorTroubleshootModalToggleButton.click();
+        }
     } else {
         connectButton.disabled = true;
         alertContainer.style.display = 'block';
@@ -168,7 +180,7 @@ async function buildMinimalLaunchpadUI() {
     }
 }
 
-config = await buildMinimalLaunchpadUI();
+await buildMinimalLaunchpadUI();
 
 $(function () {
     utilities.initializeTooltips();