feat: data sets validation fields [DHIS2-18707]

[Sharmyn28]

This PR adds the Validation section for Data Set forms: DHIS2-18707

Notes:

• For the timelyDays attribute, based on the old app we are adding a default value 15

Validation form

[netlify]

✅ Deploy Preview for dhis2-maintenance-app-beta ready!

Name	Link
🔨 Latest commit	77f3e08
🔍 Latest deploy log	https://app.netlify.com/sites/dhis2-maintenance-app-beta/deploys/67b71b65d043e200086c69f8
😎 Deploy Preview	https://deploy-preview-513.maintenance-app-beta.netlify.dhis2.org
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tomzemp]

Additional note: For the compulsory data element operands:

• Milagros and I were a bit unsure as to whether we should use react-query by default or whether there were times when we should use app-platform query tools (useDataQuery/useEngine). We just went with using app-platform here as we wanted to focus on the overall logic. If we should update to use ReactQuery, let us know
• we're open to suggestions on this implementation in general 😄. It was a bit awkward and I'm still not sure it's the best UX for having these compulsory data element operands responding to the selected data elements/category combos, but the implementation we have works as far as we understood the proposed UX.

[Birkbjo]

This Field is from ReactFinalForm and this creates a subscription. You already have the subscription through useField-above, so this is not needed.

[Birkbjo]

I would prefer to take this as a parameter. This makes it more clear in CompulsoryDataElementsTransfer that the field depends on dataSetElements

[Birkbjo]

Thanks a lot for implementing this! The CompulsoryDataElementsTransfer is not trivial to implement - due to as you allude to; being part of the same form and thus need to depend on other fields. Even though there exists backend APIs to help make this simpler, the current design doesn't really take that into account.

However, I do feel like this implementation strays quite a lot from the rest of the app - and especially with the useEffect and general implementation of useGetCompulsoryDataElementOperandsOptions. I would argue that hook is a good example how using useQuery directly could simplify the code.

eg. Something like this should suffice:

export const useCompulsoryDataElementOperandsQuery = ({
    dataSetElements,
}: {
    dataSetElements: DataSetElement[]
}) => {
    const queryFn = useBoundResourceQueryFn()
    const relevantCatCombos = getRelevantCategoryCombos(dataSetElements)

    const queryResult = useQuery({
        queryKey: [
            {
                resource: 'categoryCombos',
                params: {
                    fields: [
                        'id,displayName,categoryOptionCombos[id,displayName]',
                    ],
                    filter: [`id:in:[${relevantCatCombos.join(',')}]`],
                    paging: false,
                },
            },
        ],
        queryFn: queryFn<{ categoryCombos: CategoryComboTruncated[] }>,
        enabled: relevantCatCombos?.length > 0,
        staleTime: 60 * 1000,
        select: (data) => // might be a good idea to wrap this in useMemo
            getOptions({
                categoryCombos: data.categoryCombos,
                dataSetElements,
            }),
    })

    return queryResult
}

[Birkbjo]

This is currently violating exhaustive deps - and there's not really a good way to do add input without causing an infinite loop. But please add a comment descriping why input is not part of it.