feat: Add useIconStatus hook for rendering icon status

This commit adds a new hook called useIconStatus to the customNodes/hooks directory. The useIconStatus hook is responsible for rendering the appropriate icon status based on the build status and validation status. It returns the rendered icon status component. This hook improves the code organization and reusability of the icon status logic.

Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>

src/frontend/src/customNodes/hooks/use-icons-status.tsx

@@ -0,0 +1,54 @@
+import IconComponent from "../../components/genericIconComponent";
+import Checkmark from "../../components/ui/checkmark";
+import Loading from "../../components/ui/loading";
+import Xmark from "../../components/ui/xmark";
+import { BuildStatus } from "../../constants/enums";
+import { VertexBuildTypeAPI } from "../../types/api";
+
+const useIconStatus = (
+  buildStatus: BuildStatus | undefined,
+  validationStatus: VertexBuildTypeAPI | null,
+) => {
+  const renderIconStatus = () => {
+    if (buildStatus === BuildStatus.BUILDING) {
+      return <Loading className="text-medium-indigo" />;
+    } else {
+      return (
+        <>
+          <IconComponent
+            name="Play"
+            className="absolute ml-0.5 h-5 fill-current stroke-2 text-medium-indigo opacity-0 transition-all group-hover:opacity-100"
+          />
+          {validationStatus && validationStatus.valid ? (
+            <Checkmark
+              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover:opacity-0"
+              isVisible={true}
+            />
+          ) : validationStatus &&
+            !validationStatus.valid &&
+            buildStatus === BuildStatus.INACTIVE ? (
+            <IconComponent
+              name="Play"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-green opacity-30 transition-all group-hover:opacity-0"
+            />
+          ) : buildStatus === BuildStatus.ERROR ||
+            (validationStatus && !validationStatus.valid) ? (
+            <Xmark
+              isVisible={true}
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover:opacity-0"
+            />
+          ) : (
+            <IconComponent
+              name="Play"
+              className="absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground opacity-100 transition-all group-hover:opacity-0"
+            />
+          )}
+        </>
+      );
+    }
+  };
+
+  return renderIconStatus();
+};
+
+export default useIconStatus;

src/frontend/src/customNodes/hooks/use-update-node-code.tsx

@@ -0,0 +1,38 @@
+import { cloneDeep } from "lodash"; // or any other deep cloning library you prefer
+import { useCallback } from "react";
+import { APIClassType } from "../../types/api";
+
+const useUpdateNodeCode = (
+  dataId: string,
+  dataNode: APIClassType, // Define YourNodeType according to your data structure
+  setNode: (id: string, callback: (oldNode) => any) => void,
+  setIsOutdated: (value: boolean) => void,
+  updateNodeInternals: (id: string) => void,
+) => {
+  const updateNodeCode = useCallback(
+    (newNodeClass: APIClassType, code: string, name: string) => {
+      setNode(dataId, (oldNode) => {
+        let newNode = cloneDeep(oldNode);
+
+        newNode.data = {
+          ...newNode.data,
+          node: newNodeClass,
+          description: newNodeClass.description ?? dataNode.description,
+          display_name: newNodeClass.display_name ?? dataNode.display_name,
+        };
+
+        newNode.data.node.template[name].value = code;
+        setIsOutdated(false);
+
+        return newNode;
+      });
+
+      updateNodeInternals(dataId);
+    },
+    [dataId, dataNode, setNode, setIsOutdated, updateNodeInternals],
+  );
+
+  return updateNodeCode;
+};
+
+export default useUpdateNodeCode;

src/frontend/src/customNodes/hooks/use-update-validation-status.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+const useUpdateValidationStatus = (dataId, flowPool, setValidationStatus) => {
+  useEffect(() => {
+    const relevantData =
+      flowPool[dataId] && flowPool[dataId]?.length > 0
+        ? flowPool[dataId][flowPool[dataId].length - 1]
+        : null;
+    if (relevantData) {
+      // Extract validation information from relevantData and update the validationStatus state
+      setValidationStatus(relevantData);
+    } else {
+      setValidationStatus(null);
+    }
+  }, [flowPool[dataId], dataId, setValidationStatus]);
+};
+
+export default useUpdateValidationStatus;

src/frontend/src/customNodes/hooks/use-validation-status-string.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "react";
+
+const useValidationStatusString = (validationStatus, setValidationString) => {
+  useEffect(() => {
+    if (validationStatus?.data.logs) {
+      // if it is not a string turn it into a string
+      let newValidationString = "";
+      if (Array.isArray(validationStatus.data.logs)) {
+        newValidationString = validationStatus.data.logs
+          .map((log) => log.message)
+          .join("\n");
+      }
+      if (typeof newValidationString !== "string") {
+        newValidationString = JSON.stringify(validationStatus.data.logs);
+      }
+
+      setValidationString(newValidationString);
+    }
+  }, [validationStatus, validationStatus?.data.logs, setValidationString]);
+};
+
+export default useValidationStatusString;