Merge pull request #276 from code0-tech/feat/#274

Better error display on nodes

Author: nicosammito

src/packages/ce/src/datatype/components/inputs/DataTypeInputComponent.tsx

@@ -34,7 +34,7 @@ export const DataTypeInputComponent: React.FC<DataTypeInputComponentProps> = (pr
     const suggestions = "schema" in (schema ?? {}) ? (schema as NodeSchema)?.schema?.suggestions as (NodeFunction | ReferenceValue | LiteralValue)[] : []
     const inputName = "schema" in (schema ?? {}) ? (schema as NodeSchema)?.schema?.input : (schema as Schema)?.input
 
-    if ("schema" in (schema ?? {}) && ((schema as NodeSchema).blockedBy?.length ?? 0) > 0) {
+    if ("schema" in (schema ?? {}) && (((schema as NodeSchema).blockedBy?.length ?? 0) > 0) && (rest.formValidation?.valid ?? false)) {
         return null
     }
 

src/packages/ce/src/datatype/components/inputs/generic/DataTypeGenericInputComponent.tsx

@@ -1,7 +1,7 @@
 import {DataTypeInputComponentProps} from "@edition/datatype/components/inputs/DataTypeInputComponent";
 import React from "react";
 import {ButtonGroup} from "@code0-tech/pictor/dist/components/button-group/ButtonGroup";
-import {Button, InputDescription, InputLabel} from "@code0-tech/pictor";
+import {Button, InputDescription, InputLabel, InputMessage} from "@code0-tech/pictor";
 import {useDebouncedCallback} from "use-debounce";
 import {LiteralValue, NodeFunction, ReferenceValue} from "@code0-tech/sagittarius-graphql-types";
 
@@ -70,6 +70,9 @@ export const DataTypeGenericInputComponent: React.FC<DataTypeGenericInputCompone
                 Data Value
             </Button>
         </ButtonGroup>
+        {!formValidation?.valid && formValidation?.notValidMessage && (
+            <InputMessage>{formValidation.notValidMessage}</InputMessage>
+        )}
     </>
 
 }

src/packages/ce/src/function/components/nodes/FunctionNodeDefaultComponent.tsx

@@ -4,7 +4,7 @@ import "./FunctionNodeComponent.style.scss";
 import {FunctionNodeComponentProps} from "./FunctionNodeComponent";
 import {Badge, Button, ButtonGroup, Card, Flex, Text, useService, useStore as usePictorStore} from "@code0-tech/pictor";
 import {useFlowValidation} from "@edition/flow/hooks/Flow.validation.hook";
-import {IconBackspace, IconEdit, IconSparkles, IconVariable} from "@tabler/icons-react";
+import {IconBackspace, IconCircleX, IconEdit, IconSparkles, IconVariable} from "@tabler/icons-react";
 import {FlowService} from "@edition/flow/services/Flow.service";
 import {FunctionService} from "@edition/function/services/Function.service";
 import {LiteralBadgeComponent} from "@edition/datatype/components/badges/LiteralBadgeComponent";
@@ -43,7 +43,7 @@ export const FunctionNodeDefaultComponent: React.FC<FunctionNodeDefaultComponent
     const validation = useFlowValidation(data.flowId)
 
     const nodeValidations = React.useMemo(
-        () => validation?.filter(v => v.nodeId === data.nodeId && v.parameterIndex === null && !data.functionId),
+        () => validation?.filter(v => v.nodeId === data.nodeId && !data.functionId),
         [validation]
     )
 

src/packages/ce/src/function/components/nodes/FunctionNodeSquareComponent.tsx

@@ -40,7 +40,7 @@ export const FunctionNodeSquareComponent: React.FC<FunctionNodeSquareComponentPr
     const validation = useFlowValidation(data.flowId)
 
     const nodeValidations = React.useMemo(
-        () => validation?.filter(v => v.nodeId === data.nodeId && v.parameterIndex === null && !data.functionId),
+        () => validation?.filter(v => v.nodeId === data.nodeId && !data.functionId),
         [validation]
     )
 

src/packages/ce/src/function/components/nodes/FunctionNodeTriggerComponent.tsx

@@ -91,7 +91,7 @@ export const FunctionNodeTriggerComponent: React.FC<FunctionNodeTriggerComponent
     const validation = useFlowValidation(data.flowId)
 
     const triggerValidations = React.useMemo(
-        () => validation?.filter(v => v.nodeId === null && v.parameterIndex === null),
+        () => validation?.filter(v => v.nodeId === null),
         [validation]
     )