From 4e01de9e395bff36d2d1ab8834b42ef77a79ee48 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Fri, 23 Jun 2023 19:18:31 -0300 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=90=9B=20fix(inputListComponent):=20s?= =?UTF-8?q?et=20inputList=20state=20to=20value=20prop=20on=20value=20prop?= =?UTF-8?q?=20change=20to=20fix=20inputList=20not=20updating=20on=20prop?= =?UTF-8?q?=20change=20=F0=9F=94=92=20chore(utils.ts):=20add=20random=20nu?= =?UTF-8?q?mber=20to=20getRandomKeyByssmm=20function=20to=20reduce=20the?= =?UTF-8?q?=20chance=20of=20key=20collision?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/components/inputListComponent/index.tsx | 5 +++++ src/frontend/src/utils.ts | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 951d7a7ed..245ea93f0 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -19,6 +19,11 @@ export default function InputListComponent({ onChange([""]); } }, [disabled, onChange]); + + useEffect(() => { + setInputList(value); + }, [value]); + return (
Date: Fri, 23 Jun 2023 20:15:44 -0300 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=90=9B=20fix(inputListComponent):=20f?= =?UTF-8?q?ix=20onChange=20event=20not=20being=20triggered=20when=20input?= =?UTF-8?q?=20value=20changes=20=E2=9C=A8=20feat(inputListComponent):=20ad?= =?UTF-8?q?d=20PopUpContext=20to=20be=20able=20to=20close=20pop-ups=20when?= =?UTF-8?q?=20input=20value=20changes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/components/inputListComponent/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 245ea93f0..f50626e15 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -5,6 +5,7 @@ import { TabsContext } from "../../contexts/tabsContext"; import _ from "lodash"; import { INPUT_STYLE } from "../../constants"; import { X, Plus } from "lucide-react"; +import { PopUpContext } from "../../contexts/popUpContext"; export default function InputListComponent({ value, @@ -13,6 +14,8 @@ export default function InputListComponent({ editNode = false, }: InputListComponentType) { const [inputList, setInputList] = useState(value ?? [""]); + const { closePopUp } = useContext(PopUpContext); + useEffect(() => { if (disabled) { setInputList([""]); @@ -22,8 +25,10 @@ export default function InputListComponent({ useEffect(() => { setInputList(value); - }, [value]); + }, [closePopUp]); + + return (
{ let newInputList = _.cloneDeep(old); newInputList[idx] = e.target.value; + onChange(newInputList); return newInputList; }); - onChange(inputList); }} /> {idx === inputList.length - 1 ? ( From 94cc554834363281f0e83052c6ac1c1a391f0bb5 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Sat, 24 Jun 2023 11:03:36 -0300 Subject: [PATCH 3/4] =?UTF-8?q?=F0=9F=90=9B=20fix(dropdownComponent):=20ad?= =?UTF-8?q?d=20missing=20context=20imports=20and=20dependencies=20?= =?UTF-8?q?=F0=9F=90=9B=20fix(floatComponent):=20add=20missing=20context?= =?UTF-8?q?=20imports=20and=20dependencies=20=F0=9F=90=9B=20fix(intCompone?= =?UTF-8?q?nt):=20add=20missing=20context=20imports=20and=20dependencies?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/dropdownComponent/index.tsx | 12 ++++++++++-- src/frontend/src/components/floatComponent/index.tsx | 5 ++++- src/frontend/src/components/intComponent/index.tsx | 5 ++++- 3 files changed, 18 insertions(+), 4 deletions(-) diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 522078629..605a24041 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -1,9 +1,11 @@ import { Listbox, Transition } from "@headlessui/react"; -import { Fragment, useEffect, useState } from "react"; +import { Fragment, useContext, useEffect, useState } from "react"; import { DropDownComponentType } from "../../types/components"; import { classNames } from "../../utils"; import { INPUT_STYLE } from "../../constants"; import { ChevronsUpDown, Check } from "lucide-react"; +import { PopUpContext } from "../../contexts/popUpContext"; +import { TabsContext } from "../../contexts/tabsContext"; export default function Dropdown({ value, @@ -12,12 +14,16 @@ export default function Dropdown({ editNode = false, numberOfOptions = 0, }: DropDownComponentType) { + const { closePopUp } = useContext(PopUpContext); + + let [internalValue, setInternalValue] = useState( value === "" || !value ? "Choose an option" : value ); + useEffect(() => { setInternalValue(value === "" || !value ? "Choose an option" : value); - }, [value]); + }, [closePopUp]); return ( <> @@ -81,7 +87,9 @@ export default function Dropdown({ ) } value={option} + > + {({ selected, active }) => ( <> { setMyValue(value); - }, [value]); + }, [closePopUp]); + return (
{ if (disabled) { @@ -24,7 +26,8 @@ export default function IntComponent({ useEffect(() => { setMyValue(value); - }, [value]); + }, [closePopUp]); + return (
Date: Mon, 26 Jun 2023 17:11:47 -0300 Subject: [PATCH 4/4] =?UTF-8?q?=F0=9F=94=A7=20refactor(frontend):=20remove?= =?UTF-8?q?=20unnecessary=20blank=20lines=20in=20multiple=20components=20?= =?UTF-8?q?=F0=9F=94=A7=20refactor(tabsContext.tsx):=20add=20missing=20typ?= =?UTF-8?q?e=20annotations=20and=20improve=20code=20readability=20?= =?UTF-8?q?=F0=9F=94=A7=20refactor(ApiModal):=20improve=20code=20readabili?= =?UTF-8?q?ty=20by=20adding=20a=20new=20line=20to=20a=20JSX=20element=20?= =?UTF-8?q?=F0=9F=94=A7=20refactor(EditNodeModal):=20remove=20unnecessary?= =?UTF-8?q?=20blank=20line=20in=20a=20JSX=20element?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/package-lock.json | 39 ++++++++++--------- .../components/dropdownComponent/index.tsx | 3 -- .../src/components/floatComponent/index.tsx | 1 - .../components/inputListComponent/index.tsx | 2 - .../src/components/intComponent/index.tsx | 1 - src/frontend/src/contexts/tabsContext.tsx | 28 +++++++------ src/frontend/src/modals/ApiModal/index.tsx | 4 +- .../src/modals/EditNodeModal/index.tsx | 2 +- 8 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index 673f56f10..0edd88d0d 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -1212,15 +1212,15 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/@mui/system": { - "version": "5.13.5", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.5.tgz", - "integrity": "sha512-n0gzUxoZ2ZHZgnExkh2Htvo9uW2oakofgPRQrDoa/GQOWyRD0NH9MDszBwOb6AAoXZb+OV5TE7I4LeZ/dzgHYA==", + "version": "5.13.6", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.13.6.tgz", + "integrity": "sha512-G3Xr28uLqU3DyF6r2LQkHGw/ku4P0AHzlKVe7FGXOPl7X1u+hoe2xxj8Vdiq/69II/mh9OP21i38yBWgWb7WgQ==", "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.22.5", "@mui/private-theming": "^5.13.1", "@mui/styled-engine": "^5.13.2", "@mui/types": "^7.2.4", - "@mui/utils": "^5.13.1", + "@mui/utils": "^5.13.6", "clsx": "^1.2.1", "csstype": "^3.1.2", "prop-types": "^15.8.1" @@ -1280,11 +1280,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.13.1", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.1.tgz", - "integrity": "sha512-6lXdWwmlUbEU2jUI8blw38Kt+3ly7xkmV9ljzY4Q20WhsJMWiNry9CX8M+TaP/HbtuyR8XKsdMgQW7h7MM3n3A==", + "version": "5.13.6", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.13.6.tgz", + "integrity": "sha512-ggNlxl5NPSbp+kNcQLmSig6WVB0Id+4gOxhx644987v4fsji+CSXc+MFYLocFB/x4oHtzCUlSzbVHlJfP/fXoQ==", "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.22.5", "@types/prop-types": "^15.7.5", "@types/react-is": "^18.2.0", "prop-types": "^15.8.1", @@ -3444,7 +3444,7 @@ "version": "16.18.12", "resolved": "https://registry.npmjs.org/@types/node/-/node-16.18.12.tgz", "integrity": "sha512-vzLe5NaNMjIE3mcddFVGlAXN1LEWueUsMsOJWaT6wWMJGyljHAWHznqfnKUQWGzu7TLPrGvWdNAsvQYW+C0xtw==", - "devOptional": true + "dev": true }, "node_modules/@types/parse-json": { "version": "4.0.0", @@ -3714,9 +3714,9 @@ } }, "node_modules/aria-query": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.2.1.tgz", - "integrity": "sha512-7uFg4b+lETFgdaJyETnILsXgnnzVnkHcgRbwbPwevm5x/LmUlt3MjczMRe1zg824iBgXZNRPTBftNYyRSKLp2g==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz", + "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "dependencies": { "dequal": "^2.0.3" @@ -5010,9 +5010,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.438", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.438.tgz", - "integrity": "sha512-x94U0FhphEsHsOloCvlsujHCvoir0ZQ73ZAs/QN4PLx98uNvyEU79F75rq1db75Bx/atvuh7KPeuxelh+xfYJw==" + "version": "1.4.440", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.440.tgz", + "integrity": "sha512-r6dCgNpRhPwiWlxbHzZQ/d9swfPaEJGi8ekqRBwQYaR3WmA5VkqQfBWSDDjuJU1ntO+W9tHx8OHV/96Q8e0dVw==" }, "node_modules/emoji-regex": { "version": "8.0.0", @@ -5504,6 +5504,7 @@ "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "dev": true, "hasInstallScript": true, "optional": true, "os": [ @@ -6745,9 +6746,9 @@ } }, "node_modules/katex": { - "version": "0.16.7", - "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.7.tgz", - "integrity": "sha512-Xk9C6oGKRwJTfqfIbtr0Kes9OSv6IFsuhFGc7tW4urlpMJtuh+7YhzU6YEG9n8gmWKcMAFzkp7nr+r69kV0zrA==", + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz", + "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==", "funding": [ "https://opencollective.com/katex", "https://github.com/sponsors/katex" diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx index 605a24041..e252e1b21 100644 --- a/src/frontend/src/components/dropdownComponent/index.tsx +++ b/src/frontend/src/components/dropdownComponent/index.tsx @@ -16,7 +16,6 @@ export default function Dropdown({ }: DropDownComponentType) { const { closePopUp } = useContext(PopUpContext); - let [internalValue, setInternalValue] = useState( value === "" || !value ? "Choose an option" : value ); @@ -87,9 +86,7 @@ export default function Dropdown({ ) } value={option} - > - {({ selected, active }) => ( <> { setInputList(value); }, [closePopUp]); - - return (
{ edge.className = ""; edge.style = { stroke: "#555555" }; }); } - function updateDisplay_name(node:NodeType,template:APIClassType) { - node.data.node.display_name = template["display_name"]?template["display_name"]:node.data.type; + function updateDisplay_name(node: NodeType, template: APIClassType) { + node.data.node.display_name = template["display_name"] + ? template["display_name"] + : node.data.type; } function processFlowNodes(flow) { - if(!flow.data || !flow.data.nodes) return; - flow.data.nodes.forEach((node:NodeType) => { + if (!flow.data || !flow.data.nodes) return; + flow.data.nodes.forEach((node: NodeType) => { const template = templates[node.data.type]; if (!template) { setErrorData({ title: `Unknown node type: ${node.data.type}` }); return; } if (Object.keys(template["template"]).length > 0) { - updateDisplay_name(node,template); + updateDisplay_name(node, template); updateNodeBaseClasses(node, template); updateNodeEdges(flow, node, template); updateNodeDescription(node, template); @@ -220,11 +222,15 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); } - function updateNodeBaseClasses(node:NodeType,template:APIClassType) { + function updateNodeBaseClasses(node: NodeType, template: APIClassType) { node.data.node.base_classes = template["base_classes"]; } - function updateNodeEdges(flow:FlowType, node:NodeType,template:APIClassType) { + function updateNodeEdges( + flow: FlowType, + node: NodeType, + template: APIClassType + ) { flow.data.edges.forEach((edge) => { if (edge.source === node.id) { edge.sourceHandle = edge.sourceHandle @@ -236,11 +242,11 @@ export function TabsProvider({ children }: { children: ReactNode }) { }); } - function updateNodeDescription(node:NodeType,template:APIClassType) { + function updateNodeDescription(node: NodeType, template: APIClassType) { node.data.node.description = template["description"]; } - function updateNodeTemplate(node:NodeType,template:APIClassType) { + function updateNodeTemplate(node: NodeType, template: APIClassType) { node.data.node.template = updateTemplate( template["template"] as unknown as APITemplateType, node.data.node.template as APITemplateType @@ -404,7 +410,7 @@ export function TabsProvider({ children }: { children: ReactNode }) { y: insidePosition.y + n.position.y - minimumY, }, data: { - ...n.data, + ..._.cloneDeep(n.data), id: newId, }, }; diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx index 8b373c4e2..d6fff5d9f 100644 --- a/src/frontend/src/modals/ApiModal/index.tsx +++ b/src/frontend/src/modals/ApiModal/index.tsx @@ -103,7 +103,9 @@ export default function ApiModal({ flow }: { flow: FlowType }) {
{tabs.map((tab, index) => ( - {tab.name} + + {tab.name} + ))}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index fa7563bfb..e2f9c7bca 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -79,7 +79,7 @@ export default function EditNodeModal({ data }: { data: NodeDataType }) { } return ( - +