From 2c594894e04d886602abcbecc003c1c167044633 Mon Sep 17 00:00:00 2001
From: anovazzi1 <otavio2204@gmail.com>
Date: Fri, 6 Oct 2023 17:38:07 -0300
Subject: [PATCH] fix(ui/tooltip.tsx): add z-index to tooltip content to ensure
 it appears above other elements feat(modals/EditNodeModal/index.tsx): add
 ShadTooltip component to display tooltip content for template parameters

---
 src/frontend/src/components/ui/tooltip.tsx    |  2 +-
 .../src/modals/EditNodeModal/index.tsx        | 40 ++++++++++++++-----
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/ui/tooltip.tsx b/src/frontend/src/components/ui/tooltip.tsx
index 8ea9a9505..d1f2c8c77 100644
--- a/src/frontend/src/components/ui/tooltip.tsx
+++ b/src/frontend/src/components/ui/tooltip.tsx
@@ -19,7 +19,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
+        "z-50 overflow-y-auto rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
         className
       )}
       {...props}
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index c4536a2b9..2e8b70bb4 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -7,6 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
+import ShadTooltip from "../../components/ShadTooltipComponent";
 import CodeAreaComponent from "../../components/codeAreaComponent";
 import DictComponent from "../../components/dictComponent";
 import Dropdown from "../../components/dropdownComponent";
@@ -166,12 +167,27 @@ const EditNodeModal = forwardRef(
                         .map((templateParam, index) => (
                           <TableRow key={index} className="h-10">
                             <TableCell className="truncate p-0 text-center text-sm text-foreground sm:px-3">
-                              {myData.current.node?.template[templateParam]
-                                .display_name
-                                ? myData.current.node.template[templateParam]
+                              <ShadTooltip
+                                content={
+                                  myData.current.node?.template[templateParam]
+                                    .proxy
+                                    ? myData.current.node?.template[
+                                        templateParam
+                                      ].proxy?.field
+                                    : "null"
+                                }
+                              >
+                                <span>
+                                  {myData.current.node?.template[templateParam]
                                     .display_name
-                                : myData.current.node?.template[templateParam]
-                                    .name}
+                                    ? myData.current.node.template[
+                                        templateParam
+                                      ].display_name
+                                    : myData.current.node?.template[
+                                        templateParam
+                                      ].name}
+                                </span>
+                              </ShadTooltip>
                             </TableCell>
                             <TableCell className="w-[300px] p-0 text-center text-xs text-foreground ">
                               {myData.current.node?.template[templateParam]
@@ -418,9 +434,10 @@ const EditNodeModal = forwardRef(
                                 <div className="mx-auto">
                                   <PromptAreaComponent
                                     readonly={
-                                      myData.node?.flow &&
-                                      myData.node.template[templateParam]
-                                        .dynamic
+                                      myData.current.node?.flow &&
+                                      myData.current.node.template[
+                                        templateParam
+                                      ].dynamic
                                         ? true
                                         : false
                                     }
@@ -446,9 +463,10 @@ const EditNodeModal = forwardRef(
                                 <div className="mx-auto">
                                   <CodeAreaComponent
                                     readonly={
-                                      myData.node?.flow &&
-                                      myData.node.template[templateParam]
-                                        .dynamic
+                                      myData.current.node?.flow &&
+                                      myData.current.node.template[
+                                        templateParam
+                                      ].dynamic
                                         ? true
                                         : false
                                     }