From 84a2231142671c1940177d80b9812ffc73bae598 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 10 Aug 2023 12:54:35 -0300 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20@ra?= =?UTF-8?q?dix-ui/react-select=20package=20to=20package.json=20dependencie?= =?UTF-8?q?s=20=F0=9F=94=A7=20chore(frontend):=20add=20SelectTrigger=20com?= =?UTF-8?q?ponent=20to=20handle=20select=20triggers=20in=20UI=20components?= =?UTF-8?q?=20=F0=9F=94=A7=20chore(frontend):=20add=20Select=20component?= =?UTF-8?q?=20to=20handle=20select=20inputs=20in=20UI=20components=20?= =?UTF-8?q?=F0=9F=94=A7=20chore(frontend):=20add=20EditNodeModal=20compone?= =?UTF-8?q?nt=20to=20handle=20editing=20of=20node=20data=20in=20modals?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The changes were made to add support for the @radix-ui/react-select package to the frontend package.json dependencies. Additionally, the SelectTrigger and Select components were added to handle select triggers and select inputs in the UI components. Finally, the EditNodeModal component was added to handle the editing of node data in modals. 🐛 fix(nodeToolbarComponent): fix import statements and add missing dependencies ✨ feat(nodeToolbarComponent): add select-trigger component and implement functionality to handle select change and show/hide modal based on selection --- src/frontend/package-lock.json | 52 ++++++++ src/frontend/package.json | 1 + .../src/components/ui/select-trigger.tsx | 116 +++++++++++++++++ src/frontend/src/components/ui/select.tsx | 121 ++++++++++++++++++ .../src/modals/EditNodeModal/index.tsx | 9 +- .../components/nodeToolbarComponent/index.tsx | 69 +++++++++- 6 files changed, 364 insertions(+), 4 deletions(-) create mode 100644 src/frontend/src/components/ui/select-trigger.tsx create mode 100644 src/frontend/src/components/ui/select.tsx diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json index ed3eacd4f..4cd812e5c 100644 --- a/src/frontend/package-lock.json +++ b/src/frontend/package-lock.json @@ -22,6 +22,7 @@ "@radix-ui/react-menubar": "^1.0.3", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", @@ -1029,6 +1030,14 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", + "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==", + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@radix-ui/primitive": { "version": "1.0.1", "license": "MIT", @@ -1652,6 +1661,49 @@ } } }, + "node_modules/@radix-ui/react-select": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz", + "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==", + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.4", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.3", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.2", + "@radix-ui/react-portal": "1.0.3", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-separator": { "version": "1.0.3", "license": "MIT", diff --git a/src/frontend/package.json b/src/frontend/package.json index e3814c1ad..dd0cadeeb 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -17,6 +17,7 @@ "@radix-ui/react-menubar": "^1.0.3", "@radix-ui/react-popover": "^1.0.6", "@radix-ui/react-progress": "^1.0.3", + "@radix-ui/react-select": "^1.2.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", diff --git a/src/frontend/src/components/ui/select-trigger.tsx b/src/frontend/src/components/ui/select-trigger.tsx new file mode 100644 index 000000000..438f3d188 --- /dev/null +++ b/src/frontend/src/components/ui/select-trigger.tsx @@ -0,0 +1,116 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown } from "lucide-react" +import { cn } from "../../utils/utils" + + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +} diff --git a/src/frontend/src/components/ui/select.tsx b/src/frontend/src/components/ui/select.tsx new file mode 100644 index 000000000..6398be1e2 --- /dev/null +++ b/src/frontend/src/components/ui/select.tsx @@ -0,0 +1,121 @@ +"use client" + +import * as React from "react" +import * as SelectPrimitive from "@radix-ui/react-select" +import { Check, ChevronDown } from "lucide-react" +import { cn } from "../../utils/utils" + + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = "popper", ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +} diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 4b4b55568..70331b7ef 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -35,19 +35,23 @@ const EditNodeModal = forwardRef( setData, nodeLength, children, + open, + onClose }: { data: NodeDataType; setData: (data: NodeDataType) => void; nodeLength: number; children: ReactNode; + open?: boolean; + onClose?: (close: boolean) => void; }, ref ) => { - const [modalOpen, setModalOpen] = useState(false); + + const [modalOpen, setModalOpen] = useState(open ?? false); const [myData, setMyData] = useState(data); const { setTabsState, tabId } = useContext(TabsContext); const { reactFlowInstance } = useContext(typesContext); - let disabled = reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? false; @@ -70,6 +74,7 @@ const EditNodeModal = forwardRef( useEffect(() => { setMyData(data); // reset data to what it is on node when opening modal + onClose(modalOpen); }, [modalOpen]); return ( diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 06d8ea06d..daf6b84a7 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -2,9 +2,15 @@ import { useContext, useState } from "react"; import { useReactFlow } from "reactflow"; import ShadTooltip from "../../../../components/ShadTooltipComponent"; import IconComponent from "../../../../components/genericIconComponent"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, +} from "../../../../components/ui/select-trigger"; import { TabsContext } from "../../../../contexts/tabsContext"; import EditNodeModal from "../../../../modals/EditNodeModal"; -import { classNames } from "../../../../utils/utils"; +import { classNames, getRandomKeyByssmm } from "../../../../utils/utils"; export default function NodeToolbarComponent({ data, setData, deleteNode }) { const [nodeLength, setNodeLength] = useState( @@ -25,6 +31,17 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }) { const { paste } = useContext(TabsContext); const reactFlowInstance = useReactFlow(); + const [showModalAdvanced, setShowModalAdvanced] = useState(false); + const [selectedValue, setSelectedValue] = useState(""); + + const handleSelectChange = (event) => { + setSelectedValue(event); + event.includes("advanced") + ? setShowModalAdvanced(true) + : setShowModalAdvanced(false); + console.log(showModalAdvanced); + }; + return ( <>
@@ -92,6 +109,54 @@ export default function NodeToolbarComponent({ data, setData, deleteNode }) { + + + {showModalAdvanced && ( + { + setShowModalAdvanced(modal); + }} + > + <> + + )} + + {/*
- + */}
From ad33deb1a3d48119c7313c2f15f2f9751f37663a Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 10 Aug 2023 12:55:04 -0300 Subject: [PATCH 2/7] =?UTF-8?q?=F0=9F=9A=80=20feat(select-custom.tsx):=20a?= =?UTF-8?q?dd=20custom=20select=20component=20for=20UI=20consistency=20and?= =?UTF-8?q?=20reusability=20=F0=9F=94=84=20refactor(nodeToolbarComponent/i?= =?UTF-8?q?ndex.tsx):=20update=20import=20path=20for=20select=20component?= =?UTF-8?q?=20to=20reflect=20new=20location?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/ui/{select-trigger.tsx => select-custom.tsx} | 0 .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename src/frontend/src/components/ui/{select-trigger.tsx => select-custom.tsx} (100%) diff --git a/src/frontend/src/components/ui/select-trigger.tsx b/src/frontend/src/components/ui/select-custom.tsx similarity index 100% rename from src/frontend/src/components/ui/select-trigger.tsx rename to src/frontend/src/components/ui/select-custom.tsx diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index daf6b84a7..8e24677ec 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -7,7 +7,7 @@ import { SelectContent, SelectItem, SelectTrigger, -} from "../../../../components/ui/select-trigger"; +} from "../../../../components/ui/select-custom"; import { TabsContext } from "../../../../contexts/tabsContext"; import EditNodeModal from "../../../../modals/EditNodeModal"; import { classNames, getRandomKeyByssmm } from "../../../../utils/utils"; From 2ea814fd646f69f66857f47c525126b8febfaeb7 Mon Sep 17 00:00:00 2001 From: Cristhian Zanforlin Lousa Date: Thu, 10 Aug 2023 15:02:15 -0300 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=90=9B=20fix(select-custom.tsx):=20ad?= =?UTF-8?q?d=20left=20padding=20to=20SelectItem=20component=20to=20align?= =?UTF-8?q?=20text=20properly=20=F0=9F=90=9B=20fix(nodeToolbarComponent/in?= =?UTF-8?q?dex.tsx):=20change=20"Advanced"=20text=20to=20"Edit"=20in=20Nod?= =?UTF-8?q?eToolbarComponent=20for=20better=20clarity?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/frontend/src/components/ui/select-custom.tsx | 2 +- .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/ui/select-custom.tsx b/src/frontend/src/components/ui/select-custom.tsx index 438f3d188..a3069a08e 100644 --- a/src/frontend/src/components/ui/select-custom.tsx +++ b/src/frontend/src/components/ui/select-custom.tsx @@ -80,7 +80,7 @@ const SelectItem = React.forwardRef< - +
(CONTROL_INPUT_STATE); - const [isDisabled, setDisableBtn] = useState(true) + const [isDisabled, setDisableBtn] = useState(true); const { password, cnfPassword, username } = inputState; const { setErrorData, setSuccessData } = useContext(alertContext); From 2c2197ecad0405db72c5937fd8e53b0f41cc791e Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Thu, 21 Sep 2023 19:06:30 -0300 Subject: [PATCH 5/7] Refactor: Make minimize button show up in the More button popup --- .../components/nodeToolbarComponent/index.tsx | 41 +++++++++---------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 5f291626d..fe49c70a9 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -54,12 +54,17 @@ export default function NodeToolbarComponent({ const handleSelectChange = (event) => { setSelectedValue(event); - event.includes("advanced") - ? setShowModalAdvanced(true) - : setShowModalAdvanced(false); - console.log(showModalAdvanced); + if (event.includes("advanced")) { + return setShowModalAdvanced(true); + } + setShowModalAdvanced(false); + if (event.includes("show")) { + setShowNode((prev) => !prev); + updateNodeInternals(data.id); + } }; + console.log(selectedValue); return ( <>
@@ -127,23 +132,6 @@ export default function NodeToolbarComponent({ - {canMinimize() && ( - - - - )} - From 7cead25c8bb4a729172f33913da57e805fd6ce59 Mon Sep 17 00:00:00 2001 From: igorrCarvalho Date: Thu, 21 Sep 2023 19:07:50 -0300 Subject: [PATCH 6/7] Remove console.log --- .../src/pages/FlowPage/components/nodeToolbarComponent/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index fe49c70a9..953b5d54f 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -64,7 +64,6 @@ export default function NodeToolbarComponent({ } }; - console.log(selectedValue); return ( <>
From 1796e349c24ee81610ba842ef53973ca511bdc79 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Thu, 21 Sep 2023 20:03:47 -0300 Subject: [PATCH 7/7] fix(nodeToolbarComponent): fix indentation and formatting issues in the code feat(nodeToolbarComponent): add support for minimal mode in the toolbar feat(nodeToolbarComponent): add functionality to show/hide advanced options in the toolbar --- .../components/nodeToolbarComponent/index.tsx | 96 +++++++++++-------- 1 file changed, 57 insertions(+), 39 deletions(-) diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index 953b5d54f..e1e3bd5c4 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -46,7 +46,7 @@ export default function NodeToolbarComponent({ if (countHandles > 1) return false; return true; } - + const isMinimal = canMinimize(); const { paste } = useContext(TabsContext); const reactFlowInstance = useReactFlow(); const [showModalAdvanced, setShowModalAdvanced] = useState(false); @@ -131,49 +131,67 @@ export default function NodeToolbarComponent({ - + + +
+
+ +
-
- - - - -
- {" "} - Edit{" "} -
{" "} - - {canMinimize() && ( - + + + +
- {showNode ? "Minimize" : "Expand"} -
+ />{" "} + Edit{" "} +
{" "} - )} - - + {isMinimal && ( + +
+ + {showNode ? "Minimize" : "Expand"} +
+ + )} + + + ) : ( + +
+ +
+ + )} {showModalAdvanced && (