From f612f47455072488b0336a229e420e0ffa97f21b Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Mon, 18 Sep 2023 15:12:31 -0300
Subject: [PATCH] Refactor: Change expand icon when node are minimized

---
 src/frontend/src/CustomNodes/GenericNode/index.tsx           | 3 ++-
 .../pages/FlowPage/components/nodeToolbarComponent/index.tsx | 5 +++--
 src/frontend/src/types/components/index.ts                   | 1 +
 src/frontend/src/utils/styleUtils.ts                         | 4 +++-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 879b68ca3..3d5c696e3 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -109,6 +109,7 @@ export default function GenericNode({
           deleteNode={deleteNode}
           setShowNode={setShowNode}
           numberOfHandles={handles}
+          showNode={showNode}
         ></NodeToolbarComponent>
       </NodeToolbar>
 
@@ -116,7 +117,7 @@ export default function GenericNode({
         className={classNames(
           selected ? "border border-ring" : "border",
           " transition-all ",
-          showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-50",
+          showNode ? " w-96 duration-500 ease-in-out scale-100" : "transform-width w-26 h-26 rounded-full scale-75",
           "generic-node-div",
         )}
       >
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 5b078c8ca..74abbc3e1 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -13,6 +13,7 @@ export default function NodeToolbarComponent({
   deleteNode,
   setShowNode,
   numberOfHandles,
+  showNode,
 }: nodeToolbarPropsType): JSX.Element {
   const [nodeLength, setNodeLength] = useState(
     Object.keys(data.node!.template).filter(
@@ -130,14 +131,14 @@ export default function NodeToolbarComponent({
           </ShadTooltip>
 
           {canMinimize() && (
-            <ShadTooltip content={"Minimize"} side="top">
+            <ShadTooltip content={showNode ? "Minimize" : "Expand"} side="top">
               <button
                 className="relative inline-flex items-center rounded-r-md bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10"
                 onClick={(event) => {
                   setShowNode(prev => !prev);
                 }}
               >
-                <IconComponent name="Minus" className="h-4 w-4" />
+                <IconComponent name={showNode ? "Minus" : "Square"} className="h-4 w-4" />
               </button>
             </ShadTooltip>
           )}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index fa03b163c..d88960488 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -401,6 +401,7 @@ export type nodeToolbarPropsType = {
   setData: (newState: NodeDataType) => void;
   setShowNode: (boolean: any) => void;
   numberOfHandles: boolean[] | [];
+  showNode: boolean;
 };
 
 export type parsedDataType = {
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 7f0461410..cb7086c5d 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -78,7 +78,8 @@ import {
   X,
   XCircle,
   Zap,
-  Minus
+  Minus,
+  Square,
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";
@@ -310,4 +311,5 @@ export const nodeIconsLucide: iconsType = {
   Unplug,
   ChevronUp,
   Minus,
+  Square,
 };