From 35322e7d559a4f44030908e559ab2912ee2ae670 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Wed, 30 Aug 2023 16:37:53 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(parameterComponent):=20impor?= =?UTF-8?q?t=20KeypairListComponent=20from=20correct=20path=20to=20fix=20c?= =?UTF-8?q?ompilation=20error=20=E2=9C=A8=20feat(parameterComponent):=20ad?= =?UTF-8?q?d=20support=20for=20editing=20key-value=20pairs=20in=20the=20pa?= =?UTF-8?q?rameter=20component=20=F0=9F=90=9B=20fix(genericIconComponent):?= =?UTF-8?q?=20fix=20stroke=20width=20prop=20name=20to=20strokeWidth=20to?= =?UTF-8?q?=20fix=20SVG=20rendering=20issue=20=F0=9F=90=9B=20fix(keypairLi?= =?UTF-8?q?stComponent):=20import=20GenericModal=20from=20correct=20path?= =?UTF-8?q?=20to=20fix=20compilation=20error=20=E2=9C=A8=20feat(keypairLis?= =?UTF-8?q?tComponent):=20add=20support=20for=20editing=20key-value=20pair?= =?UTF-8?q?s=20in=20the=20keypair=20list=20component=20=F0=9F=90=9B=20fix(?= =?UTF-8?q?editNodeModal):=20import=20KeypairListComponent=20from=20correc?= =?UTF-8?q?t=20path=20to=20fix=20compilation=20error=20=E2=9C=A8=20feat(ed?= =?UTF-8?q?itNodeModal):=20add=20support=20for=20editing=20key-value=20pai?= =?UTF-8?q?rs=20in=20the=20edit=20node=20modal=20=F0=9F=90=9B=20fix(types)?= =?UTF-8?q?:=20change=20value=20type=20in=20KeyPairListComponent=20to=20an?= =?UTF-8?q?y=20to=20allow=20for=20any=20key-value=20pair?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/parameterComponent/index.tsx | 71 ++++++++++++------- .../components/genericIconComponent/index.tsx | 2 +- .../components/keypairListComponent/index.tsx | 34 +++++---- .../src/modals/EditNodeModal/index.tsx | 67 +++++++++++------ src/frontend/src/types/components/index.ts | 2 +- 5 files changed, 114 insertions(+), 62 deletions(-) diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index afdaa397a..dbd091e63 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -16,6 +16,7 @@ import InputComponent from "../../../../components/inputComponent"; import InputFileComponent from "../../../../components/inputFileComponent"; import InputListComponent from "../../../../components/inputListComponent"; import IntComponent from "../../../../components/intComponent"; +import KeypairListComponent from "../../../../components/keypairListComponent"; import PromptAreaComponent from "../../../../components/promptComponent"; import TextAreaComponent from "../../../../components/textAreaComponent"; import ToggleShadComponent from "../../../../components/toggleShadComponent"; @@ -31,7 +32,6 @@ import { nodeNames, } from "../../../../utils/styleUtils"; import { classNames, groupByFamily } from "../../../../utils/utils"; -import KeypairListComponent from "../../../../components/keypairListComponent"; export default function ParameterComponent({ left, @@ -94,21 +94,44 @@ export default function ParameterComponent({ renderTooltips(); }; - const [arrayOfObjects, setArrayOfObjects] = useState([ - { key1: "value1", key2: "value2" }, - { key3: "value3", key4: "value4" }, - { key5: "value5", key6: "value6" }, - ]) + const [dict, setDict] = useState({ + key1: "value1", + key2: "value2", + key3: "value3", + key4: "value4", + key5: "value5", + key6: "value6", + } as {}); + const [dictArr, setDictArr] = useState([]); + useEffect(() => { + convertToArray(dict); + }, [dict]); - const handleOnNewValueTest = (newValue): void => { - let newData = cloneDeep(arrayOfObjects); - newData = newValue; - setArrayOfObjects(newData); + const convertToArray = (singleObject) => { + let arrConverted: any = []; + for (const key in singleObject) { + if (singleObject.hasOwnProperty(key)) { + const newObj = {}; + newObj[key] = singleObject[key]; + arrConverted.push(newObj); + } + } + setDictArr(arrConverted); }; - - + const convertToDict = (newValue): void => { + const flattenedObject = {}; + for (const obj of newValue) { + for (const key in obj) { + if (obj.hasOwnProperty(key)) { + flattenedObject[key] = obj[key]; + } + } + } + let newData = cloneDeep(flattenedObject); + setDict(newData); + }; useEffect(() => { if (name === "openai_api_base") console.log(info); @@ -225,6 +248,15 @@ export default function ParameterComponent({ type === "int") && !optionalHandle ? ( <> + ) : left === true && type === "str" ? ( +
+ +
) : ( - ) - : left === true && type === "keypair" ? ( -
- -
- ) - : ( + ) : ( <> )} diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx index a06707d74..0473c2d90 100644 --- a/src/frontend/src/components/genericIconComponent/index.tsx +++ b/src/frontend/src/components/genericIconComponent/index.tsx @@ -11,7 +11,7 @@ export default function IconComponent({ ); } diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx index efb122414..be6ea1f64 100644 --- a/src/frontend/src/components/keypairListComponent/index.tsx +++ b/src/frontend/src/components/keypairListComponent/index.tsx @@ -2,6 +2,8 @@ import { useEffect } from "react"; import { KeyPairListComponent } from "../../types/components"; import _ from "lodash"; +import { TypeModal } from "../../constants/enums"; +import GenericModal from "../../modals/genericModal"; import { classNames } from "../../utils/utils"; import IconComponent from "../genericIconComponent"; import { Input } from "../ui/input"; @@ -26,10 +28,10 @@ export default function KeypairListComponent({ onChange(newInputList); }; - const handleChangeValue = (event, idx) => { + const handleChangeValue = (newValue, idx) => { const newInputList = _.cloneDeep(value); const key = Object.keys(newInputList[idx])[0]; - newInputList[idx][key] = event.target.value; + newInputList[idx][key] = newValue; onChange(newInputList); }; @@ -58,20 +60,24 @@ export default function KeypairListComponent({ } }} /> - handleChangeValue(event, index)} - onKeyDown={(e) => { - if (e.ctrlKey && e.key === "Backspace") { - e.preventDefault(); - e.stopPropagation(); - } + buttonText="Save" + modalTitle="Edit Value" + setValue={(value: string) => { + handleChangeValue(value, index); }} - /> + > + + + {index === value.length - 1 ? (