diff --git a/packages/core/src/meshDevice.ts b/packages/core/src/meshDevice.ts index 41ada369..37b705c8 100755 --- a/packages/core/src/meshDevice.ts +++ b/packages/core/src/meshDevice.ts @@ -626,7 +626,7 @@ export class MeshDevice { public async reboot(time: number): Promise { this.log.debug( Emitter[Emitter.Reboot], - `🔌 Rebooting node ${time > 0 ? "now" : `in ${time} seconds`}`, + `🔌 Rebooting node ${time === 0 ? "now" : `in ${time} seconds`}`, ); const reboot = create(Protobuf.Admin.AdminMessageSchema, { @@ -649,7 +649,7 @@ export class MeshDevice { public async rebootOta(time: number): Promise { this.log.debug( Emitter[Emitter.RebootOta], - `🔌 Rebooting into OTA mode ${time > 0 ? "now" : `in ${time} seconds`}`, + `🔌 Rebooting into OTA mode ${time === 0 ? "now" : `in ${time} seconds`}`, ); const rebootOta = create(Protobuf.Admin.AdminMessageSchema, { diff --git a/packages/web/public/i18n/locales/en/commandPalette.json b/packages/web/public/i18n/locales/en/commandPalette.json index d66bd1d8..e3f80a3a 100644 --- a/packages/web/public/i18n/locales/en/commandPalette.json +++ b/packages/web/public/i18n/locales/en/commandPalette.json @@ -33,8 +33,7 @@ "qrGenerator": "Generator", "qrImport": "Import", "scheduleShutdown": "Schedule Shutdown", - "scheduleReboot": "Schedule Reboot", - "rebootToOtaMode": "Reboot To OTA Mode", + "scheduleReboot": "Reboot Device", "resetNodeDb": "Reset Node DB", "factoryResetDevice": "Factory Reset Device", "factoryResetConfig": "Factory Reset Config", diff --git a/packages/web/public/i18n/locales/en/common.json b/packages/web/public/i18n/locales/en/common.json index 8f40e7c8..d6cd2a17 100644 --- a/packages/web/public/i18n/locales/en/common.json +++ b/packages/web/public/i18n/locales/en/common.json @@ -17,7 +17,6 @@ "now": "Now", "ok": "OK", "print": "Print", - "rebootOtaNow": "Reboot to OTA Mode Now", "remove": "Remove", "requestNewKeys": "Request New Keys", "requestPosition": "Request Position", diff --git a/packages/web/public/i18n/locales/en/dialog.json b/packages/web/public/i18n/locales/en/dialog.json index b443e7e3..c343b369 100644 --- a/packages/web/public/i18n/locales/en/dialog.json +++ b/packages/web/public/i18n/locales/en/dialog.json @@ -132,15 +132,15 @@ "sharableUrl": "Sharable URL", "title": "Generate QR Code" }, - "rebootOta": { - "title": "Schedule Reboot", - "description": "Reboot the connected node after a delay into OTA (Over-the-Air) mode.", - "enterDelay": "Enter delay (sec)", - "scheduled": "Reboot has been scheduled" - }, "reboot": { - "title": "Schedule Reboot", - "description": "Reboot the connected node after x minutes." + "title": "Reboot device", + "description": "Reboot now or schedule a reboot of the connected node. Optionally, you can choose to reboot into OTA (Over-the-Air) mode.", + "ota": "Reboot into OTA mode", + "enterDelay": "Enter delay", + "scheduled": "Reboot has been scheduled", + "schedule": "Schedule reboot", + "now": "Reboot now", + "cancel": "Cancel scheduled reboot" }, "refreshKeys": { "description": { diff --git a/packages/web/src/components/CommandPalette/index.tsx b/packages/web/src/components/CommandPalette/index.tsx index 3f6bb94a..3c36f336 100644 --- a/packages/web/src/components/CommandPalette/index.tsx +++ b/packages/web/src/components/CommandPalette/index.tsx @@ -189,13 +189,6 @@ export const CommandPalette = () => { setDialogOpen("reboot", true); }, }, - { - label: t("contextual.command.rebootToOtaMode"), - icon: RefreshCwIcon, - action() { - setDialogOpen("rebootOTA", true); - }, - }, { label: t("contextual.command.resetNodeDb"), icon: TrashIcon, diff --git a/packages/web/src/components/Dialog/DialogManager.tsx b/packages/web/src/components/Dialog/DialogManager.tsx index 0ba1a97f..73046bbe 100644 --- a/packages/web/src/components/Dialog/DialogManager.tsx +++ b/packages/web/src/components/Dialog/DialogManager.tsx @@ -5,7 +5,6 @@ import { NodeDetailsDialog } from "@components/Dialog/NodeDetailsDialog/NodeDeta import { PkiBackupDialog } from "@components/Dialog/PKIBackupDialog.tsx"; import { QRDialog } from "@components/Dialog/QRDialog.tsx"; import { RebootDialog } from "@components/Dialog/RebootDialog.tsx"; -import { RebootOTADialog } from "@components/Dialog/RebootOTADialog.tsx"; import { RefreshKeysDialog } from "@components/Dialog/RefreshKeysDialog/RefreshKeysDialog.tsx"; import { RemoveNodeDialog } from "@components/Dialog/RemoveNodeDialog.tsx"; import { ShutdownDialog } from "@components/Dialog/ShutdownDialog.tsx"; @@ -79,12 +78,6 @@ export const DialogManager = () => { setDialogOpen("refreshKeys", open); }} /> - { - setDialogOpen("rebootOTA", open); - }} - /> { diff --git a/packages/web/src/components/Dialog/RebootOTADialog.test.tsx b/packages/web/src/components/Dialog/RebootDialog.test.tsx similarity index 53% rename from packages/web/src/components/Dialog/RebootOTADialog.test.tsx rename to packages/web/src/components/Dialog/RebootDialog.test.tsx index a1ed9a98..663ca5b6 100644 --- a/packages/web/src/components/Dialog/RebootOTADialog.test.tsx +++ b/packages/web/src/components/Dialog/RebootDialog.test.tsx @@ -7,10 +7,15 @@ import type { } from "react"; import type { JSX } from "react/jsx-runtime"; import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; -import { RebootOTADialog } from "./RebootOTADialog.tsx"; +import { RebootDialog } from "./RebootDialog.tsx"; +const rebootMock = vi.fn(); const rebootOtaMock = vi.fn(); -let mockConnection: { rebootOta: (delay: number) => void } | undefined = { +let mockConnection: { + rebootOta: (delay: number) => void, + reboot: (delay: number) => void + } | undefined = { + reboot: rebootMock, rebootOta: rebootOtaMock, }; @@ -61,7 +66,7 @@ vi.mock("@components/UI/Dialog.tsx", () => { }; }); -describe("RebootOTADialog", () => { +describe("RebootDialog", () => { beforeEach(() => { vi.useFakeTimers(); rebootOtaMock.mockClear(); @@ -72,44 +77,68 @@ describe("RebootOTADialog", () => { }); it("renders dialog with default input value", () => { - render( {}} />); + render( {}} />); expect(screen.getByPlaceholderText(/enter delay/i)).toHaveValue(5); expect( - screen.getByRole("heading", { name: /schedule reboot/i, level: 1 }), + screen.getByRole("heading", { name: /reboot device/i, level: 1 }), ).toBeInTheDocument(); - expect(screen.getByText(/reboot to ota mode now/i)).toBeInTheDocument(); + expect(screen.getByRole("button", { name: /reboot now/i })).toBeInTheDocument(); }); + it("calls correct reboot function based on OTA checkbox state", () => { + render( {}} />); + + // Schedule non-OTA reboot + fireEvent.click(screen.getByTestId("scheduleRebootBtn")); + expect(rebootMock).toHaveBeenCalledWith(5); + expect(rebootOtaMock).not.toHaveBeenCalled(); + + rebootMock.mockClear(); + rebootOtaMock.mockClear(); + + // Cancel scheduled + fireEvent.click(screen.getByTestId("cancelRebootBtn")); + expect(rebootMock).toHaveBeenCalledWith(-1); + expect(rebootOtaMock).not.toHaveBeenCalled(); + + rebootMock.mockClear(); + rebootOtaMock.mockClear(); + + // Schedule OTA reboot + fireEvent.click(screen.getByText(/reboot into ota mode/i)); + fireEvent.click(screen.getByTestId("scheduleRebootBtn")); + expect(rebootOtaMock).toHaveBeenCalledWith(5); + expect(rebootMock).not.toHaveBeenCalled(); + }); + it("schedules a reboot with delay and calls rebootOta", async () => { const onOpenChangeMock = vi.fn(); - render(); + render(); fireEvent.change(screen.getByPlaceholderText(/enter delay/i), { target: { value: "3" }, }); fireEvent.click(screen.getByTestId("scheduleRebootBtn")); + + expect(rebootMock).toHaveBeenCalledWith(3); expect(screen.getByText(/reboot has been scheduled/i)).toBeInTheDocument(); vi.advanceTimersByTime(3000); - await waitFor(() => { - expect(rebootOtaMock).toHaveBeenCalledWith(0); - expect(onOpenChangeMock).toHaveBeenCalledWith(false); - }); + expect(onOpenChangeMock).toHaveBeenCalledWith(false); + }); it("triggers an instant reboot", async () => { const onOpenChangeMock = vi.fn(); - render(); + render(); - fireEvent.click(screen.getByText(/reboot to ota mode now/i)); + fireEvent.click(screen.getByRole("button", { name: /reboot now/i })); - await waitFor(() => { - expect(rebootOtaMock).toHaveBeenCalledWith(5); - expect(onOpenChangeMock).toHaveBeenCalledWith(false); - }); + expect(rebootMock).toHaveBeenCalledWith(0); + expect(onOpenChangeMock).toHaveBeenCalledWith(false); }); it("does not call reboot if connection is undefined", async () => { @@ -117,16 +146,30 @@ describe("RebootOTADialog", () => { mockConnection = undefined; - render(); + render(); fireEvent.click(screen.getByTestId("scheduleRebootBtn")); + vi.advanceTimersByTime(5000); - await waitFor(() => { - expect(rebootOtaMock).not.toHaveBeenCalled(); - expect(onOpenChangeMock).not.toHaveBeenCalled(); + expect(rebootMock).not.toHaveBeenCalled(); + expect(rebootOtaMock).not.toHaveBeenCalled(); + + mockConnection = { reboot: rebootMock, rebootOta: rebootOtaMock }; + }); + + it("cancels a scheduled reboot and calls rebootOta with -1", async () => { + const onOpenChangeMock = vi.fn(); + render(); + + fireEvent.change(screen.getByPlaceholderText(/enter delay/i), { + target: { value: "4" }, }); + fireEvent.click(screen.getByTestId("scheduleRebootBtn")); + expect(rebootMock).toHaveBeenCalledWith(4); - mockConnection = { rebootOta: rebootOtaMock }; + fireEvent.click(screen.getByRole("button", { name: /cancel/i })); + expect(rebootMock).toHaveBeenCalledWith(-1); + expect(screen.queryByText(/reboot has been scheduled/i)).not.toBeInTheDocument(); }); }); diff --git a/packages/web/src/components/Dialog/RebootDialog.tsx b/packages/web/src/components/Dialog/RebootDialog.tsx index b41a8948..a0e6ad1f 100644 --- a/packages/web/src/components/Dialog/RebootDialog.tsx +++ b/packages/web/src/components/Dialog/RebootDialog.tsx @@ -8,21 +8,82 @@ import { DialogTitle, } from "@components/UI/Dialog.tsx"; import { Input } from "@components/UI/Input.tsx"; +import { Label } from "@components/UI/Label.tsx"; +import { Separator } from "@components/UI/Seperator.tsx"; import { useDevice } from "@core/stores/deviceStore.ts"; -import { RefreshCwIcon } from "lucide-react"; +import { ClockIcon, OctagonXIcon, RefreshCwIcon } from "lucide-react"; import { useState } from "react"; import { useTranslation } from "react-i18next"; +import { Checkbox } from "../UI/Checkbox/index.tsx"; export interface RebootDialogProps { open: boolean; onOpenChange: (open: boolean) => void; } +const DEFAULT_REBOOT_DELAY = 5; // seconds + export const RebootDialog = ({ open, onOpenChange }: RebootDialogProps) => { const { t } = useTranslation("dialog"); const { connection } = useDevice(); + const [time, setTime] = useState(DEFAULT_REBOOT_DELAY); + const [isScheduled, setIsScheduled] = useState(false); + const [isOTA, setIsOTA] = useState(false); + const [inputValue, setInputValue] = useState(DEFAULT_REBOOT_DELAY.toString()); + const [timeoutId, setTimeoutId] = useState(); + + const handleReboot = (delay: number) => { + if (!connection) { + return; + } + + if (isOTA) { + connection.rebootOta(delay); + } else { + connection.reboot(delay); + } + }; + + const handleSetTime = (e: React.ChangeEvent) => { + if (!e.target.validity.valid) { + e.preventDefault(); + return; + } + + const val = e.target.value; + setInputValue(val); + + const parsed = Number(val); + if (!Number.isNaN(parsed) && parsed > 0) { + setTime(parsed); + } + }; + + const handleRebootWithTimeout = async () => { + setIsScheduled(true); + + const delay = time > 0 ? time : DEFAULT_REBOOT_DELAY; + + handleReboot(delay); + + const id = setTimeout(() => { + setIsScheduled(false); + onOpenChange(false); + setInputValue(DEFAULT_REBOOT_DELAY.toString()); + }, delay * 1000); + setTimeoutId(id); + }; + + const handleCancel = () => { + clearTimeout(timeoutId); + setIsScheduled(false); + handleReboot(-1); + }; - const [time, setTime] = useState(5); + const handleInstantReboot = async () => { + handleReboot(0); + onOpenChange(false); + }; return ( @@ -32,24 +93,66 @@ export const RebootDialog = ({ open, onOpenChange }: RebootDialogProps) => { {t("reboot.title")} {t("reboot.description")} -
- setTime(Number.parseInt(e.target.value))} - /> - -
+ + {!isScheduled ? ( + <> + setIsOTA(checked)} + className="px-2" + > + {t("reboot.ota")} + +
+ + +
+
+ +
+ + ) : ( +
+
+ +
+ +
+ )} ); diff --git a/packages/web/src/components/Dialog/RebootOTADialog.tsx b/packages/web/src/components/Dialog/RebootOTADialog.tsx deleted file mode 100644 index 5d1ccd36..00000000 --- a/packages/web/src/components/Dialog/RebootOTADialog.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { Button } from "@components/UI/Button.tsx"; -import { - Dialog, - DialogClose, - DialogContent, - DialogDescription, - DialogHeader, - DialogTitle, -} from "@components/UI/Dialog.tsx"; -import { Input } from "@components/UI/Input.tsx"; -import { useDevice } from "@core/stores/deviceStore.ts"; -import { ClockIcon, RefreshCwIcon } from "lucide-react"; -import { useState } from "react"; -import { useTranslation } from "react-i18next"; - -export interface RebootOTADialogProps { - open: boolean; - onOpenChange: (open: boolean) => void; -} - -const DEFAULT_REBOOT_DELAY = 5; // seconds - -export const RebootOTADialog = ({ - open, - onOpenChange, -}: RebootOTADialogProps) => { - const { t } = useTranslation("dialog"); - const { connection } = useDevice(); - const [time, setTime] = useState(DEFAULT_REBOOT_DELAY); - const [isScheduled, setIsScheduled] = useState(false); - const [inputValue, setInputValue] = useState(DEFAULT_REBOOT_DELAY.toString()); - - const handleSetTime = (e: React.ChangeEvent) => { - if (!e.target.validity.valid) { - e.preventDefault(); - return; - } - - const val = e.target.value; - setInputValue(val); - - const parsed = Number(val); - if (!Number.isNaN(parsed) && parsed > 0) { - setTime(parsed); - } - }; - - const handleRebootWithTimeout = async () => { - if (!connection) { - return; - } - setIsScheduled(true); - - const delay = time > 0 ? time : DEFAULT_REBOOT_DELAY; - - await new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, delay * 1000); - }).finally(() => { - setIsScheduled(false); - onOpenChange(false); - setInputValue(DEFAULT_REBOOT_DELAY.toString()); - }); - connection.rebootOta(0); - }; - - const handleInstantReboot = async () => { - if (!connection) { - return; - } - - await connection.rebootOta(DEFAULT_REBOOT_DELAY); - onOpenChange(false); - }; - - return ( - - - - - {t("rebootOta.title")} - {t("rebootOta.description")} - - -
- - -
- - - - - ); -}; diff --git a/packages/web/src/core/stores/deviceStore.mock.ts b/packages/web/src/core/stores/deviceStore.mock.ts index d1dc70f8..218dc37a 100644 --- a/packages/web/src/core/stores/deviceStore.mock.ts +++ b/packages/web/src/core/stores/deviceStore.mock.ts @@ -36,7 +36,6 @@ export const mockDeviceStore: Device = { QR: false, shutdown: false, reboot: false, - rebootOTA: false, deviceName: false, nodeRemoval: false, pkiBackup: false, @@ -86,4 +85,6 @@ export const mockDeviceStore: Device = { sendAdminMessage: vi.fn(), updateFavorite: vi.fn(), updateIgnored: vi.fn(), + getAllUnreadCount: vi.fn().mockReturnValue(0), + getUnreadCount: vi.fn().mockReturnValue(0), }; diff --git a/packages/web/src/core/stores/deviceStore.ts b/packages/web/src/core/stores/deviceStore.ts index 4cbad192..1d33318e 100644 --- a/packages/web/src/core/stores/deviceStore.ts +++ b/packages/web/src/core/stores/deviceStore.ts @@ -54,7 +54,6 @@ export interface Device { QR: boolean; shutdown: boolean; reboot: boolean; - rebootOTA: boolean; deviceName: boolean; nodeRemoval: boolean; pkiBackup: boolean; @@ -172,7 +171,6 @@ export const useDeviceStore = createStore((set, get) => ({ nodeDetails: false, unsafeRoles: false, refreshKeys: false, - rebootOTA: false, deleteMessages: false, managedMode: false, },