Can export networks config from UI

virtweb_frontend/src/routes/EditNetworkRoute.tsx

@@ -7,13 +7,14 @@ import { AsyncWidget } from "../widgets/AsyncWidget";
 import { NetworkDetails } from "../widgets/net/NetworkDetails";
 import { VirtWebRouteContainer } from "../widgets/VirtWebRouteContainer";
 import { Button } from "@mui/material";
+import { ConfigImportExportButtons } from "../widgets/ConfigImportExportButtons";
 
 export function CreateNetworkRoute(): React.ReactElement {
   const alert = useAlert();
   const snackbar = useSnackbar();
   const navigate = useNavigate();
 
-  const [network] = React.useState<NetworkInfo>({
+  const [network, setNetwork] = React.useState<NetworkInfo>({
     name: "NewNetwork",
     forward_mode: "Isolated",
   });
@@ -35,6 +36,7 @@ export function CreateNetworkRoute(): React.ReactElement {
       creating={true}
       onCancel={() => navigate("/net")}
       onSave={createNetwork}
+      onReplace={setNetwork}
     />
   );
 }
@@ -75,6 +77,7 @@ export function EditNetworkRoute(): React.ReactElement {
           creating={false}
           onCancel={() => navigate(`/net/${uuid}`)}
           onSave={updateNetwork}
+          onReplace={setNetwork}
         />
       )}
     />
@@ -86,6 +89,7 @@ function EditNetworkRouteInner(p: {
   creating: boolean;
   onCancel: () => void;
   onSave: (vm: NetworkInfo) => Promise<void>;
+  onReplace: (vm: NetworkInfo) => void;
 }): React.ReactElement {
   const [changed, setChanged] = React.useState(false);
 
@@ -101,6 +105,15 @@ function EditNetworkRouteInner(p: {
       label={p.creating ? "Create a Network" : "Edit Network"}
       actions={
         <span>
+          <ConfigImportExportButtons
+            currentConf={p.network}
+            filename={`net-${p.network.name}.json`}
+            importConf={(c) => {
+              p.onReplace(c);
+              valueChanged();
+            }}
+          />
+
           {changed && (
             <Button
               variant="contained"