edit functioanlity in form of FORM

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

Author: Shrutim1505

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

@@ -25,15 +25,31 @@ const RenderFields = ({ data, onChange, path = [] }) => {
 
         if (Array.isArray(value)) {
             return (
-                <Box key={currentPath.join(".")} sx={{ mb: 2, pl: 2, borderLeft: "2px solid #ccc" }}>
+                <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
+                                    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 {
@@ -44,7 +60,9 @@ const RenderFields = ({ data, onChange, path = [] }) => {
                                     value={item}
                                     fullWidth
                                     margin="dense"
-                                    onChange={(e) => onChange(itemPath, e.target.value)}
+                                    onChange={(e) =>
+                                        onChange(itemPath, e.target.value)
+                                    }
                                 />
                             );
                         }
@@ -55,9 +73,16 @@ const RenderFields = ({ data, onChange, path = [] }) => {
 
         if (typeof value === "object" && value !== null) {
             return (
-                <Box key={currentPath.join(".")} sx={{ mb: 2, pl: 2, borderLeft: "2px solid #ccc" }}>
+                <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} />
+                    <RenderFields
+                        data={value}
+                        onChange={onChange}
+                        path={currentPath}
+                    />
                 </Box>
             );
         }
@@ -75,7 +100,6 @@ const RenderFields = ({ data, onChange, path = [] }) => {
     });
 };
 
-
 const updateNestedValue = (obj, path, value) => {
     const lastKey = path.pop();
     const nested = path.reduce((acc, key) => (acc[key] = acc[key] || {}), obj);
@@ -114,12 +138,15 @@ const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
     };
 
     const handleNestedChange = (path, value) => {
-        setFormState((prev) => updateNestedValue({ ...prev }, [...path], value));
+        setFormState((prev) =>
+            updateNestedValue({ ...prev }, [...path], value),
+        );
     };
 
     const handleSave = () => {
         try {
-            const updated = editMode === "yaml" ? yaml.load(editorValue) : formState;
+            const updated =
+                editMode === "yaml" ? yaml.load(editorValue) : formState;
             onSave(updated);
             onClose();
         } catch (error) {
@@ -130,9 +157,19 @@ const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
 
     return (
         <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
-            <DialogTitle sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+            <DialogTitle
+                sx={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                }}
+            >
                 Edit Queue
-                <ToggleButtonGroup value={editMode} exclusive onChange={handleModeChange}>
+                <ToggleButtonGroup
+                    value={editMode}
+                    exclusive
+                    onChange={handleModeChange}
+                >
                     <ToggleButton value="yaml">YAML</ToggleButton>
                     <ToggleButton value="form">Form</ToggleButton>
                 </ToggleButtonGroup>
@@ -145,11 +182,17 @@ const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
                         language="yaml"
                         value={editorValue}
                         onChange={(v) => setEditorValue(v || "")}
-                        options={{ minimap: { enabled: false }, automaticLayout: true }}
+                        options={{
+                            minimap: { enabled: false },
+                            automaticLayout: true,
+                        }}
                     />
                 ) : (
                     <Box sx={{ mt: 2 }}>
-                        <RenderFields data={formState} onChange={handleNestedChange} />
+                        <RenderFields
+                            data={formState}
+                            onChange={handleNestedChange}
+                        />
                     </Box>
                 )}
             </DialogContent>
@@ -158,7 +201,11 @@ const EditQueueDialog = ({ open, queue, onClose, onSave }) => {
                 <Button onClick={onClose} color="primary" variant="contained">
                     Cancel
                 </Button>
-                <Button onClick={handleSave} color="primary" variant="contained">
+                <Button
+                    onClick={handleSave}
+                    color="primary"
+                    variant="contained"
+                >
                     Update
                 </Button>
             </DialogActions>