fix(de zod schema): add .optional() to optional nested value fields

src/pages/dataElements/Edit.tsx

@@ -16,7 +16,7 @@ import { Attribute, DataElement } from '../../types/generated'
 import { createJsonPatchOperations } from './edit/'
 import classes from './Edit.module.css'
 import { useCustomAttributesQuery } from './fields'
-import { DataElementFormFields, useValidate } from './form'
+import { DataElementFormFields, validate } from './form'
 import type { FormValues } from './form'
 
 type FinalFormFormApi = FormApi<FormValues>
@@ -144,7 +144,6 @@ export const Component = () => {
     const dataElementQuery = useDataElementQuery(dataElementId)
     const customAttributesQuery = useCustomAttributesQuery()
     const patchDirtyFields = usePatchDirtyFields()
-    const validate = useValidate()
 
     async function onSubmit(values: FormValues, form: FinalFormFormApi) {
         const errors = await patchDirtyFields({

src/pages/dataElements/New.tsx

@@ -13,7 +13,7 @@ import {
 import { SCHEMA_SECTIONS, getSectionPath, useSchemas } from '../../lib'
 import { Attribute } from '../../types/generated'
 import { useCustomAttributesQuery } from './fields'
-import { DataElementFormFields, useValidate } from './form'
+import { DataElementFormFields, validate } from './form'
 import type { FormValues } from './form'
 import classes from './New.module.css'
 
@@ -98,7 +98,6 @@ function formatFormValues({ values }: { values: FormValues }) {
 }
 
 export const Component = () => {
-    const validate = useValidate()
     const dataEngine = useDataEngine()
     const navigate = useNavigate()
     const customAttributesQuery = useCustomAttributesQuery()

src/pages/dataElements/form/dataElementSchema.ts

@@ -0,0 +1,33 @@
+import { z } from 'zod'
+import { DataElement } from '../../../types/generated'
+
+export const dataElementSchema = z
+    .object({
+        name: z.string().trim(),
+        shortName: z.string().trim(),
+        code: z.string().trim(),
+        description: z.string().trim(),
+        formName: z.string().trim(),
+        url: z.string().trim(),
+        fieldMask: z.string().trim(),
+        style: z.object({
+            color: z.string().optional(),
+            icon: z.string().optional(),
+        }),
+        domainType: z.union([z.literal('AGGREGATE'), z.literal('TRACKER')]),
+        valueType: z.nativeEnum(DataElement.valueType),
+        aggregationType: z.nativeEnum(DataElement.aggregationType),
+        optionSet: z.object({ id: z.string() }),
+        commentOptionSet: z.object({ id: z.string() }),
+        legendSets: z.array(z.object({ id: z.string() })),
+        aggregationLevels: z.array(z.number()),
+        attributeValues: z.array(
+            z.object({
+                value: z.string().optional(),
+                attribute: z.object({
+                    id: z.string(),
+                }),
+            })
+        ),
+    })
+    .partial()

src/pages/dataElements/form/index.ts

@@ -1,3 +1,3 @@
 export { DataElementFormFields } from './DataElementFormFields'
 export type { FormValues } from './types'
-export { useValidate } from './useValidate'
+export { validate } from './validate'

src/pages/dataElements/form/validate.ts

@@ -0,0 +1,27 @@
+import { setIn } from 'final-form'
+import { dataElementSchema } from './dataElementSchema'
+import type { FormValues } from './types'
+
+// @TODO: Figure out if there's a utility for this? I couldn't find one
+function segmentsToPath(segments: Array<string | number>) {
+    return segments.reduce((path, segment) => {
+        return typeof segment === 'number'
+            ? `${path}[${segment}]`
+            : `${path}.${segment}`
+    }) as string
+}
+
+export function validate(values: FormValues) {
+    const zodResult = dataElementSchema.safeParse(values)
+
+    if (zodResult.success !== false) {
+        return undefined
+    }
+
+    const allFormErrors = zodResult.error.issues.reduce((formErrors, error) => {
+        const errorPath = segmentsToPath(error.path)
+        return setIn(formErrors, errorPath, error.message)
+    }, {})
+
+    return allFormErrors
+}