From 5a57de5425d4436271f4665fea26d92a3bb55596 Mon Sep 17 00:00:00 2001 From: Gabriel Luiz Freitas Almeida Date: Tue, 27 Jun 2023 19:18:14 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(promptComponent,=20gene?= =?UTF-8?q?ricModal,=20promptModal,=20API):=20rename=20checkPrompt=20to=20?= =?UTF-8?q?postValidatePrompt=20=E2=9C=A8=20feat(promptComponent,=20generi?= =?UTF-8?q?cModal):=20add=20setNodeClass=20prop=20to=20PromptAreaComponent?= =?UTF-8?q?=20and=20GenericModal=20to=20update=20nodeClass=20The=20checkPr?= =?UTF-8?q?ompt=20function=20has=20been=20renamed=20to=20postValidatePromp?= =?UTF-8?q?t=20to=20better=20reflect=20its=20functionality.=20The=20Prompt?= =?UTF-8?q?TypeAPI=20now=20includes=20a=20frontend=5Fnode=20property,=20wh?= =?UTF-8?q?ich=20is=20used=20to=20update=20the=20nodeClass=20in=20the=20Pr?= =?UTF-8?q?omptAreaComponent=20and=20GenericModal=20components.=20The=20se?= =?UTF-8?q?tNodeClass=20prop=20has=20been=20added=20to=20both=20components?= =?UTF-8?q?=20to=20allow=20for=20updating=20the=20nodeClass.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/promptComponent/index.tsx | 2 ++ src/frontend/src/controllers/API/index.ts | 5 +++-- src/frontend/src/modals/genericModal/index.tsx | 15 ++++++++------- src/frontend/src/modals/promptModal/index.tsx | 4 ++-- src/frontend/src/types/api/index.ts | 6 +++++- src/frontend/src/types/components/index.ts | 1 + 6 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx index abc16c8db..fa18bd001 100644 --- a/src/frontend/src/components/promptComponent/index.tsx +++ b/src/frontend/src/components/promptComponent/index.tsx @@ -8,6 +8,7 @@ import { ExternalLink } from "lucide-react"; export default function PromptAreaComponent({ nodeClass, + setNodeClass, value, onChange, disabled, @@ -46,6 +47,7 @@ export default function PromptAreaComponent({ onChange(t); }} nodeClass={nodeClass} + setNodeClass={setNodeClass} /> ); }} diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 5c5c43a4d..9f212895e 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -1,10 +1,10 @@ import { BuildStatusTypeAPI, - PromptTypeAPI, errorsTypeAPI, InitTypeAPI, UploadFileTypeAPI, APIClassType, + PromptTypeAPI, } from "./../../types/api/index"; import { APIObjectType, sendAllProps } from "../../types/api/index"; import axios, { AxiosResponse } from "axios"; @@ -54,9 +54,10 @@ export async function postValidateCode( * Checks the prompt for the code block by sending it to an API endpoint. * * @param {string} template - The template string of the prompt to check. + * @param {APIClassType} frontend_node - The frontend node to check. * @returns {Promise>} A promise that resolves to an AxiosResponse containing the validation results. */ -export async function checkPrompt( +export async function postValidatePrompt( template: string, frontend_node: APIClassType ): Promise> { diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx index 8f7dcefc8..215ba0585 100644 --- a/src/frontend/src/modals/genericModal/index.tsx +++ b/src/frontend/src/modals/genericModal/index.tsx @@ -1,7 +1,7 @@ import { useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; import { darkContext } from "../../contexts/darkContext"; -import { checkPrompt } from "../../controllers/API"; +import { postValidatePrompt } from "../../controllers/API"; import { alertContext } from "../../contexts/alertContext"; import { Dialog, @@ -25,13 +25,15 @@ export default function GenericModal({ modalTitle, type, nodeClass, + setNodeClass, }: { setValue: (value: string) => void; value: string; buttonText: string; modalTitle: string; type: number; - nodeClass: APIClassType; + nodeClass?: APIClassType; + setNodeClass?: (Class: APIClassType) => void; }) { const [myButtonText] = useState(buttonText); const [myModalTitle] = useState(modalTitle); @@ -99,13 +101,12 @@ export default function GenericModal({ setModalOpen(false); break; case 2: - checkPrompt(myValue, nodeClass) + postValidatePrompt(myValue, nodeClass) .then((apiReturn) => { if (apiReturn.data) { - if (apiReturn.data) { - setNodeClass(data); - setModalOpen(false); - } + setNodeClass(apiReturn.data.frontend_node); + setModalOpen(false); + let inputVariables = apiReturn.data.input_variables; if (inputVariables.length === 0) { setErrorData({ diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 8a3ce4185..2ab1c140a 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -3,7 +3,7 @@ import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline"; import { Fragment, useContext, useRef, useState } from "react"; import { PopUpContext } from "../../contexts/popUpContext"; import { darkContext } from "../../contexts/darkContext"; -import { checkPrompt } from "../../controllers/API"; +import { postValidatePrompt } from "../../controllers/API"; import { alertContext } from "../../contexts/alertContext"; export default function PromptAreaModal({ value, @@ -107,7 +107,7 @@ export default function PromptAreaModal({ type="button" className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm" onClick={() => { - checkPrompt(myValue) + postValidatePrompt(myValue) .then((apiReturn) => { if (apiReturn.data) { let inputVariables = diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index 92827cc4e..d47663d18 100644 --- a/src/frontend/src/types/api/index.ts +++ b/src/frontend/src/types/api/index.ts @@ -14,6 +14,7 @@ export type APIClassType = { display_name: string; [key: string]: Array | string | APITemplateType; }; + export type TemplateVariableType = { type: string; required: boolean; @@ -38,7 +39,10 @@ export type errorsTypeAPI = { function: { errors: Array }; imports: { errors: Array }; }; -export type PromptTypeAPI = { input_variables: Array }; +export type PromptTypeAPI = { + input_variables: Array; + frontend_node: APIClassType; +}; export type BuildStatusTypeAPI = { built: boolean; diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index c1cc3756c..090d3a49f 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -46,6 +46,7 @@ export type InputListComponentType = { export type TextAreaComponentType = { nodeClass?: APIClassType; + setNodeClass?: (value: APIClassType) => void; disabled: boolean; onChange: (value: string[] | string) => void; value: string;