feat(de name shortname inputs): add uniqueness validation

src/pages/dataElements/form/fields.tsx

@@ -23,10 +23,18 @@ import { AGGREGATION_TYPE, DOMAIN_TYPE, VALUE_TYPE } from '../../../constants'
 import { useSchemas } from '../../../lib'
 import classes from './customFields.module.css'
 import { EditableFieldWrapper } from './EditableFieldWrapper'
+import { useHasFieldValue } from './useHasFieldValue'
 
 export function NameField() {
+    const {
+        loading,
+        fetching,
+        refetch: checkIsValueTaken,
+    } = useHasFieldValue('name')
+
     return (
         <FieldRFF
+            loading={loading || fetching}
             component={InputFieldFF}
             dataTest="dataelementsformfields-name"
             required
@@ -38,13 +46,21 @@ export function NameField() {
             helpText={i18n.t(
                 'A data element name should be concise and easy to recognize.'
             )}
+            validate={checkIsValueTaken}
         />
     )
 }
 
 export function ShortNameField() {
+    const {
+        loading,
+        fetching,
+        refetch: checkIsValueTaken,
+    } = useHasFieldValue('shortName')
+
     return (
         <FieldRFF
+            loading={loading || fetching}
             component={InputFieldFF}
             dataTest="dataelementsformfields-shortname"
             required
@@ -54,6 +70,7 @@ export function ShortNameField() {
             })}
             name="shortName"
             helpText={i18n.t('Often used in reports where space is limited')}
+            validate={checkIsValueTaken}
         />
     )
 }

src/pages/dataElements/form/useHasFieldValue.ts

@@ -0,0 +1,53 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import i18n from '@dhis2/d2-i18n'
+import { useMemo } from 'react'
+import { Pager } from '../../../types/generated'
+
+const HAS_FIELD_VALUE_QUERY = {
+    dataElements: {
+        resource: 'dataElements',
+        params: (variables: Record<string, string>) => ({
+            pageSize: 1,
+            fields: '',
+            filter: [`${variables.field}:eq:${variables.value}`],
+        }),
+    },
+}
+
+interface QueryResponse {
+    dataElements: {
+        pager: Pager
+    }
+}
+
+export function useHasFieldValue(field: string) {
+    const queryResult = useDataQuery<QueryResponse>(HAS_FIELD_VALUE_QUERY, {
+        lazy: true,
+    })
+
+    return useMemo(
+        () => ({
+            ...queryResult,
+            refetch: (value: string) => {
+                if (!value) {
+                    return
+                }
+
+                return queryResult.refetch({ field, value }).then(
+                    // We don't have access to app-runtime's internal type `JsonMap`,
+                    // so we have to ignore the type error
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    (data: QueryResponse) =>
+                        data.dataElements.pager.total
+                            ? i18n.t(
+                                  'This {{field}} already exists, please choose antoher one',
+                                  { field }
+                              )
+                            : undefined
+                )
+            },
+        }),
+        [field, queryResult]
+    )
+}