From 1d46bee0f998f11f47afcedf1c0a9da48dc56488 Mon Sep 17 00:00:00 2001 From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com> Date: Wed, 21 Aug 2024 11:47:11 -0300 Subject: [PATCH] refactor: component code validation (#3470) * removed post custom component update * Added post validade component code mutation * Used post validade code mutation on component code * removed unused console log * used validate component code on generic node code validation --- .../components/NodeStatus/index.tsx | 1 - .../src/CustomNodes/GenericNode/index.tsx | 43 +++++++++------- src/frontend/src/controllers/API/index.ts | 15 ------ .../nodes/use-post-validate-component-code.ts | 50 +++++++++++++++++++ .../src/modals/codeAreaModal/index.tsx | 37 ++++++++------ src/frontend/src/utils/parameterUtils.ts | 38 -------------- 6 files changed, 95 insertions(+), 89 deletions(-) create mode 100644 src/frontend/src/controllers/API/queries/nodes/use-post-validate-component-code.ts delete mode 100644 src/frontend/src/utils/parameterUtils.ts diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx index cdb33c7a4..45fb46eb1 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx @@ -89,7 +89,6 @@ export default function NodeStatus({ }; useEffect(() => { - console.log(selected); setBorderColor( getNodeBorderClassName(selected, showNode, buildStatus, validationStatus), ); diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index a7d984845..039caeac8 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,3 +1,4 @@ +import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code"; import { useEffect, useMemo, useState } from "react"; import { useHotkeys } from "react-hotkeys-hook"; import { NodeToolbar, useUpdateNodeInternals } from "reactflow"; @@ -7,7 +8,6 @@ import IconComponent, { import ShadTooltip from "../../components/shadTooltipComponent"; import { Button } from "../../components/ui/button"; import { TOOLTIP_OUTDATED_NODE } from "../../constants/constants"; -import { postCustomComponent } from "../../controllers/API"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import useAlertStore from "../../stores/alertStore"; import useFlowStore from "../../stores/flowStore"; @@ -86,6 +86,8 @@ export default function GenericNode({ const [showHiddenOutputs, setShowHiddenOutputs] = useState(false); + const { mutate: validateComponentCode } = usePostValidateComponentCode(); + const handleUpdateCode = () => { setLoadingUpdate(true); takeSnapshot(); @@ -97,25 +99,28 @@ export default function GenericNode({ const currentCode = thisNodeTemplate.code.value; if (data.node) { - postCustomComponent(currentCode, data.node) - .then((apiReturn) => { - const { data, type } = apiReturn.data; - if (data && type && updateNodeCode) { - updateNodeCode(data, currentCode, "code", type); + validateComponentCode( + { code: currentCode, frontend_node: data.node }, + { + onSuccess: ({ data, type }) => { + if (data && type && updateNodeCode) { + updateNodeCode(data, currentCode, "code", type); + setLoadingUpdate(false); + } + }, + onError: (error) => { + setErrorData({ + title: "Error updating Compoenent code", + list: [ + "There was an error updating the Component.", + "If the error persists, please report it on our Discord or GitHub.", + ], + }); + console.log(error); setLoadingUpdate(false); - } - }) - .catch((err) => { - setErrorData({ - title: "Error updating Compoenent code", - list: [ - "There was an error updating the Component.", - "If the error persists, please report it on our Discord or GitHub.", - ], - }); - setLoadingUpdate(false); - console.log(err); - }); + }, + }, + ); } }; diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 25436163e..9b714e18b 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -4,7 +4,6 @@ import { BASE_URL_API } from "../../constants/constants"; import { api } from "../../controllers/API/api"; import { APIObjectType, - APITemplateType, Component, CustomComponentRequest, Users, @@ -291,20 +290,6 @@ export async function postCustomComponent( }); } -export async function postCustomComponentUpdate( - code: string, - template: APITemplateType, - field: string, - field_value: any, -): Promise> { - return await api.post(`${BASE_URL_API}custom_component/update`, { - code, - template, - field, - field_value, - }); -} - export async function renewAccessToken() { try { return await api.post(`${BASE_URL_API}refresh`); diff --git a/src/frontend/src/controllers/API/queries/nodes/use-post-validate-component-code.ts b/src/frontend/src/controllers/API/queries/nodes/use-post-validate-component-code.ts new file mode 100644 index 000000000..3bb65ed4c --- /dev/null +++ b/src/frontend/src/controllers/API/queries/nodes/use-post-validate-component-code.ts @@ -0,0 +1,50 @@ +import { + APIClassType, + CustomComponentRequest, + ResponseErrorTypeAPI, + useMutationFunctionType, +} from "@/types/api"; +import { UseMutationResult } from "@tanstack/react-query"; +import { api } from "../../api"; +import { getURL } from "../../helpers/constants"; +import { UseRequestProcessor } from "../../services/request-processor"; + +interface IPostValidateComponentCode { + code: string; + frontend_node: APIClassType; +} + +export const usePostValidateComponentCode: useMutationFunctionType< + undefined, + IPostValidateComponentCode, + CustomComponentRequest, + ResponseErrorTypeAPI +> = (options?) => { + const { mutate } = UseRequestProcessor(); + + const postValidateComponentCodeFn = async ( + payload: IPostValidateComponentCode, + ): Promise => { + const response = await api.post( + getURL("CUSTOM_COMPONENT"), + { + code: payload.code, + frontend_node: payload.frontend_node, + }, + ); + + return response.data; + }; + + const mutation: UseMutationResult< + CustomComponentRequest, + ResponseErrorTypeAPI, + IPostValidateComponentCode + > = mutate( + ["usePostValidateComponentCode"], + postValidateComponentCodeFn, + options, + ); + + return mutation; +}; diff --git a/src/frontend/src/modals/codeAreaModal/index.tsx b/src/frontend/src/modals/codeAreaModal/index.tsx index 4adb1747e..9a6943576 100644 --- a/src/frontend/src/modals/codeAreaModal/index.tsx +++ b/src/frontend/src/modals/codeAreaModal/index.tsx @@ -5,6 +5,7 @@ import "ace-builds/src-noconflict/theme-github"; import "ace-builds/src-noconflict/theme-twilight"; // import "ace-builds/webpack-resolver"; import { usePostValidateCode } from "@/controllers/API/queries/nodes/use-post-validate-code"; +import { usePostValidateComponentCode } from "@/controllers/API/queries/nodes/use-post-validate-component-code"; import { useEffect, useRef, useState } from "react"; import AceEditor from "react-ace"; import ReactAce from "react-ace/lib/ace"; @@ -22,7 +23,6 @@ import { CODE_PROMPT_DIALOG_SUBTITLE, EDIT_CODE_TITLE, } from "../../constants/constants"; -import { postCustomComponent } from "../../controllers/API"; import useAlertStore from "../../stores/alertStore"; import { useDarkStore } from "../../stores/darkStore"; import { CodeErrorDataTypeAPI } from "../../types/api"; @@ -52,11 +52,13 @@ export default function CodeAreaModal({ const setErrorData = useAlertStore((state) => state.setErrorData); const [openConfirmation, setOpenConfirmation] = useState(false); const codeRef = useRef(null); - const { mutate, isPending } = usePostValidateCode(); const [error, setError] = useState<{ detail: CodeErrorDataTypeAPI; } | null>(null); + const { mutate: validateCode } = usePostValidateCode(); + const { mutate: validateComponentCode } = usePostValidateComponentCode(); + useEffect(() => { // if nodeClass.template has more fields other than code and dynamic is true // do not run handleClick @@ -66,7 +68,7 @@ export default function CodeAreaModal({ }, []); function processNonDynamicField() { - mutate( + validateCode( { code }, { onSuccess: (apiReturn) => { @@ -111,19 +113,22 @@ export default function CodeAreaModal({ } function processDynamicField() { - postCustomComponent(code, nodeClass!) - .then((apiReturn) => { - const { data, type } = apiReturn.data; - if (data && type) { - setValue(code); - setNodeClass(data, type); - setError({ detail: { error: undefined, traceback: undefined } }); - setOpen(false); - } - }) - .catch((err) => { - setError(err.response.data); - }); + validateComponentCode( + { code, frontend_node: nodeClass! }, + { + onSuccess: ({ data, type }) => { + if (data && type) { + setValue(code); + setNodeClass(data, type); + setError({ detail: { error: undefined, traceback: undefined } }); + setOpen(false); + } + }, + onError: (error) => { + setError(error.response.data); + }, + }, + ); } function processCode() { diff --git a/src/frontend/src/utils/parameterUtils.ts b/src/frontend/src/utils/parameterUtils.ts deleted file mode 100644 index 83f0fd5ce..000000000 --- a/src/frontend/src/utils/parameterUtils.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { debounce } from "lodash"; -import { SAVE_DEBOUNCE_TIME } from "../constants/constants"; -import { postCustomComponentUpdate } from "../controllers/API"; -import { NodeDataType } from "../types/flow"; - -export const handleUpdateValues = async (name: string, data: NodeDataType) => { - const code = data.node?.template?.code?.value; - if (!code) { - console.error("Code not found in the template"); - return; - } - - const template = data.node?.template; - if (!template) { - console.error("No template found in the component."); - return; - } - - try { - const res = await postCustomComponentUpdate( - code, - template, - name, - data.node?.template[name]?.value, - ); - if (res.status === 200 && data.node?.template) { - return res.data.template; - } - } catch (error) { - console.error("Error occurred while updating the component:", error); - throw error; - } -}; - -export const debouncedHandleUpdateValues = debounce( - handleUpdateValues, - SAVE_DEBOUNCE_TIME, -);