Merge pull request #145 from code0-tech/feat/#141

Fixing validation from use form and remove flowSettingIdentifier

Author: nicosammito

.env.local

@@ -4,7 +4,7 @@ NEXT_PUBLIC_EDITION=ce
 SAGITTARIUS_GRAPHQL_URL=http://localhost:3010/graphql
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.5.1
+NEXT_PUBLIC_PICTOR_VERSION=0.6.0
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 
 NEXT_PUBLIC_OTEL_SERVICE_NAME=#"sculptor-client"

src/packages/ce/src/flow/services/Flow.service.ts

@@ -145,9 +145,10 @@ export class FlowService extends ReactiveArrayService<FlowView, FlowDependencies
         const payload: FlowInput = {
             name: flow?.name!,
             type: flow?.type?.id!,
+            /*@ts-ignore*/
             settings: flow?.settings?.nodes?.map(setting => {
                 return {
-                    flowSettingIdentifier: setting?.flowSettingIdentifier!,
+                    //flowSettingIdentifier: setting?.flowSettingIdentifier!,
                     value: setting?.value!,
                 }
             }) ?? [],

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

@@ -4,7 +4,7 @@ import {
     Flow,
     LiteralValue,
     NodeFunction,
-    NodeParameterValue,
+    NodeParameterValue, ParameterDefinition,
     ReferenceValue
 } from "@code0-tech/sagittarius-graphql-types";
 import {FileTabsService} from "@code0-tech/pictor/dist/components/file-tabs/FileTabs.service";
@@ -30,9 +30,8 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
     const functionStore = useStore(FunctionService)
     const flowService = useService(FlowService)
     const fileTabsService = useService(FileTabsService)
-    const validation = useFlowValidation(flowId)
-
     const changedParameters = React.useRef<Set<number>>(new Set())
+    const validation = useFlowValidation(flowId)
 
     const definition = React.useMemo(() => {
         return functionService.getById(node.functionDefinition?.id!!)
@@ -42,24 +41,24 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
         const values: Record<string, any> = {}
         definition?.parameterDefinitions?.nodes?.forEach((parameter, index) => {
             const nodeParameter = node.parameters?.nodes?.[index]
-            values[index] = nodeParameter?.value?.__typename === "LiteralValue" ? (typeof nodeParameter.value?.value === "object" && nodeParameter.value?.value != null ? JSON.stringify(nodeParameter.value?.value) : nodeParameter.value.value) : nodeParameter?.value != null ? JSON.stringify(nodeParameter?.value) : nodeParameter?.value
+            values[parameter!.id!] = nodeParameter?.value?.__typename === "LiteralValue" ? (typeof nodeParameter.value?.value === "object" && nodeParameter.value?.value != null ? JSON.stringify(nodeParameter.value?.value) : nodeParameter.value.value) : nodeParameter?.value != null ? JSON.stringify(nodeParameter?.value) : nodeParameter?.value
         })
         return values
-    }, [node])
+    }, [node, definition])
 
     const validations = React.useMemo(() => {
         const values: Record<string, any> = {}
-        node.parameters?.nodes?.forEach((parameter, index) => {
-            values[index] = (_: any) => {
-                const validationForParameter = validation?.find(v => v?.parameterIndex === index && v?.nodeId === node.id)
+        definition?.parameterDefinitions?.nodes?.forEach((parameter, index) => {
+            values[parameter!.id!] = (_: any) => {
+                const validationForParameter = validation?.find(v => v.parameterIndex === index && v.nodeId === node.id)
                 if (validationForParameter) {
                     return validationForParameter?.message?.[0]?.content ?? "Invalid value"
                 }
                 return null
             }
         })
         return values
-    }, [node, validation])
+    }, [validation, flowId, node, definition])
 
     const onSubmit = React.useCallback((values: any) => {
         startTransition(async () => {
@@ -68,7 +67,7 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
                 if (typeof parameterIndex !== "number") return
                 if (!changedParameters.current.has(parameterIndex)) continue;
                 const nodeParameter = node.parameters?.nodes?.find(p => p?.parameterDefinition?.id === parameterDefinition?.id)
-                const syntaxSegment = values[parameterIndex]
+                const syntaxSegment = values[parameterDefinition!.id!]
                 const previousValue = nodeParameter?.value as NodeParameterValue
                 const syntaxValue = syntaxSegment?.[0]?.value ?? syntaxSegment?.value ?? syntaxSegment ?? null as NodeFunction | LiteralValue | ReferenceValue | null
 
@@ -111,13 +110,18 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
         })
     }, [flowService])
 
-    const [inputs, validate] = useForm<Record<number, InputSyntaxSegment[]>>({
+    const [inputs, validate] = useForm<Record<string, InputSyntaxSegment[]>>({
+        useInitialValidation: true,
+        truthyValidationBeforeSubmit: false,
         initialValues: initialValues,
         validate: validations,
-        truthyValidationBeforeSubmit: false,
         onSubmit: onSubmit
     })
 
+    React.useEffect(() => {
+        validate()
+    }, [validation])
+
     return <Flex style={{gap: ".7rem", flexDirection: "column"}}>
         {definition?.parameterDefinitions?.nodes?.map((parameterDefinition, index) => {
 
@@ -139,7 +143,7 @@ export const FunctionFileDefaultComponent: React.FC<FunctionFileDefaultComponent
                                             changedParameters.current.add(index)
                                             validate()
                                         }}
-                                        {...inputs.getInputProps(index)}
+                                        {...inputs.getInputProps(parameterDefinition.id!)}
                 />
             </div>
         })}

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

@@ -36,21 +36,21 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
     const flowInputType = getTypesFromFunction({signature: instance.signature}).returnType
     const flowTypeInputType = getTypesFromFunction({signature: definition?.signature}).returnType
 
-    const initialValues: Record<number | "inputType", any> = React.useMemo(() => {
-        const values: Record<number | "inputType", any> = {
+    const initialValues: Record<string | "inputType", any> = React.useMemo(() => {
+        const values: Record<string | "inputType", any> = {
             "inputType": flowInputType || flowTypeInputType
         }
         definition?.flowTypeSettings?.forEach((setting, index) => {
             const flowSetting = instance.settings?.nodes?.[index]
-            values[index] = flowSetting?.value?.__typename === "LiteralValue" ? (flowSetting?.value.value) : (flowSetting?.value)
+            values[setting.id!] = flowSetting?.value?.__typename === "LiteralValue" ? (flowSetting?.value.value) : (flowSetting?.value)
         })
         return values
     }, [definition, instance])
 
     const validations = React.useMemo(() => {
         const values: Record<string, any> = {}
-        instance.settings?.nodes?.forEach((flowSetting, index) => {
-            values[index] = (_: any) => {
+        definition?.flowTypeSettings?.forEach((setting, index) => {
+            values[setting!.id!] = (_: any) => {
                 const validationForSetting = validation?.find(v => v.parameterIndex === index && !v.nodeId)
                 if (validationForSetting) {
                     return validationForSetting.message?.[0]?.content || "Invalid value"
@@ -71,7 +71,7 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
                 if (typeof index !== "number") return
                 if (!changedParameters.current.has(index)) continue;
 
-                const syntaxSegment = values[index]
+                const syntaxSegment = values[flowTypeSetting.id!]
                 const syntaxValue = syntaxSegment?.[0]?.value ?? syntaxSegment?.value ?? syntaxSegment ?? null as LiteralValue | null
 
                 if (!syntaxValue || !syntaxSegment || (Array.isArray(syntaxValue) && Array.from(syntaxValue).length <= 0)) {
@@ -85,14 +85,18 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
         })
     }, [definition, changedParameters])
 
-    const [inputs, validate] = useForm<Record<number | "inputType", InputSyntaxSegment[]>>({
+    const [inputs, validate] = useForm<Record<string | "inputType", InputSyntaxSegment[]>>({
         initialValues: initialValues,
         validate: validations,
         truthyValidationBeforeSubmit: false,
         useInitialValidation: true,
         onSubmit: onSubmit
     })
 
+    React.useEffect(() => {
+        validate()
+    }, [validation])
+
     return <Flex style={{gap: ".7rem", flexDirection: "column"}}>
         {
 
@@ -125,7 +129,7 @@ export const FunctionFileTriggerComponent: React.FC<FunctionFileTriggerComponent
                                             changedParameters.current.add(index)
                                             validate()
                                         }}
-                                        {...inputs.getInputProps(index)}
+                                        {...inputs.getInputProps(settingDefinition.id!)}
                 />
             </div>