Fix drop down

frontend/src/components/RestoreForm.jsx

@@ -1,12 +1,26 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-import { restoreBackup } from '../api/snapix';
+import { restoreBackup, getNamespaces, getPVCs } from '../api/snapix';
-import { Button, Input } from '@mui/base'
+import { Button, Input } from '@mui/base';
-import '../style/RestoreForm.css'; // Assuming you have some styles for the form
+import '../style/RestoreForm.css';
 
 export default function RestoreForm() {
   const [backupName, setBackupName] = useState('');
   const [targetNs, setTargetNs] = useState('');
   const [targetPvc, setTargetPvc] = useState('');
+  const [namespaces, setNamespaces] = useState([]);
+  const [pvcs, setPvcs] = useState([]);
+
+  useEffect(() => {
+    getNamespaces().then(res => setNamespaces(res.data));
+  }, []);
+
+  useEffect(() => {
+    if (targetNs) {
+      getPVCs(targetNs).then(res => setPvcs(res.data));
+    } else {
+      setPvcs([]);
+    }
+  }, [targetNs]);
 
   const handleRestore = () => {
     if (backupName && targetNs && targetPvc) {
@@ -15,45 +29,57 @@ export default function RestoreForm() {
         target_namespace: targetNs,
         target_pvc: targetPvc,
       }).then(() => {
-        alert("Restore started!");
+        alert('Restore started!');
       });
     }
   };
 
   return (
-    <div className='form-group'>
+    <div className="form-group">
       <h2>🔁 Restore PVC</h2>
-      <div className='form-content'>
+
+      <div className="form-content">
         <label>Backup Name:</label>
         <Input
           type="text"
           value={backupName}
           onChange={e => setBackupName(e.target.value)}
-          className='restore-input'
+          className="restore-input"
+          placeholder="The exact name of the backup to restore"
         />
       </div>
 
-      <div className='form-content'>
+      <div className="form-content">
         <label>Target Namespace:</label>
-        <Input
+        <select value={targetNs} onChange={e => setTargetNs(e.target.value)}>
-          type="text"
+          <option value="">-- Select Namespace --</option>
-          value={targetNs}
+          {namespaces.map(ns => (
-          onChange={e => setTargetNs(e.target.value)}
+            <option key={ns} value={ns}>
-          className='restore-input'
+              {ns}
-        />
+            </option>
+          ))}
+        </select>
       </div>
 
-      <div className='form-content'>
+      <div className="form-content">
         <label>Target PVC:</label>
-        <Input
+        <select
-          type="text"
           value={targetPvc}
           onChange={e => setTargetPvc(e.target.value)}
-          className='restore-input'
+          disabled={!targetNs}
-        />
+        >
+          <option value="">-- Select PVC --</option>
+          {pvcs.map(pvc => (
+            <option key={pvc} value={pvc}>
+              {pvc}
+            </option>
+          ))}
+        </select>
       </div>
 
-      <Button id='restore-btn' className='btn' onClick={handleRestore}>Restore</Button>
+      <Button id="restore-btn" className="btn" onClick={handleRestore}>
+        Restore
+      </Button>
     </div>
   );
 }