From 151d01f5063a9768466d7542158bfd41e7a2e7dc Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 24 Aug 2023 21:00:38 -0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20chore(Makefile):=20remove=20unne?= =?UTF-8?q?cessary=20semicolons=20in=20Makefile=20commands=20=F0=9F=94=A7?= =?UTF-8?q?=20chore(Makefile):=20remove=20unnecessary=20package-lock.json?= =?UTF-8?q?=20deletion=20in=20install=5Ffrontendc=20command=20=E2=9C=A8=20?= =?UTF-8?q?feat(ParameterComponent):=20add=20KeypairListComponent=20to=20h?= =?UTF-8?q?andle=20key-value=20pairs=20=F0=9F=94=A7=20chore(KeypairListCom?= =?UTF-8?q?ponent):=20create=20KeypairListComponent=20to=20handle=20key-va?= =?UTF-8?q?lue=20pairs=20=F0=9F=94=A7=20chore(KeypairListComponent):=20add?= =?UTF-8?q?=20handleChangeKey=20and=20handleChangeValue=20functions=20to?= =?UTF-8?q?=20handle=20changes=20in=20key-value=20pairs=20=F0=9F=94=A7=20c?= =?UTF-8?q?hore(KeypairListComponent):=20add=20button=20to=20add=20new=20k?= =?UTF-8?q?ey-value=20pair=20and=20remove=20existing=20key-value=20pair=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(KeypairListComponent):=20add=20disabled=20?= =?UTF-8?q?prop=20to=20disable=20editing=20of=20key-value=20pairs=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(KeypairListComponent):=20add=20editNode=20?= =?UTF-8?q?prop=20to=20style=20input=20fields=20in=20edit=20mode=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(types):=20add=20KeyPairListComponent=20typ?= =?UTF-8?q?e=20definition?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Makefile | 4 +- .../components/parameterComponent/index.tsx | 31 ++++- .../components/keypairListComponent/index.tsx | 108 ++++++++++++++++++ src/frontend/src/types/components/index.ts | 7 ++ 4 files changed, 147 insertions(+), 3 deletions(-) create mode 100644 src/frontend/src/components/keypairListComponent/index.tsx diff --git a/Makefile b/Makefile index c0c6a7abc..0b05ec7cf 100644 --- a/Makefile +++ b/Makefile @@ -32,10 +32,10 @@ lint: poetry run ruff . --fix install_frontend: - cd src/frontend && npm install; + cd src/frontend && npm install install_frontendc: - cd src/frontend && rm -rf node_modules package-lock.json && npm install; + cd src/frontend && rm -rf node_modules package-lock.json && npm install run_frontend: cd src/frontend && npm start diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 94cc939ff..0b577ed65 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -31,6 +31,7 @@ import { nodeNames, } from "../../../../utils/styleUtils"; import { classNames, groupByFamily } from "../../../../utils/utils"; +import KeypairListComponent from "../../../../components/keypairListComponent"; export default function ParameterComponent({ left, @@ -93,6 +94,22 @@ export default function ParameterComponent({ renderTooltips(); }; + const [arrayOfObjects, setArrayOfObjects] = useState([ + { key1: "value1", key2: "value2" }, + { key3: "value3", key4: "value4" }, + { key5: "value5", key6: "value6" }, + ]) + + + const handleOnNewValueTest = (newValue): void => { + let newData = cloneDeep(arrayOfObjects); + newData = newValue; + setArrayOfObjects(newData); + }; + + + + useEffect(() => { if (name === "openai_api_base") console.log(info); // @ts-ignore @@ -341,7 +358,19 @@ export default function ParameterComponent({ onChange={handleOnNewValue} /> - ) : ( + ) + : left === true && type === "keypair" ? ( +
+ +
+ ) + : ( <> )} diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx new file mode 100644 index 000000000..efb122414 --- /dev/null +++ b/src/frontend/src/components/keypairListComponent/index.tsx @@ -0,0 +1,108 @@ +import { useEffect } from "react"; +import { KeyPairListComponent } from "../../types/components"; + +import _ from "lodash"; +import { classNames } from "../../utils/utils"; +import IconComponent from "../genericIconComponent"; +import { Input } from "../ui/input"; + +export default function KeypairListComponent({ + value, + onChange, + disabled, + editNode = false, +}: KeyPairListComponent): JSX.Element { + useEffect(() => { + if (disabled) { + onChange([""]); + } + }, [disabled]); + + const handleChangeKey = (event, idx) => { + const newInputList = _.cloneDeep(value); + const oldKey = Object.keys(newInputList[idx])[0]; + const updatedObj = { [event.target.value]: newInputList[idx][oldKey] }; + newInputList[idx] = updatedObj; + onChange(newInputList); + }; + + const handleChangeValue = (event, idx) => { + const newInputList = _.cloneDeep(value); + const key = Object.keys(newInputList[idx])[0]; + newInputList[idx][key] = event.target.value; + onChange(newInputList); + }; + + return ( +
1 && editNode ? "my-1" : "", + "flex flex-col gap-3" + )} + > + {value.map((obj, index) => { + return Object.keys(obj).map((key, idx) => { + return ( +
+ handleChangeKey(event, index)} + onKeyDown={(e) => { + if (e.ctrlKey && e.key === "Backspace") { + e.preventDefault(); + e.stopPropagation(); + } + }} + /> + handleChangeValue(event, index)} + onKeyDown={(e) => { + if (e.ctrlKey && e.key === "Backspace") { + e.preventDefault(); + e.stopPropagation(); + } + }} + /> + {index === value.length - 1 ? ( + + ) : ( + + )} +
+ ); + }); + })} +
+ ); +} diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index c3e515333..62702a9e9 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -54,6 +54,13 @@ export type InputListComponentType = { editNode?: boolean; }; +export type KeyPairListComponent = { + value: any[]; + onChange: (value: string[]) => void; + disabled: boolean; + editNode?: boolean; +}; + export type TextAreaComponentType = { field_name?: string; nodeClass?: APIClassType;