refactor: use shared <CustomAttributes />

src/components/form/attributes/CustomAttributes.tsx

@@ -86,6 +86,7 @@ export function CustomAttributes() {
     const customAttributes = formState.initialValues.attributeValues?.map(
         (av) => av.attribute
     )
+    console.log('> <CustomAttribute /> customAttributes:', customAttributes)
 
     return (
         <>

src/components/index.tsx

@@ -1,5 +1,6 @@
 export * from './ColorAndIconPicker'
 export * from './EditableFieldWrapper'
+export * from './form'
 export { HidePreventUnmount } from './HidePreventUnmount'
 export { Loader } from './loading'
 export * from './metadataFormControls'

src/pages/dataElementGroups/Edit.tsx

@@ -65,6 +65,8 @@ function computeInitialValues({
         dataElementGroup,
         customAttributes
     )
+    console.log('> customAttributes', customAttributes)
+    console.log('> attributeValues', attributeValues)
 
     return {
         id: dataElementGroup.id,
@@ -150,7 +152,6 @@ function DataElementGroupForm({
                         submitError={submitError}
                     >
                         <DataElementGroupFormFields />
-                        <CustomAttributes />
                     </DefaultFormContents>
                 </form>
             )}

src/pages/dataElementGroups/form/DataElementGroupFormFields.tsx

@@ -5,6 +5,7 @@ import {
     StandardFormSectionTitle,
     StandardFormSectionDescription,
     StandardFormField,
+    CustomAttributes,
 } from '../../../components'
 import {
     DefaultIdentifiableFields,
@@ -54,6 +55,18 @@ export function DataElementGroupFormFields() {
                     <DataElementsField />
                 </StandardFormField>
             </StandardFormSection>
+
+            <StandardFormSection>
+                <StandardFormSectionTitle>
+                    {i18n.t('Custom attributes')}
+                </StandardFormSectionTitle>
+
+                <StandardFormSectionDescription>
+                    {i18n.t('Custom fields for your DHIS2 instance')}
+                </StandardFormSectionDescription>
+
+                <CustomAttributes />
+            </StandardFormSection>
         </>
     )
 }

src/pages/dataElements/Edit.tsx

@@ -12,6 +12,7 @@ import {
 } from '../../components'
 import { useCustomAttributesQuery } from '../../components/form'
 import { SCHEMA_SECTIONS, getSectionPath, validate } from '../../lib'
+import { getAllAttributeValues } from '../../lib/models/attributes'
 import { JsonPatchOperation } from '../../types'
 import { Attribute, DataElement } from '../../types/generated'
 import { createJsonPatchOperations } from './edit/'
@@ -49,28 +50,15 @@ function computeInitialValues({
     dataElement,
     customAttributes,
 }: {
-    dataElementId: string
     dataElement: DataElement
     customAttributes: Attribute[]
+    dataElementId: string
 }) {
     if (!dataElement) {
         return {}
     }
 
-    // We want to have an array in the state with all attributes, not just the
-    // ones that have a value which is what the endpoint responds with
-    const attributeValues = customAttributes.map((attribute) => {
-        const attributeValue = dataElement.attributeValues.find(
-            (currentAttributeValue) =>
-                attribute.id === currentAttributeValue.attribute.id
-        )
-
-        if (!attributeValue) {
-            return { attribute, value: '' }
-        }
-
-        return attributeValue
-    })
+    const attributeValues = getAllAttributeValues(dataElement, customAttributes)
 
     return {
         id: dataElementId,

src/pages/dataElements/fields/index.ts

@@ -2,7 +2,6 @@ export { AggregationLevelsField } from './AggregationLevelsField'
 export { AggregationTypeField } from './AggregationTypeField'
 export { CategoryComboField } from './CategoryComboField'
 export { ColorAndIconField } from './ColorAndIconField'
-export { CustomAttributes } from './CustomAttributes'
 export { DomainField } from './DomainField'
 export { FieldMaskField } from './FieldMaskField'
 export { FormNameField } from './FormNameField'

src/pages/dataElements/form/DataElementFormFields.tsx

@@ -5,6 +5,7 @@ import {
     StandardFormSectionTitle,
     StandardFormSectionDescription,
     StandardFormField,
+    CustomAttributes,
 } from '../../../components'
 import {
     CodeField,
@@ -18,7 +19,6 @@ import {
     AggregationTypeField,
     CategoryComboField,
     ColorAndIconField,
-    CustomAttributes,
     DomainField,
     FieldMaskField,
     FormNameField,