From a56cccd91f1d63d685400b7564c8cc90a163000a Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 16 Jan 2025 10:18:43 -0300
Subject: [PATCH] refactor: add tooltips to UI global variables components
 (#5648)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (GlobalVariableModal.tsx): adjust popover width from "520px" to "29rem" for better UI responsiveness
📝 (index.tsx): import ShadTooltip component and update CommandItemContent to use it for better user experience
📝 (index.tsx): update popover width from "315px" to "17.5rem" for consistency and improved design aesthetics

* 🔧 (index.tsx): add side prop to ShadTooltip component to position the tooltip on the left side of the content.

* ✨ (index.tsx): Add support for custom node styles in CommandItemContent component to allow for more flexible styling options
🔧 (index.tsx): Pass nodeStyle prop to CommandItemContent component to customize node styles based on the provided value
---
 .../GlobalVariableModal.tsx                   |  2 +-
 .../components/popover/index.tsx              | 36 +++++++++++++------
 .../components/inputGlobalComponent/index.tsx |  2 +-
 3 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx
index 42707ba0bd..f1da516316 100644
--- a/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx
+++ b/src/frontend/src/components/core/GlobalVariableModal/GlobalVariableModal.tsx
@@ -203,7 +203,7 @@ export default function GlobalVariableModal({
               password={false}
               placeholder="Choose a field for the variable..."
               id="apply-to-fields"
-              popoverWidth="520px"
+              popoverWidth="29rem"
               optionsPlaceholder="Fields"
             />
             <div className="text-xs text-muted-foreground">
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
index b59f8a10d3..4f9916bcad 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputComponent/components/popover/index.tsx
@@ -1,4 +1,5 @@
 import ForwardedIconComponent from "@/components/common/genericIconComponent";
+import ShadTooltip from "@/components/common/shadTooltipComponent";
 import { Badge } from "@/components/ui/badge";
 import {
   Command,
@@ -69,15 +70,21 @@ const CommandItemContent = ({
   option,
   isSelected,
   optionButton,
+  nodeStyle,
 }: {
   option: string;
   isSelected: boolean;
   optionButton: (option: string) => ReactNode;
+  nodeStyle?: string;
 }) => (
   <div className="group flex w-full items-center justify-between">
     <div className="flex items-center justify-between">
       <SelectionIndicator isSelected={isSelected} />
-      <span className="max-w-52 truncate pr-2">{option}</span>
+      <ShadTooltip content={option} side="left">
+        <div className={cn("truncate pr-2", nodeStyle ? "max-w-52" : "w-full")}>
+          <span>{option}</span>
+        </div>
+      </ShadTooltip>
     </div>
     {optionButton && optionButton(option)}
   </div>
@@ -170,6 +177,8 @@ const CustomInputPopover = ({
   const [isFocused, setIsFocused] = useState(false);
   const memoizedOptions = useMemo(() => new Set<string>(options), [options]);
 
+  console.log(nodeStyle);
+
   const PopoverContentInput = editNode
     ? PopoverContent
     : PopoverContentWithoutPortal;
@@ -222,15 +231,21 @@ const CustomInputPopover = ({
               ))}
             </div>
           ) : selectedOption?.length > 0 ? (
-            <OptionBadge
-              option={selectedOption}
-              onRemove={(e) => handleRemoveOption(selectedOption, e)}
-              variant={nodeStyle ? "emerald" : "secondary"}
-              className={cn(
-                editNode && "text-xs",
-                nodeStyle ? "rounded-[3px] px-1 font-mono" : "bg-muted",
-              )}
-            />
+            <ShadTooltip content={selectedOption} side="left">
+              <div>
+                <OptionBadge
+                  option={selectedOption}
+                  onRemove={(e) => handleRemoveOption(selectedOption, e)}
+                  variant={nodeStyle ? "emerald" : "secondary"}
+                  className={cn(
+                    editNode && "text-xs",
+                    nodeStyle
+                      ? "max-w-60 rounded-[3px] px-1 font-mono"
+                      : "bg-muted",
+                  )}
+                />
+              </div>
+            </ShadTooltip>
           ) : null}
 
           {!selectedOption?.length && !selectedOptions?.length && (
@@ -304,6 +319,7 @@ const CustomInputPopover = ({
                       selectedOptions?.includes(option)
                     }
                     optionButton={optionButton}
+                    nodeStyle={nodeStyle}
                   />
                 </CommandItem>
               ))}
diff --git a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
index 23fba882da..5b44341077 100644
--- a/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
+++ b/src/frontend/src/components/core/parameterRenderComponent/components/inputGlobalComponent/index.tsx
@@ -90,7 +90,7 @@ export default function InputGlobalComponent({
   return (
     <InputComponent
       nodeStyle
-      popoverWidth="315px"
+      popoverWidth="17.5rem"
       placeholder={getPlaceholder(disabled, placeholder)}
       id={id}
       editNode={editNode}