Can export VM config from UI

virtweb_frontend/src/routes/EditVMRoute.tsx

@@ -5,6 +5,7 @@ import { VMApi, VMInfo } from "../api/VMApi";
 import { useAlert } from "../hooks/providers/AlertDialogProvider";
 import { useSnackbar } from "../hooks/providers/SnackbarProvider";
 import { AsyncWidget } from "../widgets/AsyncWidget";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { VMDetails } from "../widgets/vms/VMDetails";
 
@@ -13,7 +14,7 @@ export function CreateVMRoute(): React.ReactElement {
   const alert = useAlert();
   const navigate = useNavigate();
 
-  const [vm] = React.useState(VMInfo.NewEmpty);
+  const [vm, setVM] = React.useState(VMInfo.NewEmpty);
 
   const create = async (v: VMInfo) => {
     try {
@@ -30,6 +31,7 @@ export function CreateVMRoute(): React.ReactElement {
   return (
     <EditVMInner
       vm={vm}
+      onReplace={setVM}
       isCreating={true}
       onSave={create}
       onCancel={() => navigate("/vms")}
@@ -76,6 +78,7 @@ export function EditVMRoute(): React.ReactElement {
       build={() => (
         <EditVMInner
           vm={vm!}
+          onReplace={setVM}
           isCreating={false}
           onCancel={() => {
             navigate(vm!.ViewURL);
@@ -92,6 +95,7 @@ function EditVMInner(p: {
   isCreating: boolean;
   onCancel: () => void;
   onSave: (vm: VMInfo) => Promise<void>;
+  onReplace: (vm: VMInfo) => void;
 }): React.ReactElement {
   const [changed, setChanged] = React.useState(false);
 
@@ -107,6 +111,14 @@ function EditVMInner(p: {
       label={p.isCreating ? "Create a Virtual Machine" : "Edit Virtual Machine"}
       actions={
         <span>
+          <ConfigImportExportButtons
+            filename={`vm-${p.vm.name}.json`}
+            currentConf={p.vm}
+            importConf={(conf) => {
+              p.onReplace(new VMInfo(conf));
+              valueChanged();
+            }}
+          />
           {changed && (
             <Button
               variant="contained"