From 42f8c4b20fd96fdb3a7bf7fcae61bfbe560417d8 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Thu, 28 Nov 2024 09:06:23 -0300
Subject: [PATCH] fix: update minimized component outdated design (#4896)

* Fix nodeStatus to show only when showNode is true

* Removed unused classes and made update not appear wrong on minimized components
---
 .../components/NodeStatus/index.tsx           |  4 +-
 .../src/CustomNodes/GenericNode/index.tsx     | 37 +++++++++----------
 2 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index bdd1ec358..4b411192c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -190,7 +190,7 @@ export default function NodeStatus({
     return "Run component";
   };
 
-  return (
+  return showNode ? (
     <>
       <div className="flex flex-shrink-0 items-center">
         <div className="flex items-center gap-2 self-center">
@@ -284,5 +284,7 @@ export default function NodeStatus({
         </ShadTooltip>
       </div>
     </>
+  ) : (
+    <></>
   );
 }
diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index b14d25fce..e6a8ad6a8 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -341,10 +341,8 @@ export default function GenericNode({
       <div
         className={cn(
           borderColor,
-          showNode
-            ? "w-80 rounded-xl shadow-sm hover:shadow-md"
-            : `h-[4.065rem] w-48 rounded-[0.75rem] ${!selected ? "border-[1px] border-border ring-[0.5px] ring-border" : ""}`,
-          "generic-node-div group/node relative",
+          showNode ? "w-80" : `w-48`,
+          "generic-node-div group/node relative rounded-xl shadow-sm hover:shadow-md",
           !hasOutputs && "pb-4",
         )}
       >
@@ -357,8 +355,9 @@ export default function GenericNode({
               className="h-[18px] w-[18px] shrink-0"
             />
             <span className="flex-1 truncate text-sm font-medium">
-              Update Ready
+              {showNode && "Update Ready"}
             </span>
+
             <Button
               variant="warning"
               size="iconMd"
@@ -424,21 +423,19 @@ export default function GenericNode({
                 </>
               )}
             </div>
-            {showNode && (
-              <NodeStatus
-                data={data}
-                frozen={data.node?.frozen}
-                showNode={showNode}
-                display_name={data.node?.display_name!}
-                nodeId={data.id}
-                selected={selected}
-                setBorderColor={setBorderColor}
-                buildStatus={buildStatus}
-                isOutdated={isOutdated}
-                isUserEdited={isUserEdited}
-                getValidationStatus={getValidationStatus}
-              />
-            )}
+            <NodeStatus
+              data={data}
+              frozen={data.node?.frozen}
+              showNode={showNode}
+              display_name={data.node?.display_name!}
+              nodeId={data.id}
+              selected={selected}
+              setBorderColor={setBorderColor}
+              buildStatus={buildStatus}
+              isOutdated={isOutdated}
+              isUserEdited={isUserEdited}
+              getValidationStatus={getValidationStatus}
+            />
           </div>
           {showNode && (
             <div>