fix: update queries to tracker endpoint (#3346)

Fix: https://dhis2.atlassian.net/browse/DHIS2-17839 
and https://dhis2.atlassian.net/browse/DHIS2-18303
* Update `TrackedEntityLayer` and `EventLayer` queries to `tracker` endpoint
* Handle breaking changes to `tracker` between v40 and v41
* Align `TrackedEntityPopup` on `EventPopup`

cypress/elements/event_layer.js

@@ -30,4 +30,11 @@ export class EventLayer extends Layer {
 
         return this
     }
+
+    selectViewAllEvents() {
+        // Group events by default or View all events
+        cy.get('[src="images/nocluster.png"]').click()
+
+        return this
+    }
 }

cypress/integration/layers/eventlayer.cy.js

@@ -52,4 +52,61 @@ context('Event Layers', () => {
         Layer.validateCardTitle('Stage 1 - Repeatable')
         Layer.validateCardItems(['Yes', 'No', 'Not set'])
     })
+
+    it('opens an event popup', () => {
+        Layer.openDialog('Events')
+            .selectProgram('Inpatient morbidity and mortality')
+            .validateStage('Inpatient morbidity and mortality')
+            .selectTab('Style')
+            .selectViewAllEvents()
+            .selectTab('Org Units')
+            .selectOu('Sierra Leone')
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Bo')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Badjia')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        cy.getByDataTest('org-unit-tree-node').contains('Njandama MCHP').click()
+
+        cy.getByDataTest('layeredit-addbtn').click()
+
+        cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.get('#dhis2-map-container')
+            .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
+            .should('not.exist')
+        cy.get('.dhis2-map').click('center')
+
+        cy.get('.maplibregl-popup')
+            .contains('Event location')
+            .should('be.visible')
+        cy.get('.maplibregl-popup')
+            .contains('0.000000 0.000000')
+            .should('be.visible')
+        cy.get('.maplibregl-popup')
+            .contains('Organisation unit')
+            .should('be.visible')
+        cy.get('.maplibregl-popup').contains('Event time').should('be.visible')
+
+        cy.get('.maplibregl-popup')
+            .contains('Age in years')
+            .should('be.visible')
+        cy.get('.maplibregl-popup')
+            .contains('Mode of Discharge')
+            .should('be.visible')
+
+        Layer.validateCardTitle('Inpatient morbidity and mortality')
+        Layer.validateCardItems(['Event'])
+    })
 })

cypress/integration/layers/telayer.cy.js

@@ -27,4 +27,57 @@ describe('Tracked Entity Layers', () => {
         )
         Layer.validateCardItems(['Malaria Entity'])
     })
+
+    it('opens a tracked entity layer popup', () => {
+        Layer.openDialog('Tracked entities')
+            .selectTab('Data')
+            .selectTeType('Focus area')
+            .selectTeProgram('Malaria focus investigation')
+            .selectTab('Period')
+            .typeStartDate('2018-01-01')
+            .selectTab('Org Units')
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Bo')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Badjia')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        cy.getByDataTest('org-unit-tree-node').contains('Njandama MCHP').click()
+
+        cy.getByDataTest('layeredit-addbtn').click()
+
+        Layer.validateDialogClosed(true)
+
+        cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.get('#dhis2-map-container')
+            .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
+            .should('not.exist')
+        cy.get('.dhis2-map').click('center') //Click somewhere on the map
+
+        cy.get('.maplibregl-popup')
+            .contains('Organisation unit')
+            .should('be.visible')
+        cy.get('.maplibregl-popup')
+            .contains('Last updated')
+            .should('be.visible')
+
+        cy.get('.maplibregl-popup')
+            .contains('System Focus ID')
+            .should('be.visible')
+        cy.get('.maplibregl-popup').contains('WQQ003161').should('be.visible')
+
+        Layer.validateCardTitle('Malaria focus investigation')
+        Layer.validateCardItems(['Focus area'])
+    })
 })

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: 2024-09-24T14:47:22.063Z\n"
-"PO-Revision-Date: 2024-09-24T14:47:22.066Z\n"
+"POT-Creation-Date: 2024-10-23T12:50:51.401Z\n"
+"PO-Revision-Date: 2024-10-23T12:50:51.401Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -733,6 +733,9 @@ msgstr "Parent unit"
 msgid "No data"
 msgstr "No data"
 
+msgid "Could not retrieve tracked entity data"
+msgstr "Could not retrieve tracked entity data"
+
 msgid "Last updated"
 msgstr "Last updated"
 

src/components/loaders/TrackedEntityLoader.js

@@ -1,18 +1,20 @@
+import { useConfig } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import { useEffect } from 'react'
 import trackedEntityLoader from '../../loaders/trackedEntityLoader.js'
 import useLoaderAlerts from './useLoaderAlerts.js'
 
 const TrackedEntityLoader = ({ config, onLoad, loaderAlertAction }) => {
     const { showAlerts } = useLoaderAlerts(loaderAlertAction)
+    const { serverVersion } = useConfig()
     useEffect(() => {
-        trackedEntityLoader(config).then((result) => {
+        trackedEntityLoader(config, serverVersion).then((result) => {
             if (result.alerts?.length && loaderAlertAction) {
                 showAlerts(result.alerts)
             }
             onLoad(result)
         })
-    }, [config, onLoad, showAlerts, loaderAlertAction])
+    }, [config, onLoad, showAlerts, loaderAlertAction, serverVersion])
 
     return null
 }

src/components/map/layers/EventLayer.js

@@ -141,13 +141,14 @@ class EventLayer extends Layer {
     }
 
     render() {
-        const { styleDataItem } = this.props
+        const { styleDataItem, nameProperty } = this.props
         const { popup, displayElements, eventCoordinateFieldName } = this.state
 
         return popup && displayElements ? (
             <EventPopup
                 {...popup}
                 styleDataItem={styleDataItem}
+                nameProperty={nameProperty}
                 displayElements={displayElements}
                 eventCoordinateFieldName={eventCoordinateFieldName}
                 onClose={this.onPopupClose}

src/components/map/layers/EventPopup.js

@@ -1,17 +1,18 @@
 import { useDataQuery } from '@dhis2/app-runtime'
 import i18n from '@dhis2/d2-i18n'
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { EVENT_ID_FIELD } from '../../../util/geojson.js'
 import { formatTime, formatCoordinate } from '../../../util/helpers.js'
+import { ORG_UNIT_QUERY } from '../../../util/orgUnits.js'
 import Popup from '../Popup.js'
 
 // Returns true if value is not undefined or null;
-const hasValue = (value) => value !== undefined || value !== null
+const hasValue = (value) => value !== undefined && value !== null
 
 const EVENTS_QUERY = {
     events: {
-        resource: 'events',
+        resource: 'tracker/events',
         id: ({ id }) => id,
     },
 }
@@ -65,35 +66,70 @@ const EventPopup = ({
     coordinates,
     feature,
     styleDataItem,
+    nameProperty,
     displayElements,
     eventCoordinateFieldName,
     onClose,
 }) => {
-    const { error, data, refetch } = useDataQuery(EVENTS_QUERY, {
+    const [orgUnit, setOrgUnit] = useState()
+
+    const { refetch: refetchOrgUnit, fetching: fetchingOrgUnit } = useDataQuery(
+        ORG_UNIT_QUERY,
+        {
+            lazy: true,
+        }
+    )
+    const {
+        error: errorEvent,
+        data: dataEvent,
+        refetch: refetchEvent,
+        fetching: fetchingEvent,
+    } = useDataQuery(EVENTS_QUERY, {
         lazy: true,
     })
 
     useEffect(() => {
-        refetch({
-            id: feature.properties.id || feature.properties[EVENT_ID_FIELD],
-        })
-    }, [feature, refetch])
+        const fetchEventandOU = async () => {
+            const resultEvent = await refetchEvent({
+                id: feature.properties.id || feature.properties[EVENT_ID_FIELD],
+            })
+            const idOrgUnit = resultEvent?.events?.orgUnit
+
+            if (idOrgUnit) {
+                const resultOrgUnit = await refetchOrgUnit({
+                    id: idOrgUnit,
+                    nameProperty,
+                })
+                const nameOrgUnit = resultOrgUnit?.orgUnit?.name
+
+                setOrgUnit(nameOrgUnit)
+            }
+        }
+        fetchEventandOU()
+    }, [feature, nameProperty, refetchEvent, refetchOrgUnit])
 
     const { type, coordinates: coord } = feature.geometry
     const { value } = feature.properties
-    const { dataValues = [], eventDate, orgUnitName } = data?.events || {}
+    const { dataValues = [], occurredAt } = dataEvent?.events || {}
 
     return (
         <Popup
             coordinates={coordinates}
             onClose={onClose}
             className="dhis2-map-popup-event"
         >
-            {error && <span>{i18n.t('Could not retrieve event data')}</span>}
-            {!error && (
+            {errorEvent && (
+                <table>
+                    <tbody>
+                        <tr>{i18n.t('Could not retrieve event data')}</tr>
+                        <tr key="divider" style={{ height: 5 }} />
+                    </tbody>
+                </table>
+            )}
+            {!fetchingEvent && !fetchingOrgUnit && (
                 <table>
                     <tbody>
-                        {data?.events &&
+                        {dataEvent?.events &&
                             getDataRows({
                                 displayElements,
                                 dataValues,
@@ -111,16 +147,16 @@ const EventPopup = ({
                                 </td>
                             </tr>
                         )}
-                        {orgUnitName && (
+                        {orgUnit && (
                             <tr>
                                 <th>{i18n.t('Organisation unit')}</th>
-                                <td>{orgUnitName}</td>
+                                <td>{orgUnit}</td>
                             </tr>
                         )}
-                        {eventDate && (
+                        {occurredAt && (
                             <tr>
                                 <th>{i18n.t('Event time')}</th>
-                                <td>{formatTime(eventDate)}</td>
+                                <td>{formatTime(occurredAt)}</td>
                             </tr>
                         )}
                     </tbody>
@@ -134,6 +170,7 @@ EventPopup.propTypes = {
     coordinates: PropTypes.array.isRequired,
     displayElements: PropTypes.array.isRequired,
     feature: PropTypes.object.isRequired,
+    nameProperty: PropTypes.string.isRequired,
     onClose: PropTypes.func.isRequired,
     eventCoordinateFieldName: PropTypes.string,
     styleDataItem: PropTypes.object,