From 47fcdaef419d31956e56ea38b5b1013cb633f08d Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 26 Jun 2023 18:29:27 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(GenericNode/index.tsx):=20?=
 =?UTF-8?q?refactor=20GenericNode=20component=20to=20use=20a=20more=20read?=
 =?UTF-8?q?able=20and=20maintainable=20code=20structure=20=E2=9C=A8=20feat?=
 =?UTF-8?q?(GenericNode/index.tsx):=20add=20documentation=20link=20to=20Ge?=
 =?UTF-8?q?nericNode=20component=20and=20display=20it=20as=20a=20tooltip?=
 =?UTF-8?q?=20when=20hovering=20over=20the=20info=20icon.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx     | 61 +++++++++++++------
 1 file changed, 42 insertions(+), 19 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index a84a88093..743339a48 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -14,7 +14,7 @@ import NodeModal from "../../modals/NodeModal";
 import Tooltip from "../../components/TooltipComponent";
 import { NodeToolbar } from "reactflow";
 import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
-import { Info } from "lucide-react";
+import { FileText, Info } from "lucide-react";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import { useSSE } from "../../contexts/SSEContext";
 
@@ -36,6 +36,7 @@ export default function GenericNode({
   const [validationStatus, setValidationStatus] = useState(null);
   // State for outline color
   const { sseData, isBuilding } = useSSE();
+  const refHtml = useRef(null);
 
   // useEffect(() => {
   //   if (reactFlowInstance) {
@@ -69,6 +70,22 @@ export default function GenericNode({
 
   useEffect(() => {}, [closePopUp, data.node.template]);
 
+  useEffect(() => {
+    refHtml.current = (
+      <div className="flex">
+        <span>{`${data.node.display_name} Documentation`}</span>
+        <span
+          className="self-center"
+          style={{
+            color: nodeColors[types[data.type]] ?? nodeColors.unknown,
+          }}
+        >
+          <FileText className="h-4 w-4 ml-2" />
+        </span>
+      </div>
+    );
+  }, []);
+
   return (
     <>
       <NodeToolbar>
@@ -93,7 +110,7 @@ export default function GenericNode({
                 color: nodeColors[types[data.type]] ?? nodeColors.unknown,
               }}
             />
-            <div className="ml-2 truncate">
+            <div className="ml-2 truncate flex">
               <ShadTooltip
                 delayDuration={1500}
                 content={data.node.display_name}
@@ -102,6 +119,29 @@ export default function GenericNode({
                   {data.node.display_name}
                 </div>
               </ShadTooltip>
+              <div className="">
+                {data.node.documentation !== "" && (
+                  <ShadTooltip
+                    open={true}
+                    delayDuration={1000}
+                    content={refHtml.current}
+                  >
+                    <a
+                      href={data.node.documentation}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      <Info
+                        style={{
+                          color:
+                            nodeColors[types[data.type]] ?? nodeColors.unknown,
+                        }}
+                        className="ml-2 self-center w-4 h-4"
+                      />
+                    </a>
+                  </ShadTooltip>
+                )}
+              </div>
             </div>
           </div>
           <div className="flex gap-3">
@@ -114,23 +154,6 @@ export default function GenericNode({
             ></button>
           </div>
           <div className="flex gap-3">
-            <div className=" px-5 pb-3 mr-5">
-              {data.node.documentation !== "" && (
-                <Tooltip
-                  title={
-                    <a
-                      href={data.node.documentation}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {`Open ${data.node.display_name} documentation`}
-                    </a>
-                  }
-                >
-                  <Info />
-                </Tooltip>
-              )}
-            </div>
             <div>
               <Tooltip
                 title={