From 827d3bd746364b9d2485a8bfc29e3a7b757072b4 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 19 Jun 2024 14:28:26 -0300
Subject: [PATCH] Fixed inactive node styling, changed it to status icon

---
 .../helpers/get-class-from-build-status.ts            |  5 -----
 .../src/CustomNodes/hooks/use-icons-status.tsx        | 11 ++++++++---
 src/frontend/src/constants/constants.ts               |  3 ++-
 src/frontend/src/utils/styleUtils.ts                  |  2 ++
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts b/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
index 710e91d15..d21d2eb17 100644
--- a/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
+++ b/src/frontend/src/CustomNodes/helpers/get-class-from-build-status.ts
@@ -7,11 +7,6 @@ export const getSpecificClassFromBuildStatus = (
   isDark: boolean,
 ) => {
   let isInvalid = validationStatus && !validationStatus.valid;
-
-  if (buildStatus === BuildStatus.INACTIVE) {
-    // INACTIVE should have its own class
-    return "inactive-status";
-  }
   if (
     (buildStatus === BuildStatus.BUILT && isInvalid) ||
     buildStatus === BuildStatus.ERROR
diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index bea5d3f1f..155592b78 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -1,3 +1,4 @@
+import ForwardedIconComponent from "../../components/genericIconComponent";
 import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
 import Xmark from "../../components/ui/xmark";
@@ -9,9 +10,8 @@ const useIconStatus = (
   validationStatus: VertexBuildTypeAPI | null,
 ) => {
   const conditionSuccess = validationStatus && validationStatus.valid;
-  const conditionError =
-    buildStatus === BuildStatus.ERROR ||
-    (validationStatus && !validationStatus.valid);
+  const conditionError = buildStatus === BuildStatus.ERROR;
+  const conditionInactive = buildStatus === BuildStatus.INACTIVE;
 
   const renderIconStatus = () => {
     if (buildStatus === BuildStatus.BUILDING) {
@@ -29,6 +29,11 @@ const useIconStatus = (
               isVisible={true}
               className="h-6 w-6 fill-current stroke-2 text-status-red"
             />
+          ) : conditionInactive ? (
+            <ForwardedIconComponent
+              name="CircleOff"
+              className="h-5 w-5 text-muted-foreground"
+            />
           ) : (
             <></>
           )}
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 27f79924d..7d95d7415 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -700,11 +700,12 @@ export const MY_COLLECTION_DESC =
   "Manage your personal projects. Download and upload entire collections.";
 export const STORE_DESC = "Explore community-shared flows and components.";
 export const STORE_TITLE = "Langflow Store";
-export const NO_API_KEY = "You don't have an API key. ";
+export const NO_API_KEY = "You don't have an API key.";
 export const INSERT_API_KEY = "Insert your Langflow API key.";
 export const INVALID_API_KEY = "Your API key is not valid. ";
 export const CREATE_API_KEY = `Don’t have an API key? Sign up at`;
 export const STATUS_BUILD = "Build to validate status.";
+export const STATUS_INACTIVE = "Execution blocked";
 export const STATUS_BUILDING = "Building...";
 export const SAVED_HOVER = "Last saved at ";
 export const RUN_TIMESTAMP_PREFIX = "Last Run: ";
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index f97a057d6..c47d40495 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -26,6 +26,7 @@ import {
   ChevronsUpDownIcon,
   Circle,
   CircleDot,
+  CircleOff,
   Clipboard,
   Code,
   Code2,
@@ -431,6 +432,7 @@ export const nodeIconsLucide: iconsType = {
   group_components: GradientUngroup,
   custom: Edit,
   Trash2,
+  CircleOff,
   Boxes,
   Network,
   XCircle,