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

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),
     );

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);
-        });
+          },
+        },
+      );
     }
   };
 

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<AxiosResponse<APIClassType>> {
-  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`);

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<CustomComponentRequest> => {
+    const response = await api.post<CustomComponentRequest>(
+      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;
+};

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<ReactAce | null>(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() {

src/frontend/src/utils/parameterUtils.ts

@@ -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,
-);