Fixed inactive node styling, changed it to status icon

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

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"
+            />
           ) : (
             <></>
           )}

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: ";

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,