From 13f2881f00e1a78db9eb177586b29f39bd9e6b3b Mon Sep 17 00:00:00 2001
From: Gabriel Luiz Freitas Almeida <gabriel@logspace.ai>
Date: Mon, 25 Mar 2024 15:44:32 -0300
Subject: [PATCH] Add ping animation to update button

---
 .../FlowPage/components/nodeToolbarComponent/index.tsx |  1 +
 .../nodeToolbarComponent/toolbarSelectItem/index.tsx   | 10 +++++++---
 src/frontend/src/types/components/index.ts             |  1 +
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 92a3a7395..5dc1739a3 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -477,6 +477,7 @@ export default function NodeToolbarComponent({
                     value={"Update"}
                     icon={"Code"}
                     dataTestId="update-button-modal"
+                    ping={isOutdated}
                   />
                 </SelectItem>
               )}
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
index 5b16b3389..88e74623a 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -9,14 +9,18 @@ export default function ToolbarSelectItem({
   icon,
   styleObj,
   dataTestId,
+  ping,
 }: toolbarSelectItemProps) {
   return (
     <div className="flex" data-testid={dataTestId}>
       <ForwardedIconComponent
         name={icon}
-        className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses}`}
-      />{" "}
-      <span className={styleObj?.valueClasses}>{value}</span>{" "}
+        className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses} ${
+          ping && "animate-pulse text-green-500"
+        }`}
+      />
+      <span className={styleObj?.valueClasses}>{value}</span>
+
       {isMac ? (
         <ForwardedIconComponent
           name="Command"
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 4bdf56b32..f14a8bb9e 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -707,4 +707,5 @@ export type toolbarSelectItemProps = {
     valueClasses?: string;
   };
   dataTestId: string;
+  ping?: boolean;
 };