From 4193242ec68954768461345c9f5b61dd61d30feb Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Thu, 8 Feb 2024 09:33:37 -0300
Subject: [PATCH] open advanced modal on double click node

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx | 12 ++++++++++++
 .../components/nodeToolbarComponent/index.tsx      | 14 ++++++++++++++
 src/frontend/src/types/components/index.ts         |  2 ++
 3 files changed, 28 insertions(+)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e8a95fb1b..9858ac2b5 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -41,6 +41,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] =
     useState<validationStatusType | null>(null);
   const [handles, setHandles] = useState<number>(0);
+  const [openAdvancedModal, setOpenAdvancedModal] = useState<boolean>(false);
 
   const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot);
 
@@ -125,6 +126,12 @@ export default function GenericNode({
           }}
           numberOfHandles={handles}
           showNode={showNode}
+          openAdvancedModal={openAdvancedModal}
+          onCloseAdvancedModal={(open) => {
+            console.log(open);
+
+            setOpenAdvancedModal(false);
+          }}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -134,6 +141,11 @@ export default function GenericNode({
           showNode ? " w-96 rounded-lg" : " w-26 h-26 rounded-full",
           "generic-node-div"
         )}
+        onDoubleClick={() => {
+          console.log(openAdvancedModal);
+
+          setOpenAdvancedModal(true);
+        }}
       >
         {data.node?.beta && showNode && (
           <div className="beta-badge-wrapper">
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index e25544bdf..6a63a8064 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -32,6 +32,8 @@ export default function NodeToolbarComponent({
   setShowNode,
   numberOfHandles,
   showNode,
+  openAdvancedModal,
+  onCloseAdvancedModal,
 }: nodeToolbarPropsType): JSX.Element {
   const nodeLength = Object.keys(data.node!.template).filter(
     (templateField) =>
@@ -76,6 +78,18 @@ export default function NodeToolbarComponent({
     window.open(url, "_blank", "noreferrer");
   };
 
+  useEffect(() => {
+    if (openAdvancedModal) {
+      setShowModalAdvanced(true);
+    }
+  }, [openAdvancedModal]);
+
+  useEffect(() => {
+    if (!showModalAdvanced) {
+      onCloseAdvancedModal!(false);
+    }
+  }, [showModalAdvanced]);
+
   useEffect(() => {
     setFlowComponent(createFlowComponent(cloneDeep(data), version));
   }, [
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index d78ce867c..a717c36a3 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -479,6 +479,8 @@ export type nodeToolbarPropsType = {
   setShowNode: (boolean: any) => void;
   numberOfHandles: number;
   showNode: boolean;
+  openAdvancedModal?: boolean;
+  onCloseAdvancedModal?: (close: boolean) => void;
 };
 
 export type parsedDataType = {