From d7a56213eae0a108c16c449d5e118e7a13554f6d Mon Sep 17 00:00:00 2001
From: Marc Brooks <IDisposable@gmail.com>
Date: Tue, 30 Sep 2025 17:45:00 -0500
Subject: [PATCH] Added force page reload to the onClose events of
 update/reboot

Updated the text about reboot/update and used a smaller button.
Ensure we get the correct UI version.
Also fixed comment about the system update progress
---
 .../devices.$id.settings.general.reboot.tsx   |  8 ++++-
 .../devices.$id.settings.general.update.tsx   | 33 ++++++++++++-------
 2 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.general.reboot.tsx b/ui/src/routes/devices.$id.settings.general.reboot.tsx
index db0e0530..2c73b0a0 100644
--- a/ui/src/routes/devices.$id.settings.general.reboot.tsx
+++ b/ui/src/routes/devices.$id.settings.general.reboot.tsx
@@ -7,6 +7,12 @@ import { Button } from "@components/Button";
 export default function SettingsGeneralRebootRoute() {
   const navigate = useNavigate();
   const { send } = useJsonRpc();
+  
+  const onClose = useCallback(() => {
+    navigate(".."); // back to the devices.$id.settings page
+    window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
+  }, [navigate]);
+
 
   const onConfirmUpdate = useCallback(() => {
     // This is where we send the RPC to the golang binary
@@ -16,7 +22,7 @@ export default function SettingsGeneralRebootRoute() {
   {
     /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
   }
-  return <Dialog onClose={() => navigate("..")} onConfirmUpdate={onConfirmUpdate} />;
+  return <Dialog onClose={onClose} onConfirmUpdate={onConfirmUpdate} />;
 }
 
 export function Dialog({
diff --git a/ui/src/routes/devices.$id.settings.general.update.tsx b/ui/src/routes/devices.$id.settings.general.update.tsx
index 5847ddfe..bb64e502 100644
--- a/ui/src/routes/devices.$id.settings.general.update.tsx
+++ b/ui/src/routes/devices.$id.settings.general.update.tsx
@@ -1,5 +1,5 @@
-import { useLocation, useNavigate } from "react-router";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
 import { MdConnectWithoutContact, MdRestartAlt } from "react-icons/md";
 
@@ -19,6 +19,11 @@ export default function SettingsGeneralUpdateRoute() {
   const { setModalView, otaState } = useUpdateStore();
   const { send } = useJsonRpc();
 
+  const onClose = useCallback(() => {
+    navigate(".."); // back to the devices.$id.settings page
+    window.location.reload(); // force a full reload to ensure the current device/cloud UI version is loaded
+  }, [navigate]);
+
   const onConfirmUpdate = useCallback(() => {
     send("tryUpdate", {});
     setModalView("updating");
@@ -39,7 +44,7 @@ export default function SettingsGeneralUpdateRoute() {
   {
     /* TODO: Migrate to using URLs instead of the global state. To simplify the refactoring, we'll keep the global state for now. */
   }
-  return <Dialog onClose={() => navigate("..")} onConfirmUpdate={onConfirmUpdate} />;
+  return <Dialog onClose={onClose} onConfirmUpdate={onConfirmUpdate} />;
 }
 
 export function Dialog({
@@ -223,7 +228,7 @@ function UpdatingDeviceState({
         100,
       );
     } else {
-      // System: 10% download, 90% update
+      // System: 10% download, 10% verification, 80% update
       return Math.min(
         downloadProgress * 0.1 + verificationProgress * 0.1 + updateProgress * 0.8,
         100,
@@ -287,17 +292,19 @@ function UpdatingDeviceState({
                   <span className="font-medium text-black dark:text-white">
                     Rebooting the device to complete the update...
                   </span>
-                  <p>
+                  <p className="font-medium text-black dark:text-white">
                     This may take a few minutes. The device will automatically
-                    reconnect once it is back online. If it doesn{"'"}t, you can
-                    manually reconnect.
+                    reconnect once it is back online.<br/>
+                    If it doesn{"'"}t reconnect automatically, you can manually
+                    reconnect by clicking here: 
                     <LinkButton
-                      size="SM"
+                      size="XS"
                       theme="light"
                       text="Reconnect to KVM"
                       LeadingIcon={MdConnectWithoutContact}
                       textAlign="center"
-                      to={".."}
+                      reloadDocument={true}
+                      to={"/"}
                     />
                   </p>
                 </div>
@@ -307,15 +314,17 @@ function UpdatingDeviceState({
                     <span className="font-medium text-black dark:text-white">
                       Device reboot is pending...
                     </span>
-                    <p>
-                      The JetKVM is preparing to reboot. This may take a while. If it doesn{"'"}t automatically reboot
-                      after a few minutes, you can manually request a reboot.
+                    <p className="font-medium text-black dark:text-white">
+                      The JetKVM is preparing to reboot. This may take a while.<br/>
+                      If it doesn{"'"}t automatically reboot after a few minutes, you
+                      can manually request a reboot by clicking here:
                       <LinkButton
-                        size="SM"
+                        size="XS"
                         theme="light"
                         text="Reboot the KVM"
                         LeadingIcon={MdRestartAlt}
                         textAlign="center"
+                        reloadDocument={true}
                         to={"../reboot"}
                       />
                     </p>