Confirm potentially destructive actions

remote_frontend/src/widgets/VirtualMachinesWidget.tsx

@@ -25,6 +25,7 @@ import { useToast } from "../hooks/providers/ToastProvider";
 import { AsyncWidget } from "./AsyncWidget";
 import { SectionContainer } from "./SectionContainer";
 import { VMLiveScreenshot } from "./VMLiveScreenshot";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
 
 const useStyles = makeStyles({
   body1Stronger: typographyStyles.body1Stronger,
@@ -151,6 +152,7 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
           onClick={VMApi.SuspendVM}
         />
         <VMAction
+          confirmAction
           {...p}
           label="Shutdown"
           icon={<PowerRegular />}
@@ -160,6 +162,7 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
           onClick={VMApi.ShutdownVM}
         />
         <VMAction
+          confirmAction
           {...p}
           label="Kill"
           icon={<StopRegular />}
@@ -174,6 +177,7 @@ function VMWidget(p: { vm: VMInfo }): React.ReactElement {
           onClick={VMApi.KillVM}
         />
         <VMAction
+          confirmAction
           {...p}
           label="Reset"
           icon={<ArrowResetRegular />}
@@ -213,6 +217,7 @@ function VMPreview(p: { vm: VMInfo; state?: VMState }): React.ReactElement {
 }
 
 function VMAction(p: {
+  confirmAction?: boolean;
   vm: VMInfo;
   label: string;
   primary?: boolean;
@@ -223,11 +228,20 @@ function VMAction(p: {
   onClick: (vm: VMInfo) => Promise<void>;
 }): React.ReactElement {
   const toast = useToast();
+  const confirm = useConfirm();
 
   const [loading, setLoading] = React.useState(false);
 
   const onClick = async () => {
     try {
+      if (
+        p.confirmAction &&
+        !(await confirm(
+          `Do you really want to ${p.label} the VM '${p.vm.name}'?`
+        ))
+      )
+        return;
+
       setLoading(true);
 
       await p.onClick(p.vm);