feat(data element forms): add validation

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2023-10-25T11:43:32.223Z\n"
-"PO-Revision-Date: 2023-10-25T11:43:32.223Z\n"
+"POT-Creation-Date: 2023-11-16T09:17:45.955Z\n"
+"PO-Revision-Date: 2023-11-16T09:17:45.955Z\n"
 
 msgid "schemas"
 msgstr "schemas"
@@ -78,14 +78,14 @@ msgstr "Aggregation level(s)"
 msgid "Category combo"
 msgstr "Category combo"
 
-msgid "Default (none)"
-msgstr "Default (none)"
+msgid "None"
+msgstr "None"
 
 msgid "Filter legend sets"
 msgstr "Filter legend sets"
 
-msgid "None"
-msgstr "None"
+msgid "<No value>"
+msgstr "<No value>"
 
 msgid "Option set"
 msgstr "Option set"
@@ -621,12 +621,64 @@ msgstr "Exit without saving"
 msgid "Create data element"
 msgstr "Create data element"
 
+msgid "Loading custom attributes"
+msgstr "Loading custom attributes"
+
+msgid "Something went wrong with retrieving the custom attributes"
+msgstr "Something went wrong with retrieving the custom attributes"
+
 msgid "Basic information"
 msgstr "Basic information"
 
 msgid "Set up the information for this data element"
 msgstr "Set up the information for this data element"
 
+msgid "Disaggregation and Option sets"
+msgstr "Disaggregation and Option sets"
+
+msgid "Set up disaggregation and predefined options."
+msgstr "Set up disaggregation and predefined options."
+
+msgid "LegendSet"
+msgstr "LegendSet"
+
+msgid ""
+"Visualize values for this data element in Analytics app. Multiple legendSet "
+"can be applied."
+msgstr ""
+"Visualize values for this data element in Analytics app. Multiple legendSet "
+"can be applied."
+
+msgid "Aggregation levels"
+msgstr "Aggregation levels"
+
+msgid ""
+"By default, the aggregation will start at the lowest assigned organisation "
+"unit. If you for example select \"Chiefdom\", it means that \"Chiefdom\", "
+"\"District\" and \"National\" aggregates use \"Chiefdom\" (the highest "
+"aggregation level available) as the data source, and PHU data will not be "
+"included. PHU will still be available for the PHU level, but not included "
+"in the aggregations to the levels above."
+msgstr ""
+"By default, the aggregation will start at the lowest assigned organisation "
+"unit. If you for example select \"Chiefdom\", it means that \"Chiefdom\", "
+"\"District\" and \"National\" aggregates use \"Chiefdom\" (the highest "
+"aggregation level available) as the data source, and PHU data will not be "
+"included. PHU will still be available for the PHU level, but not included "
+"in the aggregations to the levels above."
+
+msgid "Custom fields for your DHIS2 instance"
+msgstr "Custom fields for your DHIS2 instance"
+
+msgid "Required"
+msgstr "Required"
+
+msgid "Cannot be longer than {{number}} character"
+msgstr "Cannot be longer than {{number}} character"
+
+msgid "The value is to long. You can use up to 255 characters"
+msgstr "The value is to long. You can use up to 255 characters"
+
 msgid "{{fieldLabel}} (required)"
 msgstr "{{fieldLabel}} (required)"
 
@@ -648,6 +700,16 @@ msgstr "Url"
 msgid "A web link that provides extra information"
 msgstr "A web link that provides extra information"
 
+msgid "Color and icon"
+msgstr "Color and icon"
+
+msgid ""
+"A color and icon are helpful for identifying data elements in "
+"information-dense screens."
+msgstr ""
+"A color and icon are helpful for identifying data elements in "
+"information-dense screens."
+
 msgid "Field mask"
 msgstr "Field mask"
 
@@ -666,38 +728,6 @@ msgstr "An alternative name used in section or automatic data entry forms."
 msgid "Store zero data values"
 msgstr "Store zero data values"
 
-msgid "Disaggregation and Option sets"
-msgstr "Disaggregation and Option sets"
-
-msgid "Set up disaggregation and predefined options."
-msgstr "Set up disaggregation and predefined options."
-
-msgid "LegendSet"
-msgstr "LegendSet"
-
-msgid ""
-"Visualize values for this data element in Analytics app. Multiple legendSet "
-"can be applied."
-msgstr ""
-"Visualize values for this data element in Analytics app. Multiple legendSet "
-"can be applied."
-
-msgid "Aggregation levels"
-msgstr "Aggregation levels"
-
-msgid "Custom fields for your DHIS2 instance"
-msgstr "Custom fields for your DHIS2 instance"
-
-msgid "Color and icon"
-msgstr "Color and icon"
-
-msgid ""
-"A color and icon are helpful for identifying data elements in "
-"information-dense screens."
-msgstr ""
-"A color and icon are helpful for identifying data elements in "
-"information-dense screens."
-
 msgid "A data element can either be aggregated or tracked data."
 msgstr "A data element can either be aggregated or tracked data."
 
@@ -731,6 +761,9 @@ msgstr "Option set comment"
 msgid "Choose a set of predefined comment for data entry"
 msgstr "Choose a set of predefined comment for data entry"
 
+msgid "This field requires a unique value, please choose another one"
+msgstr "This field requires a unique value, please choose another one"
+
 msgid "Metadata management"
 msgstr "Metadata management"
 

jest-setup.js

@@ -1,6 +1,13 @@
 import { configure } from '@testing-library/react'
 import '@testing-library/jest-dom'
 
+// Not defined on nodejs
+window.IntersectionObserver = jest.fn(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}))
+
 beforeEach(() => {
     configure({ testIdAttribute: 'data-test' })
 })

src/components/SearchableSingleSelect/SearchableSingleSelect.tsx

@@ -58,13 +58,15 @@ interface SearchableSingleSelectPropTypes {
     showEndLoader: boolean
     loading: boolean
     selected?: string
+    invalid?: boolean
     error?: string
     showAllOption?: boolean
     onBlur?: () => void
     onFocus?: () => void
 }
 
 export const SearchableSingleSelect = ({
+    invalid,
     error,
     loading,
     placeholder,
@@ -121,6 +123,7 @@ export const SearchableSingleSelect = ({
             // fetched the corresponding label yet. Therefore we don't want to pass in
             // any value to the "selected" prop, as otherwise an error will be thrown
             selected={hasSelectedInOptionList ? selected : ''}
+            error={invalid}
             onChange={onChange}
             placeholder={placeholder}
             onBlur={onBlur}

src/components/metadataFormControls/AggregationLevelMultiSelect/AggregationLevelMultiSelect.tsx

@@ -31,6 +31,7 @@ interface AggregationLevelMultiSelectProps {
     onChange: ({ selected }: { selected: string[] }) => void
     onRetryClick: () => void
     inputWidth?: string
+    invalid?: boolean
     placeholder?: string
     selected?: string[]
     showAllOption?: boolean
@@ -43,6 +44,7 @@ export const AggregationLevelMultiSelect = forwardRef(
         {
             onChange,
             inputWidth,
+            invalid,
             selected,
             showAllOption,
             placeholder = i18n.t('Aggregation level(s)'),
@@ -67,7 +69,7 @@ export const AggregationLevelMultiSelect = forwardRef(
                 onChange={({ selected }: { selected: string[] }) => {
                     onChange({ selected })
                 }}
-                error={!!optionsQuery.error}
+                error={!!optionsQuery.error || invalid}
                 selected={loading ? [] : selected}
                 loading={loading}
                 onBlur={onBlur}

src/components/metadataFormControls/CategoryComboSelect/CategoryComboSelect.tsx

@@ -13,6 +13,7 @@ type CategoryComboSelectProps = Omit<
 export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
     {
         onChange,
+        invalid,
         placeholder = i18n.t('Category combo'),
         required,
         selected,
@@ -26,6 +27,7 @@ export const CategoryComboSelect = forwardRef(function CategoryComboSelect(
         <ModelSingleSelect
             ref={ref}
             required={required}
+            invalid={invalid}
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}

src/components/metadataFormControls/ModelSingleSelect/ModelSingleSelect.tsx

@@ -59,6 +59,7 @@ type UseInitialOptionQuery = ({
 export interface ModelSingleSelectProps {
     onChange: ({ selected }: { selected: string }) => void
     required?: boolean
+    invalid?: boolean
     placeholder?: string
     selected?: string
     showAllOption?: boolean
@@ -71,6 +72,7 @@ export interface ModelSingleSelectProps {
 export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
     {
         onChange,
+        invalid,
         placeholder = '',
         required,
         selected,
@@ -150,6 +152,7 @@ export const ModelSingleSelect = forwardRef(function ModelSingleSelect(
 
     return (
         <SearchableSingleSelect
+            invalid={invalid}
             placeholder={placeholder}
             showAllOption={showAllOption}
             onChange={({ selected }) => {

src/components/metadataFormControls/OptionSetSelect/OptionSetSelect.tsx

@@ -13,6 +13,7 @@ type OptionSetSelectProps = Omit<
 export const OptionSetSelect = forwardRef(function OptionSetSelect(
     {
         onChange,
+        invalid,
         placeholder = i18n.t('Option set'),
         required,
         selected,
@@ -26,6 +27,7 @@ export const OptionSetSelect = forwardRef(function OptionSetSelect(
         <ModelSingleSelect
             ref={ref}
             required={required}
+            invalid={invalid}
             useInitialOptionQuery={useInitialOptionQuery}
             useOptionsQuery={useOptionsQuery}
             placeholder={placeholder}

src/lib/index.ts

@@ -2,7 +2,8 @@ export * from './constants'
 export * from './debounce'
 export * from './models'
 export * from './schemas'
-export * from './useLoadApp'
+export { useLoadApp } from './useLoadApp'
+export type { ModelSchemas, Schema } from './useLoadApp'
 export * from './errors'
 export * from './user'
 export * from './sections'

src/lib/useLoadApp.ts

@@ -8,7 +8,7 @@ import { useSetSchemas } from './schemas'
 import { useSetSystemSettings } from './systemSettings'
 import { useSetCurrentUser } from './user'
 
-export const schemaFields = [
+const schemaFields = [
     'authorities',
     'displayName',
     'name',
@@ -22,12 +22,12 @@ export const schemaFields = [
 // readonly types (even though it should)
 const schemaFieldsFilter = schemaFields.concat()
 
-export type SchemaPropertyFields = (typeof schemaFieldsFilter)[number]
+type SchemaPropertyFields = (typeof schemaFieldsFilter)[number]
 export type Schema = PickSchemaProperties<SchemaPropertyFields>
 export type ModelSchemas = ModelSchemasBase<Schema>
 
 // same fields as headbar-request to hit the cache
-export const userFields = [
+const userFields = [
     'authorities',
     'avatar',
     'email',
@@ -41,6 +41,12 @@ const userFieldsFilter = userFields.concat()
 type UserPropertyFields = (typeof userFields)[number]
 type CurrentUserResponse = Pick<CurrentUserBase, UserPropertyFields>
 
+/**
+ * !!! WARNING !!!
+ * There's already a `CurrentUser` type exported from the generated schema
+ * types. We need to think about the name of this type, see:
+ * https://github.com/dhis2/maintenance-app-beta/pull/359#discussion_r1399267866
+ */
 export interface CurrentUser extends Omit<CurrentUserResponse, 'authorities'> {
     authorities: Set<string> // use a set for faster lookup
 }

src/pages/dataElements/Edit.tsx

@@ -15,8 +15,12 @@ import { JsonPatchOperation } from '../../types'
 import { Attribute, DataElement } from '../../types/generated'
 import { createJsonPatchOperations } from './edit/'
 import classes from './Edit.module.css'
-import { DataElementFormFields, useCustomAttributesQuery } from './form'
-import { FormValues } from './form/types'
+import {
+    DataElementFormFields,
+    useCustomAttributesQuery,
+    useValidate,
+} from './form'
+import type { FormValues } from './form'
 
 type FinalFormFormApi = FormApi<FormValues>
 
@@ -143,6 +147,7 @@ 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({
@@ -170,7 +175,12 @@ export const Component = () => {
                 queryResponse={customAttributesQuery}
                 label={i18n.t('Custom attributes')}
             >
-                <Form onSubmit={onSubmit} initialValues={initialValues}>
+                <Form
+                    validateOnBlur
+                    onSubmit={onSubmit}
+                    validate={validate}
+                    initialValues={initialValues}
+                >
                     {({ handleSubmit, submitting, submitError }) => (
                         <form onSubmit={handleSubmit}>
                             <FormContents

src/pages/dataElements/List.spec.tsx

@@ -10,7 +10,7 @@
 import dataElementsMock from '../../__mocks__/gists/dataElementsMock.json'
 import filteredDataElementsMock from '../../__mocks__/gists/filteredDataElementsMock.json'
 import dataElementSchemaMock from '../../__mocks__/schema/dataElementsSchema.json'
 import { useModelListView } from '../../components/sectionList/listView'
 import { SECTIONS_MAP } from '../../lib'
 import { useSchemaStore } from '../../lib/schemas/schemaStore'
 import { ModelSchemas } from '../../lib/useLoadApp'
@@ -75,7 +75,7 @@
         const { id } = dataElementsMock.result[0]
         const firstRow = getByTestId(`section-list-row-${id}`)
         expect(firstRow).toHaveTextContent(
-            'Accute Flaccid Paralysis (Deaths < 5 yrs)AggregateNumber6 years agoPublic can edit'
+            /Accute Flaccid Paralysis \(Deaths < 5 yrs\)AggregateNumber\d+ years agoPublic can edit/
         )
     })
     it('should display all the columns', async () => {