From 87af22d0592d87bf9e0f54e4c2f265df5a8fdc8f Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Tue, 27 Jun 2023 07:33:01 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(components):=20add=20in?=
 =?UTF-8?q?fo=20property=20to=20ParameterComponentType=20The=20ParameterCo?=
 =?UTF-8?q?mponent=20now=20has=20an=20info=20icon=20and=20tooltip=20to=20s?=
 =?UTF-8?q?how=20additional=20information=20about=20the=20parameter.=20The?=
 =?UTF-8?q?=20GenericNode=20component=20now=20passes=20the=20info=20prop?=
 =?UTF-8?q?=20to=20the=20ParameterComponent=20to=20show=20the=20additional?=
 =?UTF-8?q?=20information.=20The=20ParameterComponentType=20has=20been=20r?=
 =?UTF-8?q?efactored=20to=20include=20the=20info=20property.=20?=
 =?UTF-8?q?=F0=9F=8E=A8=20style(parameterComponent):=20add=20info=20icon?=
 =?UTF-8?q?=20and=20tooltip=20to=20show=20additional=20information=20?=
 =?UTF-8?q?=F0=9F=9A=80=20feat(GenericNode):=20pass=20info=20prop=20to=20P?=
 =?UTF-8?q?arameterComponent=20to=20show=20additional=20information?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   | 34 ++++++++++++++++++-
 .../src/CustomNodes/GenericNode/index.tsx     |  1 +
 src/frontend/src/types/components/index.ts    |  9 ++---
 3 files changed, 36 insertions(+), 8 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 4347b88ca..0701bfcd4 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -25,6 +25,7 @@ import { nodeColors } from "../../../../utils";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import ToggleShadComponent from "../../../../components/toggleShadComponent";
+import { Info } from "lucide-react";
 
 export default function ParameterComponent({
   left,
@@ -36,9 +37,11 @@ export default function ParameterComponent({
   type,
   name = "",
   required = false,
+  info = "",
 }: ParameterComponentType) {
   const ref = useRef(null);
   const refHtml = useRef(null);
+  const infoHtml = useRef(null);
   const updateNodeInternals = useUpdateNodeInternals();
   const [position, setPosition] = useState(0);
   const { closePopUp } = useContext(PopUpContext);
@@ -79,6 +82,18 @@ export default function ParameterComponent({
     });
   };
 
+  useEffect(() => {
+    infoHtml.current = (
+      <div className="h-full w-full break-words">
+        {info.split("\n").map((line, i) => (
+          <p key={i} className="block">
+            {line}
+          </p>
+        ))}
+      </div>
+    );
+  }, [info]);
+
   useEffect(() => {
     const groupedObj = groupByFamily(myData, tooltipTitle);
 
@@ -126,8 +141,25 @@ export default function ParameterComponent({
       className="w-full flex flex-wrap justify-between items-center bg-muted dark:bg-gray-800 dark:text-white mt-1 px-5 py-2"
     >
       <>
-        <div className={"text-sm truncate w-full " + (left ? "" : "text-end")}>
+        <div
+          className={
+            "text-sm truncate w-full" +
+            (left ? "" : " text-end") +
+            (info !== "" ? " flex items-center" : "")
+          }
+        >
           {title}
+          <div className="">
+            {info !== "" && (
+              <ShadTooltip
+                open={true}
+                delayDuration={500}
+                content={infoHtml.current}
+              >
+                <Info className="ml-2 relative bottom-0.5 w-3 h-3" />
+              </ShadTooltip>
+            )}
+          </div>
           <span className="text-red-600">{required ? " *" : ""}</span>
         </div>
         {left &&
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 743339a48..40a306ce6 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -244,6 +244,7 @@ export default function GenericNode({
                           ? toTitleCase(data.node.template[t].name)
                           : toTitleCase(t)
                       }
+                      info={data.node.template[t].info}
                       name={t}
                       tooltipTitle={data.node.template[t].type}
                       required={data.node.template[t].required}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 630526193..b1570ddda 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -1,10 +1,4 @@
-import {
-  ComponentType,
-  ForwardRefExoticComponent,
-  ReactElement,
-  ReactNode,
-  SVGProps,
-} from "react";
+import { ReactElement, ReactNode } from "react";
 import { NodeDataType } from "../flow/index";
 import { typesContextType } from "../typesContext";
 export type InputComponentType = {
@@ -41,6 +35,7 @@ export type ParameterComponentType = {
   name?: string;
   tooltipTitle: string;
   dataContext?: typesContextType;
+  info?: string;
 };
 export type InputListComponentType = {
   value: string[];