From 18551077b014da1a0cac25b7cc11cb4918566660 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Fri, 7 Jun 2024 12:14:18 -0300
Subject: [PATCH] Added triangle

---
 .../src/CustomNodes/GenericNode/index.tsx     | 94 ++++++++++---------
 src/frontend/src/utils/styleUtils.ts          |  2 +
 2 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 63b84a847..624189f11 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -437,54 +437,64 @@ export default function GenericNode({
             </div>
             {showNode && (
               <>
-                <ShadTooltip
-                  content={
-                    buildStatus === BuildStatus.BUILDING ? (
-                      <span> {STATUS_BUILDING} </span>
-                    ) : !validationStatus ? (
-                      <span className="flex">{STATUS_BUILD}</span>
-                    ) : (
-                      <div className="max-h-100 p-2">
-                        <div>
-                          {lastRunTime && (
-                            <div className="justify-left flex font-normal text-muted-foreground">
-                              <div>{RUN_TIMESTAMP_PREFIX}</div>
-                              <div className="ml-1 text-status-blue">
-                                {lastRunTime}
+                <div className="flex flex-shrink-0 items-center gap-1">
+                  {isOutdated && (
+                    <Button variant="secondary" className={"h-9 px-1.5"}>
+                      <IconComponent
+                        name="AlertTriangle"
+                        className="h-5 w-5 text-status-yellow"
+                      />
+                    </Button>
+                  )}
+                  <ShadTooltip
+                    content={
+                      buildStatus === BuildStatus.BUILDING ? (
+                        <span> {STATUS_BUILDING} </span>
+                      ) : !validationStatus ? (
+                        <span className="flex">{STATUS_BUILD}</span>
+                      ) : (
+                        <div className="max-h-100 p-2">
+                          <div>
+                            {lastRunTime && (
+                              <div className="justify-left flex font-normal text-muted-foreground">
+                                <div>{RUN_TIMESTAMP_PREFIX}</div>
+                                <div className="ml-1 text-status-blue">
+                                  {lastRunTime}
+                                </div>
                               </div>
+                            )}
+                          </div>
+                          <div className="justify-left flex font-normal text-muted-foreground">
+                            <div>Duration:</div>
+                            <div className="ml-1 text-status-blue">
+                              {validationStatus?.data.duration}
                             </div>
-                          )}
-                        </div>
-                        <div className="justify-left flex font-normal text-muted-foreground">
-                          <div>Duration:</div>
-                          <div className="ml-1 text-status-blue">
-                            {validationStatus?.data.duration}
                           </div>
                         </div>
-                      </div>
-                    )
-                  }
-                  side="bottom"
-                >
-                  <Button
-                    onClick={() => {
-                      if (buildStatus === BuildStatus.BUILDING || isBuilding)
-                        return;
-                      setValidationStatus(null);
-                      buildFlow({ stopNodeId: data.id });
-                    }}
-                    variant="secondary"
-                    className={"group h-9 px-1.5"}
+                      )
+                    }
+                    side="bottom"
                   >
-                    <div
-                      data-testid={
-                        `button_run_` + data?.node?.display_name.toLowerCase()
-                      }
+                    <Button
+                      onClick={() => {
+                        if (buildStatus === BuildStatus.BUILDING || isBuilding)
+                          return;
+                        setValidationStatus(null);
+                        buildFlow({ stopNodeId: data.id });
+                      }}
+                      variant="secondary"
+                      className={"group h-9 px-1.5"}
                     >
-                      {renderIconStatus()}
-                    </div>
-                  </Button>
-                </ShadTooltip>
+                      <div
+                        data-testid={
+                          `button_run_` + data?.node?.display_name.toLowerCase()
+                        }
+                      >
+                        {renderIconStatus()}
+                      </div>
+                    </Button>
+                  </ShadTooltip>
+                </div>
               </>
             )}
           </div>
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index ece2e6539..28d0f9d7d 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -115,6 +115,7 @@ import {
   Settings,
   Settings2,
   Share,
+  AlertTriangle,
   Share2,
   Shield,
   Sliders,
@@ -431,6 +432,7 @@ export const nodeIconsLucide: iconsType = {
   SunIcon,
   MoonIcon,
   Bell,
+  AlertTriangle,
   ChevronLeft,
   SlidersHorizontal,
   Palette,