From b3be4fa169e08e590538b9c67794628962e3a94d Mon Sep 17 00:00:00 2001
From: Jason Wallace <jdeanwallace@gmail.com>
Date: Tue, 27 Aug 2024 15:23:10 +0200
Subject: [PATCH] Direct users to the Network Status dialog (#1831)

Resolves https://github.com/tiny-pilot/tinypilot/issues/1826

This PR adds a convenience button that opens the Network Status dialog
after a user configures their Wi-Fi credentials.

Additionally, we've added a hint to the tooltip of the
`<connection-indicator>` to direct users to the Network Status dialog.

Demo video:


https://github.com/user-attachments/assets/210fe26e-4e03-475f-9e99-f0e21d75cc20

<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1831"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>
---
 .../custom-elements/connection-indicator.html | 12 ++++++++----
 .../custom-elements/wifi-dialog.html          | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/app/templates/custom-elements/connection-indicator.html b/app/templates/custom-elements/connection-indicator.html
index 79830d9fa..92a7f8c5b 100644
--- a/app/templates/custom-elements/connection-indicator.html
+++ b/app/templates/custom-elements/connection-indicator.html
@@ -64,13 +64,17 @@
     </div>
   </div>
   <div class="status-bar-tooltip">
-    <div class="connected-text">
+    <p class="connected-text">
       Your browser is connected to your TinyPilot device.
-    </div>
-    <div class="disconnected-text">
+    </p>
+    <p class="disconnected-text">
       Your browser is currently unable to connect to your TinyPilot device over
       the network.
-    </div>
+    </p>
+    <p>
+      See “System”&nbsp;&gt; “Networking”&nbsp;&gt; “Status” for more
+      information.
+    </p>
   </div>
 </template>
 
diff --git a/app/templates/custom-elements/wifi-dialog.html b/app/templates/custom-elements/wifi-dialog.html
index 951141180..4af5c9101 100644
--- a/app/templates/custom-elements/wifi-dialog.html
+++ b/app/templates/custom-elements/wifi-dialog.html
@@ -135,6 +135,12 @@ <h3>Wi-Fi Credentials Saved</h3>
       Your Wi-Fi credentials have been saved. When your TinyPilot device is in
       range of the wireless network, it will automatically try to connect to it.
     </p>
+    <p>
+      To monitor the Wi-Fi connection status, open the "Network Status" dialog.
+    </p>
+    <button id="network-status-button" class="btn-action" type="button">
+      Open Network Status
+    </button>
     <button class="close-button" type="button">Close</button>
   </div>
 
@@ -200,6 +206,9 @@ <h3>Wi-Fi Credentials Removed</h3>
             ),
             enableButton: this.shadowRoot.querySelector("#enable-button"),
             disableButton: this.shadowRoot.querySelector("#disable-button"),
+            networkStatusButton: this.shadowRoot.querySelector(
+              "#network-status-button"
+            ),
           };
 
           this.addEventListener("overlay-shown", () => this._initialize());
@@ -218,6 +227,16 @@ <h3>Wi-Fi Credentials Removed</h3>
           this._elements.disableButton.addEventListener("click", () => {
             this._disable();
           });
+          this._elements.networkStatusButton.addEventListener("click", () => {
+            this.dispatchEvent(new DialogClosedEvent());
+            const menuBar = document.getElementById("menu-bar");
+            menuBar.dispatchEvent(
+              new CustomEvent("network-status-dialog-requested", {
+                bubbles: true,
+                composed: true,
+              })
+            );
+          });
           this.shadowRoot.querySelectorAll(".close-button").forEach((el) =>
             el.addEventListener("click", () => {
               this.dispatchEvent(new DialogClosedEvent());