refactor: prompt validation functionality (#3473)

* Added post validate prompt mutation

* Updated prompt modal to use mutation to validate prompt

* Removed post validate prompt from API.ts

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

@@ -18,7 +18,6 @@ import {
   APIClassType,
   BuildStatusTypeAPI,
   InitTypeAPI,
-  PromptTypeAPI,
   UploadFileTypeAPI,
 } from "./../../types/api/index";
 
@@ -56,25 +55,6 @@ export async function sendAll(data: sendAllProps) {
   return await api.post(`${BASE_URL_API}predict`, data);
 }
 
-/**
- * Checks the prompt for the code block by sending it to an API endpoint.
- * @param {string} name - The name of the field to check.
- * @param {string} template - The template string of the prompt to check.
- * @param {APIClassType} frontend_node - The frontend node to check.
- * @returns {Promise<AxiosResponse<PromptTypeAPI>>} A promise that resolves to an AxiosResponse containing the validation results.
- */
-export async function postValidatePrompt(
-  name: string,
-  template: string,
-  frontend_node: APIClassType,
-): Promise<AxiosResponse<PromptTypeAPI>> {
-  return api.post(`${BASE_URL_API}validate/prompt`, {
-    name,
-    template,
-    frontend_node,
-  });
-}
-
 /**
  * Fetches a list of JSON files from a GitHub repository and returns their contents as an array of FlowType objects.
  *

src/frontend/src/controllers/API/queries/nodes/use-post-validate-prompt.ts

@@ -0,0 +1,48 @@
+import {
+  APIClassType,
+  PromptTypeAPI,
+  ResponseErrorDetailAPI,
+  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 IPostValidatePrompt {
+  name: string;
+  template: string;
+  frontend_node: APIClassType;
+}
+
+export const usePostValidatePrompt: useMutationFunctionType<
+  undefined,
+  IPostValidatePrompt,
+  PromptTypeAPI,
+  ResponseErrorDetailAPI
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const postValidatePromptFn = async (
+    payload: IPostValidatePrompt,
+  ): Promise<PromptTypeAPI> => {
+    const response = await api.post<PromptTypeAPI>(
+      getURL("VALIDATE", { 1: "prompt" }),
+      {
+        name: payload.name,
+        template: payload.template,
+        frontend_node: payload.frontend_node,
+      },
+    );
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<
+    PromptTypeAPI,
+    ResponseErrorDetailAPI,
+    IPostValidatePrompt
+  > = mutate(["usePostValidatePrompt"], postValidatePromptFn, options);
+
+  return mutation;
+};

src/frontend/src/modals/promptModal/index.tsx

@@ -1,3 +1,4 @@
+import { usePostValidatePrompt } from "@/controllers/API/queries/nodes/use-post-validate-prompt";
 import { useEffect, useRef, useState } from "react";
 import IconComponent from "../../components/genericIconComponent";
 import SanitizedHTMLWrapper from "../../components/sanitizedHTMLWrapper";
@@ -18,7 +19,6 @@ import {
   PROMPT_DIALOG_SUBTITLE,
   regexHighlight,
 } from "../../constants/constants";
-import { postValidatePrompt } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { PromptModalType } from "../../types/components";
 import { handleKeyDown } from "../../utils/reactflowUtils";
@@ -46,6 +46,7 @@ export default function PromptModal({
   const setNoticeData = useAlertStore((state) => state.setNoticeData);
   const divRef = useRef(null);
   const divRefPrompt = useRef(null);
+  const { mutate: postValidatePrompt } = usePostValidatePrompt();
 
   function checkVariables(valueToCheck: string): void {
     const regex = /\{([^{}]+)\}/g;
@@ -122,51 +123,53 @@ export default function PromptModal({
   // Function need some review, working for now
   function validatePrompt(closeModal: boolean): void {
     //nodeClass is always null on tweaks
-    postValidatePrompt(field_name, inputValue, nodeClass!)
-      .then((apiReturn) => {
-        // if field_name is an empty string, then we need to set it
-        // to the first key of the custom_fields object
-        if (field_name === "") {
-          field_name = Array.isArray(
-            apiReturn.data?.frontend_node?.custom_fields?.[""],
-          )
-            ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? ""
-            : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? "";
-        }
-        if (apiReturn.data) {
-          let inputVariables = apiReturn.data.input_variables ?? [];
-          if (
-            JSON.stringify(apiReturn.data?.frontend_node) !== JSON.stringify({})
-          ) {
-            setValue(inputValue);
-            apiReturn.data.frontend_node.template.template.value = inputValue;
-            if (setNodeClass) setNodeClass(apiReturn.data?.frontend_node);
-            setModalOpen(closeModal);
-            setIsEdit(false);
+    postValidatePrompt(
+      { name: field_name, template: inputValue, frontend_node: nodeClass! },
+      {
+        onSuccess: (apiReturn) => {
+          if (field_name === "") {
+            field_name = Array.isArray(
+              apiReturn?.frontend_node?.custom_fields?.[""],
+            )
+              ? apiReturn?.frontend_node?.custom_fields?.[""][0] ?? ""
+              : apiReturn?.frontend_node?.custom_fields?.[""] ?? "";
           }
-          if (!inputVariables || inputVariables.length === 0) {
-            setNoticeData({
-              title: TEMP_NOTICE_ALERT,
-            });
+          if (apiReturn) {
+            let inputVariables = apiReturn.input_variables ?? [];
+            if (
+              JSON.stringify(apiReturn?.frontend_node) !== JSON.stringify({})
+            ) {
+              setValue(inputValue);
+              apiReturn.frontend_node.template.template.value = inputValue;
+              if (setNodeClass) setNodeClass(apiReturn?.frontend_node);
+              setModalOpen(closeModal);
+              setIsEdit(false);
+            }
+            if (!inputVariables || inputVariables.length === 0) {
+              setNoticeData({
+                title: TEMP_NOTICE_ALERT,
+              });
+            } else {
+              setSuccessData({
+                title: PROMPT_SUCCESS_ALERT,
+              });
+            }
           } else {
-            setSuccessData({
-              title: PROMPT_SUCCESS_ALERT,
+            setIsEdit(true);
+            setErrorData({
+              title: BUG_ALERT,
             });
           }
-        } else {
+        },
+        onError: (error) => {
           setIsEdit(true);
-          setErrorData({
-            title: BUG_ALERT,
+          return setErrorData({
+            title: PROMPT_ERROR_ALERT,
+            list: [error.response.data.detail ?? ""],
           });
-        }
-      })
-      .catch((error) => {
-        setIsEdit(true);
-        return setErrorData({
-          title: PROMPT_ERROR_ALERT,
-          list: [error.response.data.detail ?? ""],
-        });
-      });
+        },
+      },
+    );
   }
 
   return (