edit functioanlity in form of FORM

edit functioanlity in form of FORM

Signed-off-by: Shrutim1505 <shrutimurthy2103@gmail.com>

Author: Shrutim1505

frontend/src/components/queues/QueueTable/EditQueueDialog.jsx

@@ -7,35 +7,151 @@ import {
     Button,
     ToggleButton,
     ToggleButtonGroup,
+    TextField,
+    Box,
+    Typography,
 } from "@mui/material";
 import Editor from "@monaco-editor/react";
 import yaml from "js-yaml";
 
+const RenderFields = ({ data, onChange, path = [] }) => {
+    return Object.entries(data || {}).map(([key, value]) => {
+        // Skip internal Kubernetes metadata
+        if (key === "managedFields" || key.startsWith("f:")) {
+            return null;
+        }
+
+        const currentPath = [...path, key];
+
+        if (Array.isArray(value)) {
+            return (
+                <Box
+                    key={currentPath.join(".")}
+                    sx={{ mb: 2, pl: 2, borderLeft: "2px solid #ccc" }}
+                >
+                    <Typography variant="subtitle2">{key} (Array)</Typography>
+                    {value.map((item, index) => {
+                        const itemPath = [...currentPath, index];
+                        if (typeof item === "object" && item !== null) {
+                            return (
+                                <Box
+                                    key={itemPath.join(".")}
+                                    sx={{
+                                        pl: 2,
+                                        mb: 1,
+                                        borderLeft: "1px dashed #999",
+                                    }}
+                                >
+                                    <Typography variant="caption">
+                                        Item {index}
+                                    </Typography>
+                                    <RenderFields
+                                        data={item}
+                                        onChange={onChange}
+                                        path={itemPath}
+                                    />
+                                </Box>
+                            );
+                        } else {
+                            return (
+                                <TextField
+                                    key={itemPath.join(".")}
+                                    label={`${key}[${index}]`}
+                                    value={item}
+                                    fullWidth
+                                    margin="dense"
+                                    onChange={(e) =>
+                                        onChange(itemPath, e.target.value)
+                                    }
+                                />
+                            );
+                        }
+                    })}
+                </Box>
+            );
+        }
+
+        if (typeof value === "object" && value !== null) {
+            return (
+                <Box
+                    key={currentPath.join(".")}
+                    sx={{ mb: 2, pl: 2, borderLeft: "2px solid #ccc" }}
+                >
+                    <Typography variant="subtitle2">{key}</Typography>
+                    <RenderFields
+                        data={value}
+                        onChange={onChange}
+                        path={currentPath}
+                    />
+                </Box>
+            );
+        }
+
+        return (
+            <TextField
+                key={currentPath.join(".")}
+                label={currentPath.join(".")}
+                value={value}
+                fullWidth
+                margin="dense"
+                onChange={(e) => onChange(currentPath, e.target.value)}
+            />
+        );
+    });
+};
+
+const updateNestedValue = (obj, path, value) => {
+    const lastKey = path.pop();
+    const nested = path.reduce((acc, key) => (acc[key] = acc[key] || {}), obj);
+    nested[lastKey] = value;
+    return { ...obj };
+};
+
 const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
     const [editorValue, setEditorValue] = useState("");
     const [editMode, setEditMode] = useState("yaml");
+    const [formState, setFormState] = useState({});
 
     useEffect(() => {
         if (open && queue) {
-            const content = yaml.dump(queue); // Always YAML
-            setEditorValue(content);
+            const yamlContent = yaml.dump(queue);
+            setEditorValue(yamlContent);
+            setFormState(queue);
+            setEditMode("yaml");
         }
     }, [open, queue]);
 
     const handleModeChange = (event, newMode) => {
-        if (newMode !== null) {
-            setEditMode(newMode); // Only for syntax highlighting
+        if (!newMode) return;
+        if (newMode === "form") {
+            try {
+                const parsed = yaml.load(editorValue);
+                setFormState(parsed || {});
+                setEditMode("form");
+            } catch (err) {
+                alert("Invalid YAML. Cannot switch to Form view.");
+            }
+        } else if (newMode === "yaml") {
+            setEditorValue(yaml.dump(formState));
+            setEditMode("yaml");
         }
     };
 
+    const handleNestedChange = (path, value) => {
+        setFormState((prev) =>
+            updateNestedValue({ ...prev }, [...path], value),
+        );
+    };
+
     const handleSave = () => {
         try {
-            const updatedQueue = yaml.load(editorValue); // Always parse as YAML
-            onSave(updatedQueue);
+            const updated =
+                editMode === "yaml" ? yaml.load(editorValue) : formState;
+            onSave(updated);
             onClose();
         } catch (error) {
-            console.error("Error parsing edited content:", error);
-            alert("Invalid YAML format. Please check your input.");
+            console.error("Invalid YAML:", error);
+            alert("Invalid YAML format.");
         }
     };
 
@@ -53,23 +169,34 @@ const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
                     value={editMode}
                     exclusive
                     onChange={handleModeChange}
-                    color="primary"
                 >
                     <ToggleButton value="yaml">YAML</ToggleButton>
+                    <ToggleButton value="form">Form</ToggleButton>
                 </ToggleButtonGroup>
             </DialogTitle>
-            <DialogContent sx={{ height: "500px" }}>
-                <Editor
-                    height="100%"
-                    language={editMode} // only affects syntax highlighting
-                    value={editorValue}
-                    onChange={(value) => setEditorValue(value || "")}
-                    options={{
-                        minimap: { enabled: false },
-                        automaticLayout: true,
-                    }}
-                />
+
+            <DialogContent sx={{ height: 500 }}>
+                {editMode === "yaml" ? (
+                    <Editor
+                        height="100%"
+                        language="yaml"
+                        value={editorValue}
+                        onChange={(v) => setEditorValue(v || "")}
+                        options={{
+                            minimap: { enabled: false },
+                            automaticLayout: true,
+                        }}
+                    />
+                ) : (
+                    <Box sx={{ mt: 2 }}>
+                        <RenderFields
+                            data={formState}
+                            onChange={handleNestedChange}
+                        />
+                    </Box>
+                )}
             </DialogContent>
+
             <DialogActions>
                 <Button onClick={onClose} color="primary" variant="contained">
                     Cancel