From 28927ddc78530847c8e0bcf83b5472057f684ca0 Mon Sep 17 00:00:00 2001
From: cristhianzl <cristhian.lousa@gmail.com>
Date: Mon, 26 Feb 2024 14:15:47 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(GenericNode/index.tsx):=20fi?=
 =?UTF-8?q?x=20double=20click=20behavior=20on=20GenericNode=20title=20to?=
 =?UTF-8?q?=20correctly=20handle=20nameEditable=20state=20and=20takeSnapsh?=
 =?UTF-8?q?ot=20function=20=F0=9F=94=A7=20chore(GenericNode/index.tsx):=20?=
 =?UTF-8?q?refactor=20GenericNode=20title=20component=20to=20improve=20rea?=
 =?UTF-8?q?dability=20and=20maintainability=20=F0=9F=94=A7=20chore(Generic?=
 =?UTF-8?q?Node/index.tsx):=20refactor=20GenericNode=20build=20status=20to?=
 =?UTF-8?q?oltip=20to=20improve=20readability?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/CustomNodes/GenericNode/index.tsx     | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index e2bbbd57d..5368f2523 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -337,28 +337,37 @@ export default function GenericNode({
                     </div>
                   ) : (
                     <ShadTooltip content={data.node?.display_name}>
-                      <div
-                        className="flex items-center gap-2"
-                        onDoubleClick={(event) => {
-                          if (nameEditable) {
-                            setInputName(true);
-                          }
-                          takeSnapshot();
-                          event.stopPropagation();
-                          event.preventDefault();
-                        }}
-                      >
-                        <div
-                          data-testid={"title-" + data.node?.display_name}
-                          className="generic-node-tooltip-div text-primary"
-                        >
-                          {data.node?.display_name}
-                        </div>
+                      <div className="group flex items-center gap-2.5">
+                        <ShadTooltip content={data.node?.display_name}>
+                          <div
+                            onDoubleClick={(event) => {
+                              if (nameEditable) {
+                                setInputName(true);
+                              }
+                              takeSnapshot();
+                              event.stopPropagation();
+                              event.preventDefault();
+                            }}
+                            data-testid={"title-" + data.node?.display_name}
+                            className="generic-node-tooltip-div text-primary"
+                          >
+                            {data.node?.display_name}
+                          </div>
+                        </ShadTooltip>
                         {nameEditable && (
-                          <IconComponent
-                            name="Pencil"
-                            className="h-4 w-4 text-ring"
-                          />
+                          <div
+                            onClick={(event) => {
+                              setInputName(true);
+                              takeSnapshot();
+                              event.stopPropagation();
+                              event.preventDefault();
+                            }}
+                          >
+                            <IconComponent
+                              name="Pencil"
+                              className="hidden h-4 w-4 animate-pulse text-status-blue group-hover:block"
+                            />
+                          </div>
                         )}
                       </div>
                     </ShadTooltip>
@@ -465,11 +474,7 @@ export default function GenericNode({
                 }}
               >
                 <div>
-                  <Tooltip
-                    title={
-                      "Build"
-                    }
-                  >
+                  <Tooltip title={"Build"}>
                     <div className="generic-node-status-position flex items-center justify-center">
                       {renderIconPlayOrPauseComponents(
                         data?.buildStatus,