Can edit more network settings

virtweb_frontend/src/widgets/StateActionButton.tsx

@@ -0,0 +1,41 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { useAlert } from "../hooks/providers/AlertDialogProvider";
+import { useConfirm } from "../hooks/providers/ConfirmDialogProvider";
+
+export function StateActionButton<S>(p: {
+  currState: S;
+  cond: S[];
+  icon: React.ReactElement;
+  tooltip: string;
+  confirmMessage?: string;
+  performAction: () => Promise<void>;
+  onExecuted: () => void;
+}): React.ReactElement {
+  const confirm = useConfirm();
+  const alert = useAlert();
+
+  if (!p.cond.includes(p.currState)) return <></>;
+
+  const performAction = async () => {
+    try {
+      if (p.confirmMessage && !(await confirm(p.confirmMessage))) return;
+      await p.performAction();
+      p.onExecuted();
+    } catch (e) {
+      console.error(e);
+      alert("Failed to perform action! " + e);
+    }
+  };
+
+  return (
+    <Tooltip title={p.tooltip}>
+      <IconButton
+        size="small"
+        onClick={performAction}
+        style={{ paddingBottom: "0px", paddingTop: "0px" }}
+      >
+        {p.icon}
+      </IconButton>
+    </Tooltip>
+  );
+}