Can edit Cloud init user data from UI

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>
+  );
+}