From a47dc9ae92d44a4018fcae432b4e30d1f7963f7c Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 22 Jun 2023 17:30:04 -0300 Subject: [PATCH] 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 --- .../components/parameterComponent/index.tsx | 2 + .../src/CustomNodes/GenericNode/index.tsx | 2 +- .../components/codeAreaComponent/index.tsx | 10 +- src/frontend/src/controllers/API/index.ts | 4 +- .../src/modals/codeAreaModal/index.tsx | 102 +++++++++++------- src/frontend/src/types/components/index.ts | 10 ++ src/frontend/vite.config.ts | 2 +- 7 files changed, 86 insertions(+), 46 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 65f946ba2..c35fd869b 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -227,6 +227,8 @@ export default function ParameterComponent({ ) : left === true && type === "code" ? ( {data.node.template = template}} + template={data.node.template} disabled={disabled} value={data.node.template[name].value ?? ""} onChange={handleOnNewValue} diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index fb1ed5f59..e2ddc051f 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -62,7 +62,7 @@ export default function GenericNode({ } useEffect(() => {}, [closePopUp, data.node.template]); - + console.log({data}) return ( <> diff --git a/src/frontend/src/components/codeAreaComponent/index.tsx b/src/frontend/src/components/codeAreaComponent/index.tsx index 399ab40b2..a4b7231c8 100644 --- a/src/frontend/src/components/codeAreaComponent/index.tsx +++ b/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( { setMyValue(t); onChange(t); @@ -59,7 +63,9 @@ export default function CodeAreaComponent({ onClick={() => { openPopUp( { setMyValue(t); onChange(t); diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index f19dbd5d8..60820bb7e 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/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>{ - return await axios.post(`/api/v1/UpdateTemplate`); +export async function UpdateTemplate(type:string, template:APITemplateType):Promise>{ + return await axios.get(`/dynamic_node`); } \ No newline at end of file diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 9f8815f4b..451946b0e 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/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 ( @@ -80,47 +139,10 @@ export default function CodeAreaModal({ diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 11f8aec07..5b31d63f1 100644 --- a/src/frontend/src/types/components/index.ts +++ b/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; diff --git a/src/frontend/vite.config.ts b/src/frontend/vite.config.ts index 860c690ea..176c73aea 100644 --- a/src/frontend/vite.config.ts +++ b/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";