connections list based on the selected action

frontend-app/src/app/create-run/ConfigForm.tsx

@@ -15,6 +15,8 @@ const ConfigForm: React.FC = () => {
   const { selectedNode }: any = useContext(BuilderContext);
   console.log("SELECTED NODE", selectedNode);
 
+  const [connections, setConnections] = useState<any[]>([]); // New state for connections
+
   // console.log("NODES", nodes);/
   // console.log("NODES", nodes)
   useEffect(() => {
@@ -67,13 +69,26 @@ const ConfigForm: React.FC = () => {
     setName(e.target.value);
     setFields(null);
     setFieldValues(null);
+
+
+    // Fetch inputs based on selected action
+
     let inputs = await fetch(
       "https://starfish-app-qfx4x.ondigitalocean.app/action/" + e.target.value,
     );
     inputs.json().then((res) => {
       setFields(res.inputs);
       setFieldValues({});
     });
+
+
+    // Fetch connections list based on the selected action
+    let connectionResponse = await fetch(
+      "https://starfish-app-qfx4x.ondigitalocean.app/connections"
+    );
+    connectionResponse.json().then((res) => {
+      setConnections(res); // Set connections
+    });
   }
 
   const { closeDrawer: cancel, saveDrawer: save } = useDrawer();
@@ -131,6 +146,21 @@ const ConfigForm: React.FC = () => {
             )}
           </>
         ))}
+
+         {/* Display list of connections here */}
+      {connections.length > 0 && (
+        <div>
+          <label>Connections</label>
+          <select>
+            {connections.map((connection, index) => (
+              <option key={index} value={connection.name}>
+                {connection.name}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
       <div>
         <button className="m-2 rounded border-solid	 border-zinc-400 bg-zinc-500 px-4 py-2 font-bold text-white hover:bg-yellow-700">
           Cancel