refactor: Node Power Confirmation (#26)

* refactor: ConfirmationModal to allow div's

* feat: add confirmation dialogs for power and reset actions on nodes

* chore: i18n keys

* chore: bump version to 3.3.6

Author: barrenechea

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "bmc-ui",
-    "version": "3.3.5",
+    "version": "3.3.6",
     "private": true,
     "type": "module",
     "scripts": {

package.json

@@ -26,7 +26,7 @@ interface ConfirmationModalProps {
   onClose: () => void;
   onConfirm: () => void;
   title: string;
-  message: string;
+  message: string | React.ReactNode;
 }
 
 export default function ConfirmationModal({
@@ -39,13 +39,22 @@ export default function ConfirmationModal({
   const { t } = useTranslation();
   const isDesktop = useMediaQuery("(min-width: 768px)");
 
+  const messageContent =
+    typeof message === "string" ? (
+      <DialogDescription>{message}</DialogDescription>
+    ) : (
+      <div className="text-sm text-neutral-500 dark:text-neutral-400">
+        {message}
+      </div>
+    );
+
   if (isDesktop) {
     return (
       <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
         <DialogContent className={cn("modal-rounded", "p-6")}>
           <DialogHeader>
             <DialogTitle className="mb-4">{title}</DialogTitle>
-            <DialogDescription>{message}</DialogDescription>
+            {messageContent}
           </DialogHeader>
           <DialogFooter className="mt-2">
             <Button type="button" variant="bw" onClick={onClose}>
@@ -65,7 +74,13 @@ export default function ConfirmationModal({
       <DrawerContent>
         <DrawerHeader className="text-left">
           <DrawerTitle className="mb-4">{title}</DrawerTitle>
-          <DrawerDescription>{message}</DrawerDescription>
+          {typeof message === "string" ? (
+            <DrawerDescription>{message}</DrawerDescription>
+          ) : (
+            <div className="text-sm text-neutral-500 dark:text-neutral-400">
+              {message}
+            </div>
+          )}
         </DrawerHeader>
         <DrawerFooter className="mt-2">
           <DrawerClose asChild>

src/components/ConfirmationModal.tsx

@@ -65,6 +65,15 @@ const translations = {
     nodeRestarted: "Knoten {{nodeId}} wurde neu gestartet.",
     pmError: "Fehler beim Ändern des Knotenstatus.",
     persistSuccess: "Knoteninformationen gespeichert.",
+    powerOffConfirmTitle: "Knoten {{nodeId}} ausschalten?",
+    powerOnConfirmTitle: "Knoten {{nodeId}} einschalten?",
+    resetConfirmTitle: "Knoten {{nodeId}} zurücksetzen?",
+    powerOffConfirmDescription:
+      "Dies wird Knoten {{nodeId}} herunterfahren. Alle laufenden Prozesse werden beendet.",
+    powerOnConfirmDescription: "Dies wird Knoten {{nodeId}} starten.",
+    resetConfirmDescription:
+      "Dies wird Knoten {{nodeId}} zwangsweise neu starten. Nicht gespeicherte Daten gehen verloren.",
+    dontAskAgain: "Bei Knotenstromoperationen nicht mehr nachfragen",
   },
   usb: {
     header: "USB-Route",

src/locale/de.ts

@@ -62,6 +62,15 @@ const translations = {
     nodeRestarted: "Node {{nodeId}} was restarted.",
     pmError: "Error changing node state.",
     persistSuccess: "Nodes information saved.",
+    powerOffConfirmTitle: "Power off Node {{nodeId}}?",
+    powerOnConfirmTitle: "Power on Node {{nodeId}}?",
+    resetConfirmTitle: "Reset Node {{nodeId}}?",
+    powerOffConfirmDescription:
+      "This will shut down Node {{nodeId}}. Any running processes will be terminated.",
+    powerOnConfirmDescription: "This will start up Node {{nodeId}}.",
+    resetConfirmDescription:
+      "This will forcefully restart Node {{nodeId}}. Any unsaved data will be lost.",
+    dontAskAgain: "Don't ask again for node power operations",
   },
   usb: {
     header: "USB route",

src/locale/en.ts

@@ -64,6 +64,15 @@ const translations = {
     nodeRestarted: "El nodo {{nodeId}} se reinició.",
     pmError: "Error al cambiar el estado del nodo.",
     persistSuccess: "Información de nodos guardada.",
+    powerOffConfirmTitle: "¿Apagar Nodo {{nodeId}}?",
+    powerOnConfirmTitle: "¿Encender Nodo {{nodeId}}?",
+    resetConfirmTitle: "¿Reiniciar Nodo {{nodeId}}?",
+    powerOffConfirmDescription:
+      "Esto apagará el Nodo {{nodeId}}. Todos los procesos en ejecución serán terminados.",
+    powerOnConfirmDescription: "Esto iniciará el Nodo {{nodeId}}.",
+    resetConfirmDescription:
+      "Esto reiniciará forzosamente el Nodo {{nodeId}}. Cualquier dato no guardado se perderá.",
+    dontAskAgain: "No volver a preguntar para operaciones de energía de nodos",
   },
   usb: {
     header: "Ruta USB",

src/locale/es.ts

@@ -64,6 +64,15 @@ const translations = {
     nodeRestarted: "Node {{nodeId}} is opnieuw gestart.",
     pmError: "Fout bij het wijzigen van de nodestatus.",
     persistSuccess: "Node-informatie opgeslagen.",
+    powerOffConfirmTitle: "Node {{nodeId}} uitschakelen?",
+    powerOnConfirmTitle: "Node {{nodeId}} inschakelen?",
+    resetConfirmTitle: "Node {{nodeId}} herstarten?",
+    powerOffConfirmDescription:
+      "Dit zal Node {{nodeId}} afsluiten. Alle lopende processen worden beëindigd.",
+    powerOnConfirmDescription: "Dit zal Node {{nodeId}} opstarten.",
+    resetConfirmDescription:
+      "Dit zal Node {{nodeId}} geforceerd herstarten. Niet-opgeslagen gegevens gaan verloren.",
+    dontAskAgain: "Niet meer vragen voor node-stroomacties",
   },
   usb: {
     header: "USB-route",

src/locale/nl.ts

@@ -65,6 +65,15 @@ const translations = {
     nodeRestarted: "Węzeł {{nodeId}} został ponownie uruchomiony.",
     pmError: "Błąd podczas zmiany stanu węzła.",
     persistSuccess: "Informacje o węzłach zostały zapisane.",
+    powerOffConfirmTitle: "Wyłączyć Węzeł {{nodeId}}?",
+    powerOnConfirmTitle: "Włączyć Węzeł {{nodeId}}?",
+    resetConfirmTitle: "Zresetować Węzeł {{nodeId}}?",
+    powerOffConfirmDescription:
+      "To wyłączy Węzeł {{nodeId}}. Wszystkie uruchomione procesy zostaną zakończone.",
+    powerOnConfirmDescription: "To uruchomi Węzeł {{nodeId}}.",
+    resetConfirmDescription:
+      "To wymusi restart Węzła {{nodeId}}. Wszystkie niezapisane dane zostaną utracone.",
+    dontAskAgain: "Nie pytaj ponownie o operacje zasilania węzłów",
   },
   usb: {
     header: "Trasa USB",

src/locale/pl.ts

@@ -63,6 +63,15 @@ const translations = {
     nodeRestarted: "节点 {{nodeId}} 已重新启动。",
     pmError: "更改节点状态时出错。",
     persistSuccess: "节点信息已保存。",
+    powerOffConfirmTitle: "关闭节点 {{nodeId}}？",
+    powerOnConfirmTitle: "启动节点 {{nodeId}}？",
+    resetConfirmTitle: "重置节点 {{nodeId}}？",
+    powerOffConfirmDescription:
+      "这将关闭节点 {{nodeId}}。所有正在运行的进程都将被终止。",
+    powerOnConfirmDescription: "这将启动节点 {{nodeId}}。",
+    resetConfirmDescription:
+      "这将强制重启节点 {{nodeId}}。任何未保存的数据都将丢失。",
+    dontAskAgain: "不再询问节点电源操作",
   },
   usb: {
     header: "USB 路由",