Better status messages and ui feedback when needing user actions on the firmware tool (#1331)

gui/public/i18n/en/translation.ftl

@@ -1261,11 +1261,11 @@ firmware_tool-build-ERROR = Unable to build the firmware
 
 ## Firmware update status
 firmware_update-status-DOWNLOADING = Downloading the firmware
-firmware_update-status-NEED_MANUAL_REBOOT = Waiting for the user to reboot the tracker
+firmware_update-status-NEED_MANUAL_REBOOT = Please restart the tracker
 firmware_update-status-AUTHENTICATING = Authenticating with the mcu
 firmware_update-status-UPLOADING = Uploading the firmware
 firmware_update-status-SYNCING_WITH_MCU = Syncing with the mcu
-firmware_update-status-REBOOTING = Rebooting the tracker
+firmware_update-status-REBOOTING = Applying the update
 firmware_update-status-PROVISIONING = Setting Wi-Fi credentials
 firmware_update-status-DONE = Update complete!
 firmware_update-status-ERROR_DEVICE_NOT_FOUND = Could not find the device

gui/src/components/firmware-tool/DeviceCard.tsx

@@ -10,6 +10,7 @@ import {
   TrackerStatus as TrackerStatusEnum,
 } from 'solarxr-protocol';
 import { TrackerStatus } from '@/components/tracker/TrackerStatus';
+import { useMemo } from 'react';
 
 interface DeviceCardProps {
   deviceNames: string[];
@@ -40,7 +41,7 @@ export function DeviceCardContent({ deviceNames, status }: DeviceCardProps) {
         ))}
       </div>
       {status !== undefined ? (
-        <Typography color="secondary">
+        <Typography>
           {l10n.getString(
             'firmware_update-status-' + FirmwareUpdateStatus[status]
           )}
@@ -60,18 +61,26 @@ export function DeviceCardControl({
   online = null,
   ...props
 }: DeviceCardControlProps & DeviceCardProps) {
+  const cardborder = useMemo(() => {
+    if (!props.status) return 'border-transparent';
+
+    if (props.status === FirmwareUpdateStatus.DONE)
+      return 'border-status-success';
+
+    if (props.status === FirmwareUpdateStatus.NEED_MANUAL_REBOOT)
+      return 'border-status-special';
+
+    if (firmwareUpdateErrorStatus.includes(props.status))
+      return 'border-status-critical';
+
+    return 'border-transparent';
+  }, [props.status]);
+
   return (
     <div
       className={classNames(
         'rounded-md bg-background-60 h-[86px] pt-2 flex flex-col justify-between border-2 relative',
-        props.status &&
-          firmwareUpdateErrorStatus.includes(props.status) &&
-          'border-status-critical',
-        props.status === FirmwareUpdateStatus.DONE && 'border-status-success',
-        (!props.status ||
-          (props.status !== FirmwareUpdateStatus.DONE &&
-            !firmwareUpdateErrorStatus.includes(props.status))) &&
-          'border-transparent'
+        cardborder
       )}
     >
       {control && name ? (

gui/src/components/firmware-update/FirmwareUpdate.tsx

@@ -251,16 +251,18 @@ export function FirmwareUpdate() {
     [status]
   );
 
-  const shouldShowRebootWarning = useMemo(
-    () =>
-      Object.keys(status).find((id) =>
-        [
-          FirmwareUpdateStatus.REBOOTING,
-          FirmwareUpdateStatus.UPLOADING,
-        ].includes(status[id].status)
-      ),
-    [status]
-  );
+  const shouldShowRebootWarning = useMemo(() => {
+    const statuses = Object.keys(status);
+    return (
+      statuses.length > 0 &&
+      statuses.find(
+        (id) =>
+          ![FirmwareUpdateStatus.DONE, ...firmwareUpdateErrorStatus].includes(
+            status[id].status
+          )
+      )
+    );
+  }, [status]);
 
   const retryError = () => {
     const devices = trackerWithErrors.map((id) => {