From 599e45af9fa692397f5686cae28f19e8dde2c8ce Mon Sep 17 00:00:00 2001 From: cristhianzl Date: Tue, 28 May 2024 12:16:16 -0300 Subject: [PATCH] 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 --- .../customNodes/hooks/use-icons-status.tsx | 54 +++++++++++++++++++ .../hooks/use-update-node-code.tsx | 38 +++++++++++++ .../hooks/use-update-validation-status.tsx | 18 +++++++ .../hooks/use-validation-status-string.tsx | 22 ++++++++ 4 files changed, 132 insertions(+) create mode 100644 src/frontend/src/customNodes/hooks/use-icons-status.tsx create mode 100644 src/frontend/src/customNodes/hooks/use-update-node-code.tsx create mode 100644 src/frontend/src/customNodes/hooks/use-update-validation-status.tsx create mode 100644 src/frontend/src/customNodes/hooks/use-validation-status-string.tsx diff --git a/src/frontend/src/customNodes/hooks/use-icons-status.tsx b/src/frontend/src/customNodes/hooks/use-icons-status.tsx new file mode 100644 index 000000000..ec378fac2 --- /dev/null +++ b/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 ; + } else { + return ( + <> + + {validationStatus && validationStatus.valid ? ( + + ) : validationStatus && + !validationStatus.valid && + buildStatus === BuildStatus.INACTIVE ? ( + + ) : buildStatus === BuildStatus.ERROR || + (validationStatus && !validationStatus.valid) ? ( + + ) : ( + + )} + + ); + } + }; + + return renderIconStatus(); +}; + +export default useIconStatus; diff --git a/src/frontend/src/customNodes/hooks/use-update-node-code.tsx b/src/frontend/src/customNodes/hooks/use-update-node-code.tsx new file mode 100644 index 000000000..28220d141 --- /dev/null +++ b/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; diff --git a/src/frontend/src/customNodes/hooks/use-update-validation-status.tsx b/src/frontend/src/customNodes/hooks/use-update-validation-status.tsx new file mode 100644 index 000000000..2a7153dfb --- /dev/null +++ b/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; diff --git a/src/frontend/src/customNodes/hooks/use-validation-status-string.tsx b/src/frontend/src/customNodes/hooks/use-validation-status-string.tsx new file mode 100644 index 000000000..9447bb643 --- /dev/null +++ b/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;