feat: enhance validation display in FunctionFileDefaultComponent for improved user feedback

Author: nicosammito

src/packages/ce/src/function/components/files/FunctionFileDefaultComponent.tsx

@@ -1,5 +1,5 @@
 import React, {startTransition} from "react";
-import {Flex, InputSyntaxSegment, useForm, useService, useStore} from "@code0-tech/pictor";
+import {Alert, InputSyntaxSegment, Spacing, Text, useForm, useService, useStore} from "@code0-tech/pictor";
 import {
     Flow,
     LiteralValue,
@@ -46,7 +46,12 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
         return values
     }, [node, definition])
 
-    const validations = React.useMemo(() => {
+    const nodeValidation = React.useMemo(
+        () => validation?.find(v => v.nodeId === node.id && v.parameterIndex === null),
+        [validation]
+    )
+
+    const parameterValidations = React.useMemo(() => {
         const values: Record<string, any> = {}
         definition?.parameterDefinitions?.nodes?.forEach((parameter, index) => {
             values[parameter!.id!] = (_: any) => {
@@ -114,17 +119,29 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
         useInitialValidation: true,
         truthyValidationBeforeSubmit: false,
         initialValues: initialValues,
-        validate: validations,
+        validate: parameterValidations,
         onSubmit: onSubmit
     })
 
-    console.log(initialValues, node.id)
-
     React.useEffect(() => {
         validate()
     }, [validation])
 
-    return <Flex style={{gap: ".7rem", flexDirection: "column"}}>
+    return <>
+        <Text size={"md"}>{definition?.names?.[0].content}</Text>
+        <Spacing spacing={"xs"}/>
+        <Text hierarchy={"tertiary"}>{definition?.descriptions?.[0].content}</Text>
+        {
+            nodeValidation && <>
+                <Spacing spacing={"xl"}/>
+                <Alert color={"error"}>
+                    {nodeValidation?.message?.[0]?.content as string}
+                </Alert>
+            </>
+        }
+        <Spacing spacing={"xl"}/>
+        <Text size={"md"}>Parameters</Text>
+        <Spacing spacing={"xs"}/>
         {definition?.parameterDefinitions?.nodes?.map((parameterDefinition, index) => {
 
             if (!parameterDefinition) return null
@@ -147,7 +164,8 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
                                         }}
                                         {...inputs.getInputProps(parameterDefinition.id!)}
                 />
+                <Spacing spacing={"xl"}/>
             </div>
         })}
-    </Flex>
+    </>
 }