feat(frontend): add support for updating node template on code change in CodeAreaModal

fix(API): fix UpdateTemplate function return type to match the actual response
fix(vite.config.ts): add dynamic_node route to apiRoutes array to proxy requests to backend

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -227,6 +227,8 @@ export default function ParameterComponent({
           </div>
         ) : left === true && type === "code" ? (
           <CodeAreaComponent
+          setTemplate={(template)=>{data.node.template = template}}
+            template={data.node.template}
             disabled={disabled}
             value={data.node.template[name].value ?? ""}
             onChange={handleOnNewValue}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -62,7 +62,7 @@ export default function GenericNode({
   }
 
   useEffect(() => {}, [closePopUp, data.node.template]);
-
+  console.log({data})
   return (
     <>
       <NodeToolbar>

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
-import { TextAreaComponentType } from "../../types/components";
+import { CodeAreaComponentType, TextAreaComponentType } from "../../types/components";
 import { INPUT_STYLE } from "../../constants";
 
 export default function CodeAreaComponent({
@@ -11,7 +11,9 @@ export default function CodeAreaComponent({
   onChange,
   disabled,
   editNode = false,
-}: TextAreaComponentType) {
+  template,
+  setTemplate,
+}: CodeAreaComponentType) {
   const [myValue, setMyValue] = useState(value);
   const { openPopUp } = useContext(PopUpContext);
   useEffect(() => {
@@ -37,6 +39,8 @@ export default function CodeAreaComponent({
             openPopUp(
               <CodeAreaModal
                 value={myValue}
+                template={template}
+                setTemplate={setTemplate}
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
@@ -59,7 +63,9 @@ export default function CodeAreaComponent({
           onClick={() => {
             openPopUp(
               <CodeAreaModal
+              setTemplate={setTemplate}
                 value={myValue}
+                template={template}
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);

src/frontend/src/controllers/API/index.ts

@@ -322,6 +322,6 @@ export async function postBuildInit(
   return await axios.post(`/api/v1/build/init`, flow);
 }
 
-export async function UpdateTemplate(type:string, template:APITemplateType):Promise<AxiosResponse<APITemplateType>>{
+export async function UpdateTemplate(type:string, template:APITemplateType):Promise<AxiosResponse<{template:APITemplateType}>>{
-  return await axios.post(`/api/v1/UpdateTemplate`);
+  return await axios.get(`/dynamic_node`);
 }

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -8,7 +8,7 @@ import "ace-builds/src-noconflict/theme-twilight";
 import "ace-builds/src-noconflict/ext-language_tools";
 // import "ace-builds/webpack-resolver";
 import { darkContext } from "../../contexts/darkContext";
-import { postValidateCode } from "../../controllers/API";
+import { UpdateTemplate, postValidateCode } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import {
@@ -22,16 +22,23 @@ import {
 } from "../../components/ui/dialog";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
+import Loading from "../../components/ui/loading";
+import { APITemplateType } from "../../types/api";
 
 export default function CodeAreaModal({
   value,
   setValue,
+  template,
+  setTemplate
 }: {
   setValue: (value: string) => void;
   value: string;
+  template: APITemplateType,
+  setTemplate: (template: APITemplateType) => void;
 }) {
   const [open, setOpen] = useState(true);
   const [code, setCode] = useState(value);
+  const [loading, setLoading] = useState(false);
   const { dark } = useContext(darkContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
   const { closePopUp } = useContext(PopUpContext);
@@ -44,6 +51,58 @@ export default function CodeAreaModal({
       }, 300);
     }
   }
+
+  function handleClick() {
+    setLoading(true);
+    postValidateCode(code)
+      .then((apiReturn) => {
+        setLoading(false);
+        if (apiReturn.data) {
+          let importsErrors = apiReturn.data.imports.errors;
+          let funcErrors = apiReturn.data.function.errors;
+          if (funcErrors.length === 0 && importsErrors.length === 0) {
+            setSuccessData({
+              title: "Code is ready to run",
+            });
+            // setValue(code);
+          } else {
+            if (funcErrors.length !== 0) {
+              setErrorData({
+                title: "There is an error in your function",
+                list: funcErrors,
+              });
+            }
+            if (importsErrors.length !== 0) {
+              setErrorData({
+                title: "There is an error in your imports",
+                list: importsErrors,
+              });
+            }
+          }
+        } else {
+          setErrorData({
+            title: "Something went wrong, please try again",
+          });
+        }
+      })
+      .catch((_) => {
+        setLoading(false);
+        setErrorData({
+          title:
+            "There is something wrong with this code, please review it",
+        })
+      }
+      );
+    UpdateTemplate('code',template).then((apiReturn) => {
+      const data = apiReturn.data;
+      if (data.template) {
+        console.log('updated')
+        setTemplate(data.template);
+        setModalOpen(false);
+      }
+    })
+  }
+
   return (
     <Dialog open={true} onOpenChange={setModalOpen}>
       <DialogTrigger></DialogTrigger>
@@ -80,47 +139,10 @@ export default function CodeAreaModal({
         <DialogFooter>
           <Button
             className="mt-3"
-            onClick={() => {
+            onClick={handleClick}
-              postValidateCode(code)
-                .then((apiReturn) => {
-                  if (apiReturn.data) {
-                    let importsErrors = apiReturn.data.imports.errors;
-                    let funcErrors = apiReturn.data.function.errors;
-                    if (funcErrors.length === 0 && importsErrors.length === 0) {
-                      setSuccessData({
-                        title: "Code is ready to run",
-                      });
-                      setModalOpen(false);
-                      setValue(code);
-                    } else {
-                      if (funcErrors.length !== 0) {
-                        setErrorData({
-                          title: "There is an error in your function",
-                          list: funcErrors,
-                        });
-                      }
-                      if (importsErrors.length !== 0) {
-                        setErrorData({
-                          title: "There is an error in your imports",
-                          list: importsErrors,
-                        });
-                      }
-                    }
-                  } else {
-                    setErrorData({
-                      title: "Something went wrong, please try again",
-                    });
-                  }
-                })
-                .catch((_) =>
-                  setErrorData({
-                    title:
-                      "There is something wrong with this code, please review it",
-                  })
-                );
-            }}
             type="submit"
           >
+            {/* {loading?(<Loading/>):'Check & Save'} */}
             Check & Save
           </Button>
         </DialogFooter>

src/frontend/src/types/components/index.ts

@@ -1,6 +1,7 @@
 import { ForwardRefExoticComponent, ReactElement, ReactNode } from "react";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
+import { APITemplateType } from "../api";
 export type InputComponentType = {
   value: string;
   disabled?: boolean;
@@ -50,6 +51,15 @@ export type TextAreaComponentType = {
   editNode?: boolean;
 };
 
+export type CodeAreaComponentType = {
+  disabled: boolean;
+  onChange: (value: string[] | string) => void;
+  value: string;
+  editNode?: boolean;
+  template: APITemplateType;
+  setTemplate: (value: APITemplateType) => void;
+};
+
 export type FileComponentType = {
   disabled: boolean;
   onChange: (value: string[] | string) => void;

src/frontend/vite.config.ts

@@ -1,7 +1,7 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import svgr from "vite-plugin-svgr";
-const apiRoutes = ["^/api/v1/", "/health"];
+const apiRoutes = ["^/api/v1/", "/health","/dynamic_node"];
 
 // Use environment variable to determine the target.
 const target = process.env.VITE_PROXY_TARGET || "http://127.0.0.1:7860";