Can edit Cloud init user data from UI

virtweb_frontend/src/index.tsx

@@ -3,16 +3,44 @@ import "@fontsource/roboto/400.css";
 import "@fontsource/roboto/500.css";
 import "@fontsource/roboto/700.css";
 
+import { ThemeProvider, createTheme } from "@mui/material";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./App";
+import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
+import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";
+import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
+import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
 import "./index.css";
 import { LoadServerConfig } from "./widgets/LoadServerConfig";
-import { ThemeProvider, createTheme } from "@mui/material";
-import { LoadingMessageProvider } from "./hooks/providers/LoadingMessageProvider";
-import { AlertDialogProvider } from "./hooks/providers/AlertDialogProvider";
-import { SnackbarProvider } from "./hooks/providers/SnackbarProvider";
-import { ConfirmDialogProvider } from "./hooks/providers/ConfirmDialogProvider";
+
+import { loader } from "@monaco-editor/react";
+import * as monaco from "monaco-editor";
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import { configureMonacoYaml } from "monaco-yaml";
+import YamlWorker from "monaco-yaml/yaml.worker?worker";
+
+// This allows to use a self hosted instance of Monaco editor
+loader.config({ monaco });
+
+// Add YAML support to Monaco
+configureMonacoYaml(monaco, {
+  enableSchemaRequest: false,
+});
+
+/// YAML worker
+window.MonacoEnvironment = {
+  getWorker(_moduleId, label) {
+    switch (label) {
+      case "editorWorkerService":
+        return new EditorWorker();
+      case "yaml":
+        return new YamlWorker();
+      default:
+        throw new Error(`Unknown label ${label}`);
+    }
+  },
+};
 
 const darkTheme = createTheme({
   palette: {
@@ -20,9 +48,7 @@ const darkTheme = createTheme({
   },
 });
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root")!
-);
+const root = ReactDOM.createRoot(document.getElementById("root")!);
 root.render(
   <React.StrictMode>
     <ThemeProvider theme={darkTheme}>

virtweb_frontend/src/widgets/forms/CloudInitEditor.tsx

@@ -1,3 +1,4 @@
+import Editor from "@monaco-editor/react";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { Grid, IconButton, InputAdornment, Tooltip } from "@mui/material";
 import { v4 as uuidv4 } from "uuid";
@@ -33,6 +34,10 @@ export function CloudInitEditor(p: CloudInitProps): React.ReactElement {
           {...p}
           editable={p.editable && p.vm.cloud_init.attach_config}
         />
+        <CloudInitRawUserData
+          {...p}
+          editable={p.editable && p.vm.cloud_init.attach_config}
+        />
       </Grid>
     </>
   );
@@ -100,3 +105,24 @@ function CloudInitMetadata(p: CloudInitProps): React.ReactElement {
     </EditSection>
   );
 }
+
+function CloudInitRawUserData(p: CloudInitProps): React.ReactElement {
+  return (
+    <EditSection title="User data">
+      <Editor
+        theme="vs-dark"
+        options={{
+          readOnly: !p.editable,
+          quickSuggestions: { other: true, comments: true, strings: true },
+        }}
+        language="yaml"
+        height={"30vh"}
+        value={p.vm.cloud_init.user_data}
+        onChange={(v) => {
+          p.vm.cloud_init.user_data = v ?? "";
+          p.onChange?.();
+        }}
+      />
+    </EditSection>
+  );
+}