refactor: extract common identifiablefields

src/pages/dataElementGroups/fields/CodeField.tsx → src/components/formFields/CodeField.tsx

@@ -2,19 +2,15 @@ import i18n from '@dhis2/d2-i18n'
 import { InputFieldFF } from '@dhis2/ui'
 import React from 'react'
 import { Field as FieldRFF } from 'react-final-form'
-import { useCheckMaxLengthFromSchema } from '../../../lib'
-import type { SchemaName } from '../../../types'
+import { SchemaSection, useCheckMaxLengthFromSchema } from '../../lib'
 
-export function CodeField() {
-    const validate = useCheckMaxLengthFromSchema(
-        'dataElement' as SchemaName,
-        'code'
-    )
+export function CodeField({ schemaSection }: { schemaSection: SchemaSection }) {
+    const validate = useCheckMaxLengthFromSchema(schemaSection.name, 'code')
 
     return (
         <FieldRFF
             component={InputFieldFF}
-            dataTest="dataelementsformfields-code"
+            dataTest="formfields-code"
             inputWidth="150px"
             name="code"
             label={i18n.t('Code')}

src/components/formFields/DefaultIdentifibleFIelds.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { useSchemaSectionHandleOrThrow } from '../../lib'
+import { StandardFormField } from '../standardForm'
+import { CodeField } from './CodeField'
+import { DescriptionField } from './DescriptionField'
+import { NameField } from './NameField'
+import { ShortNameField } from './ShortNameField'
+
+export const DefaultIdentifiableFields = () => {
+    const schemaSection = useSchemaSectionHandleOrThrow()
+
+    return (
+        <>
+            <StandardFormField>
+                <NameField schemaSection={schemaSection} />
+            </StandardFormField>
+
+            <StandardFormField>
+                <ShortNameField schemaSection={schemaSection} />
+            </StandardFormField>
+
+            <StandardFormField>
+                <CodeField schemaSection={schemaSection} />
+            </StandardFormField>
+
+            <StandardFormField>
+                <DescriptionField schemaSection={schemaSection} />
+            </StandardFormField>
+        </>
+    )
+}

src/components/formFields/DescriptionField.tsx

@@ -0,0 +1,34 @@
+import i18n from '@dhis2/d2-i18n'
+import { TextAreaFieldFF } from '@dhis2/ui'
+import React from 'react'
+import { Field as FieldRFF } from 'react-final-form'
+import { SchemaSection, useCheckMaxLengthFromSchema } from '../../lib'
+
+export function DescriptionField({
+    helpText,
+    schemaSection,
+}: {
+    helpText?: string
+    schemaSection: SchemaSection
+}) {
+    const validate = useCheckMaxLengthFromSchema(schemaSection.name, 'formName')
+
+    const helpString =
+        helpText ||
+        i18n.t(
+            "Explain the purpose of this data element and how it's measured."
+        )
+
+    return (
+        <FieldRFF
+            component={TextAreaFieldFF}
+            dataTest="formfields-description"
+            inputWidth="400px"
+            name="description"
+            label={i18n.t('Description')}
+            helpText={helpString}
+            validate={validate}
+            validateFields={[]}
+        />
+    )
+}

src/pages/dataElements/fields/NameField.tsx → src/components/formFields/NameField.tsx

@@ -8,27 +8,26 @@ import {
     required,
     useCheckMaxLengthFromSchema,
     useIsFieldValueUnique,
-} from '../../../lib'
-import { SchemaName } from '../../../types'
-import type { FormValues } from '../form'
+    SchemaSection,
+} from '../../lib'
 
-function useValidator() {
+function useValidator({ schemaSection }: { schemaSection: SchemaSection }) {
     const params = useParams()
-    const dataElementId = params.id as string
+    const modelId = params.id as string
     const checkIsValueTaken = useIsFieldValueUnique({
-        model: 'dataElements',
+        model: schemaSection.namePlural,
         field: 'name',
-        id: dataElementId,
+        id: modelId,
     })
 
     const checkMaxLength = useCheckMaxLengthFromSchema(
-        SchemaName.dataElement,
+        schemaSection.name,
         'name'
     )
 
     return useMemo(
         () =>
-            composeAsyncValidators<string, FormValues>([
+            composeAsyncValidators<string>([
                 checkIsValueTaken,
                 checkMaxLength,
                 required,
@@ -37,26 +36,33 @@ function useValidator() {
     )
 }
 
-export function NameField() {
-    const validator = useValidator()
+export function NameField({
+    schemaSection,
+    helpText,
+}: {
+    helpText?: string
+    schemaSection: SchemaSection
+}) {
+    const validator = useValidator({ schemaSection })
     const { meta } = useField('name', {
         subscription: { validating: true },
     })
 
+    const helpString =
+        helpText || i18n.t('A name should be concise and easy to recognize.')
+
     return (
         <FieldRFF<string | undefined>
             loading={meta.validating}
             component={InputFieldFF}
-            dataTest="dataelementsformfields-name"
+            dataTest="formfields-name"
             required
             inputWidth="400px"
             label={i18n.t('{{fieldLabel}} (required)', {
                 fieldLabel: i18n.t('Name'),
             })}
             name="name"
-            helpText={i18n.t(
-                'A data element name should be concise and easy to recognize.'
-            )}
+            helpText={helpString}
             validate={(name?: string) => validator(name)}
             validateFields={[]}
         />

src/pages/dataElements/fields/ShortNameField.tsx → src/components/formFields/ShortNameField.tsx

@@ -4,31 +4,30 @@ import React, { useMemo } from 'react'
 import { Field as FieldRFF, useField } from 'react-final-form'
 import { useParams } from 'react-router-dom'
 import {
+    SchemaSection,
     composeAsyncValidators,
     required,
     useCheckMaxLengthFromSchema,
     useIsFieldValueUnique,
-} from '../../../lib'
-import type { SchemaName } from '../../../types'
-import type { FormValues } from '../form'
+} from '../../lib'
 
-function useValidator() {
+function useValidator({ schemaSection }: { schemaSection: SchemaSection }) {
     const params = useParams()
-    const dataElementId = params.id as string
+    const modelId = params.id as string
     const checkIsValueTaken = useIsFieldValueUnique({
-        model: 'dataElements',
+        model: schemaSection.namePlural,
         field: 'name',
-        id: dataElementId,
+        id: modelId,
     })
 
     const checkMaxLength = useCheckMaxLengthFromSchema(
-        'dataElement' as SchemaName,
-        'formName'
+        schemaSection.name,
+        'shortName'
     )
 
     return useMemo(
         () =>
-            composeAsyncValidators<string, FormValues>([
+            composeAsyncValidators<string>([
                 checkIsValueTaken,
                 checkMaxLength,
                 required,
@@ -37,24 +36,33 @@ function useValidator() {
     )
 }
 
-export function ShortNameField() {
-    const validator = useValidator()
+export function ShortNameField({
+    helpText,
+    schemaSection,
+}: {
+    helpText?: string
+    schemaSection: SchemaSection
+}) {
+    const validator = useValidator({ schemaSection })
     const { meta } = useField('shortName', {
         subscription: { validating: true },
     })
 
+    const helpString =
+        helpText || i18n.t('Often used in reports where space is limited')
+
     return (
         <FieldRFF<string | undefined>
             loading={meta.validating}
             component={InputFieldFF}
-            dataTest="dataelementsformfields-shortname"
+            dataTest="formfields-shortname"
             required
             inputWidth="400px"
             label={i18n.t('{{fieldLabel}} (required)', {
                 fieldLabel: i18n.t('Short name'),
             })}
             name="shortName"
-            helpText={i18n.t('Often used in reports where space is limited')}
+            helpText={helpString}
             validate={(name?: string) => validator(name)}
             validateFields={[]}
         />

src/components/formFields/index.ts

@@ -0,0 +1,5 @@
+export { DefaultIdentifiableFields } from './DefaultIdentifibleFIelds'
+export { NameField } from './NameField'
+export { ShortNameField } from './ShortNameField'
+export { CodeField } from './CodeField'
+export { DescriptionField } from './DescriptionField'

src/lib/form/composeAsyncValidators/composeAsyncValidators.ts

@@ -1,6 +1,6 @@
 import type { FormFieldValidator } from './types'
 
-export const composeAsyncValidators = <Value, FormValues>(
+export const composeAsyncValidators = <Value, FormValues = unknown>(
     validators: FormFieldValidator<Value, FormValues>[]
 ): FormFieldValidator<Value, FormValues> => {
     return async (value?: Value, formValues?: FormValues) => {

src/lib/models/useCheckMaxLengthFromSchema.ts

@@ -8,9 +8,13 @@ export function useCheckMaxLengthFromSchema(
     property: string
 ) {
     const schema = useSchema(model)
-    const maxLength = schema.properties[property].length as number
+    const maxLength = schema.properties[property].length
+    console.log({ maxLength, schema })
     const checkMaxLength = useMemo(
-        () => createMaxCharacterLength(maxLength),
+        () =>
+            maxLength == undefined
+                ? () => undefined
+                : createMaxCharacterLength(maxLength),
         [maxLength]
     )