new features

fastapi-rest-apis/actions/index.py

@@ -23,6 +23,7 @@ def getAction(name):
     try:
         result = runSQL(f"select distinct * from action_inputs INNER join actions_content on actions_content.name = action_inputs.action where actions_content.name = '{name}'")
         result = result.fetchall()
+        print("RESULT", result)
         return result
     except:
         pass

fastapi-rest-apis/app.py

@@ -124,4 +124,21 @@ async def getAllFlowsAPI():
 async def runSQLAPI(request: Request):
     request = await request.json()
     runSQL(request['query'])
-    return 1
+    return 1
+
+@app.post("/add-connection")
+async def addConnection(request: Request):
+    request = await request.json()
+    name = request['name']
+    token = request['token']
+    runSQL(f"insert into connections (name, token) values ('{name}', '{token}')")
+    return True
+
+@app.get("/connections")
+async def getConnections():
+    result = runSQL("select * from connections")
+    result = result.fetchall()
+    json_res = []
+    for val in result:
+        json_res.append({"platform":val[0], "token": val[1], "username":val[2], "password":val[3]})
+    return json_res

frontend-app/src/app/app/[appId]/page.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { useEffect } from "react";
+
+export default function Page({ params }: any) {
+  const appId = params.appId;
+  return "You will be able to see the flow of your application here ";
+}

frontend-app/src/app/connections/page.tsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from "react";
 import { SERVER_URL } from "../../env";
 import ConnectionsForm from "./token-form";
+import { Sidebar } from "flowbite-react";
+import SidebarWrapper from "../_components/sidebar";
 
 export default function Connections() {
   const [connections, setConnections] = useState([]);
@@ -14,20 +16,27 @@ export default function Connections() {
   }, []);
   return (
     <>
-      <h1>Connections</h1>
-      <button onClick={() => setShowAddConnectionPopup(true)}>
-        Add a connection
-      </button>
-      {/* connections list */}
-      {/* {connections.map((conn: any) => {
-        <li>{conn.name}</li>;
-      })} */}
-      {/* Add connection Popup */}
-      {showAddConnectionPopup && (
-        <ConnectionsForm
-          setShowAddConnectionPopup={setShowAddConnectionPopup}
-        />
-      )}
+      <div className="flex flex-row">
+        <div className="connections-left">
+          <SidebarWrapper />
+        </div>
+        <div className="connections-right">
+          <h1>Connections</h1>
+          <button onClick={() => setShowAddConnectionPopup(true)}>
+            Add a connection
+          </button>
+          {/* connections list */}
+          {connections.map((conn: any) => {
+            return <li>{conn.platform}</li>;
+          })}
+          {/* Add connection Popup */}
+          {showAddConnectionPopup && (
+            <ConnectionsForm
+              setShowAddConnectionPopup={setShowAddConnectionPopup}
+            />
+          )}
+        </div>
+      </div>
     </>
   );
 }

frontend-app/src/app/connections/token-form.tsx

@@ -1,15 +1,21 @@
 "use client";
 
 import { useState } from "react";
+import { SERVER_URL } from "~/env";
 
 export default function ConnectionsForm({ setShowAddConnectionPopup }: any) {
   const [platform, setPlatform] = useState("");
   const [token, setToken] = useState("");
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log("Submitted:", { platform, token });
-    // Here you would typically send the data to your backend
+    fetch(`${SERVER_URL}/add-connection`, {
+      body: JSON.stringify({
+        name: platform,
+        token: token,
+      }),
+      method: "POST",
+    }).then(() => alert("token added successfully"));
   };
 
   return (

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

@@ -11,6 +11,14 @@ const ConfigForm: React.FC = () => {
   let workflowContext: any = useContext(WorkflowContext);
   let [prevNodeOutputs, setPrevNodeOutputs] = useState([]);
   let [prevNodeIdx, setPrevNodeIdx] = useState<number>(0);
+  let [showSelectConnection, setShowSelectConnection] = useState(false);
+  let [connections, setConnections] = useState([]);
+  let [selectedConnection, setSelectedConnection] = useState({
+    platform: "",
+    token: "",
+    username: "",
+    password: "",
+  });
   let nodes = workflowContext.nodes;
   let setNodes = workflowContext.setNodes;
   const { selectedNode }: any = useContext(BuilderContext);
@@ -25,15 +33,12 @@ const ConfigForm: React.FC = () => {
         // setActionItems(res);
         let actions = res.map((item: any) => item.action_name);
         let uniqueActions = [...new Set(actions)];
-
         setActionItems(uniqueActions);
         setFieldValues(res);
       });
   }, []);
 
   useEffect(() => {
-    // fetch("https://automarket.onrender.com/output/");
-    console.log("moved here");
     if (nodes.length > 3) {
       let idx = 0;
       for (let node of nodes) {
@@ -61,15 +66,50 @@ const ConfigForm: React.FC = () => {
     }
   }, [selectedNode]);
 
+  async function fetchConnectons() {
+    fetch(`${SERVER_URL}/connections`)
+      .then((res) => res.json())
+      .then((res) => {
+        console.log("RECIEVED CONNECTIONS", res);
+        setConnections(res);
+      });
+  }
+
+  function selectConnection(e: any) {
+    debugger;
+    console.log("SELECTED CONNECTION", e.target.value);
+    setSelectedConnection(e.target.value);
+    let connectionByName: any = connections.find(
+      (x: any) => x.platform == e.target.value,
+    );
+    setFieldValues({
+      ...fieldValues,
+      token: connectionByName.token,
+    });
+  }
   async function handleSelectionChange(e: any) {
     setName(e.target.value);
     setFields(null);
     setFieldValues(null);
-    let inputs = await fetch(
-      "https://automarket.onrender.com/action/" + e.target.value,
-    );
+    let inputs = await fetch(`${SERVER_URL}/action/` + e.target.value);
     inputs.json().then((res) => {
-      setFields(res.inputs);
+      console.log("RES INPUTS", res.inputs);
+      let resIncludesToken = false;
+      res.inputs.map((item: any) => {
+        if (item.name == "token") {
+          resIncludesToken = true;
+        }
+      });
+      if (resIncludesToken) {
+        setShowSelectConnection(true);
+        fetchConnectons();
+        let fieldsWithoutToken = res.inputs.filter((item: any) => {
+          return item.name != "token";
+        });
+        setFields(fieldsWithoutToken);
+      } else {
+        setFields(res.inputs);
+      }
       setFieldValues({});
     });
   }
@@ -127,6 +167,20 @@ const ConfigForm: React.FC = () => {
                 }
               />
             )}
+            {showSelectConnection && (
+              <>
+                <label>Select a connection</label>
+                <select
+                  value={selectedConnection.platform}
+                  onChange={selectConnection}
+                >
+                  <option>Select an connection</option>
+                  {connections.map((c: any) => (
+                    <option>{c.platform}</option>
+                  ))}
+                </select>
+              </>
+            )}
           </>
         ))}
       <div>