From 51586f3a51404cdea39532c167a643f30ce68f25 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 5 Jun 2024 14:49:25 -0300
Subject: [PATCH] Added tooltip to info

---
 .../src/components/shadTooltipComponent/index.tsx  |  2 +-
 .../src/components/tableTooltipRender/index.tsx    |  9 +++++++++
 src/frontend/src/modals/editNodeModal/index.tsx    | 14 +++++++++++---
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 src/frontend/src/components/tableTooltipRender/index.tsx

diff --git a/src/frontend/src/components/shadTooltipComponent/index.tsx b/src/frontend/src/components/shadTooltipComponent/index.tsx
index 6bfad61ee..51254cf68 100644
--- a/src/frontend/src/components/shadTooltipComponent/index.tsx
+++ b/src/frontend/src/components/shadTooltipComponent/index.tsx
@@ -11,7 +11,7 @@ export default function ShadTooltip({
   delayDuration = 500,
 }: ShadToolTipType): JSX.Element {
   return (
-    <Tooltip delayDuration={delayDuration}>
+    <Tooltip defaultOpen={!children} delayDuration={delayDuration}>
       <TooltipTrigger asChild={asChild}>{children}</TooltipTrigger>
       <TooltipContent
         className={cn(styleClasses, "max-w-96")}
diff --git a/src/frontend/src/components/tableTooltipRender/index.tsx b/src/frontend/src/components/tableTooltipRender/index.tsx
new file mode 100644
index 000000000..d1644d623
--- /dev/null
+++ b/src/frontend/src/components/tableTooltipRender/index.tsx
@@ -0,0 +1,9 @@
+import { CustomTooltipProps } from "ag-grid-react";
+
+export default function TableTooltipRender({ value }: CustomTooltipProps) {
+  return (
+    <div className="z-45 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">
+      {value}
+    </div>
+  );
+}
diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx
index b250e62eb..548dfebb3 100644
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/src/frontend/src/modals/editNodeModal/index.tsx
@@ -14,7 +14,8 @@ import TableComponent from "../../components/tableComponent";
 import TableAutoCellRender from "../../components/tableAutoCellRender";
 import { TemplateVariableType } from "../../types/api";
 import TableNodeCellRender from "../../components/tableNodeCellRender";
-import { ValueGetterParams } from "ag-grid-community";
+import { ColDef, ValueGetterParams } from "ag-grid-community";
+import TableTooltipRender from "../../components/tableTooltipRender";
 
 const EditNodeModal = forwardRef(
   (
@@ -79,7 +80,7 @@ const EditNodeModal = forwardRef(
         };
       });
 
-    const columnDefs = [
+    const columnDefs: ColDef[] = [
       {
         headerName: "Name",
         field: "display_name",
@@ -98,6 +99,8 @@ const EditNodeModal = forwardRef(
       {
         headerName: "Description",
         field: "info",
+        tooltipField: "info",
+        tooltipComponent: TableTooltipRender,
         cellRenderer: TableAutoCellRender,
         autoHeight: true,
         flex: 2,
@@ -180,7 +183,12 @@ const EditNodeModal = forwardRef(
             {nodeLength > 0 && (
               <div className="edit-node-modal-table">
                 <div className="h-96">
-                  <TableComponent columnDefs={columnDefs} rowData={rowData} />
+                  <TableComponent
+                    tooltipShowMode="whenTruncated"
+                    tooltipShowDelay={0.5}
+                    columnDefs={columnDefs}
+                    rowData={rowData}
+                  />
                 </div>
               </div>
             )}