fix: respect user display name preference across metadata queries

src/components/OrgUnitsProvider.jsx

@@ -1,13 +1,14 @@
 import { useDataEngine } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React, { useContext, useState, useEffect, createContext } from 'react'
+import { useCachedData } from './cachedDataProvider/CachedDataProvider.jsx'
 
 // Fetches the root org units associated with the current user with fallback to data capture org units
 const ORG_UNITS_QUERY = {
     roots: {
         resource: 'organisationUnits',
-        params: () => ({
-            fields: ['id', 'displayName~rename(name)', 'path'], // TODO organisationUnits has shortName
+        params: ({ nameProperty }) => ({
+            fields: ['id', `${nameProperty}~rename(name)`, 'path'],
             userDataViewFallback: true,
         }),
     },
@@ -27,17 +28,19 @@ const OrgUnitsProvider = ({ children }) => {
     const [orgUnits, setOrgUnits] = useState()
     const [error, setError] = useState()
     const engine = useDataEngine()
+    const { nameProperty } = useCachedData()
 
     useEffect(() => {
         engine.query(ORG_UNITS_QUERY, {
+            variables: { nameProperty },
             onComplete: ({ levels, roots }) =>
                 setOrgUnits({
                     levels: levels.organisationUnitLevels,
                     roots: roots.organisationUnits,
                 }),
             onError: setError,
         })
-    }, [engine])
+    }, [engine, nameProperty])
 
     return (
         <OrgUnitsCtx.Provider

src/components/app/FileMenu.jsx

@@ -68,7 +68,7 @@ const FileMenu = ({ onFileMenuAction }) => {
     const dispatch = useDispatch()
     const engine = useDataEngine()
     const { serverVersion } = useConfig()
-    const { systemSettings, currentUser } = useCachedData()
+    const { systemSettings, currentUser, nameProperty } = useCachedData()
     const defaultBasemap = systemSettings.keyDefaultBaseMap
     //alerts
     const saveAlert = useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_OPTIONS_DYNAMIC)
@@ -151,6 +151,7 @@ const FileMenu = ({ onFileMenuAction }) => {
             engine,
             defaultBasemap,
             withSubscribers: true,
+            nameProperty,
         })
 
         const latestMap = {

src/components/app/useLoadMap.js

@@ -30,7 +30,7 @@ export const useLoadMap = () => {
     const basemapInvalidAlertRef = useRef(
         useAlert(ALERT_MESSAGE_DYNAMIC, ALERT_CRITICAL)
     )
-    const { systemSettings, basemaps } = useCachedData()
+    const { systemSettings, basemaps, nameProperty } = useCachedData()
     const defaultBasemap = systemSettings.keyDefaultBaseMap
     const engine = useDataEngine()
     const dispatch = useDispatch()
@@ -50,6 +50,7 @@ export const useLoadMap = () => {
                         id: params.mapId,
                         engine,
                         defaultBasemap,
+                        nameProperty,
                     })
 
                     engine.mutate(dataStatisticsMutation, {
@@ -86,7 +87,7 @@ export const useLoadMap = () => {
 
             previousParamsRef.current = params
         },
-        [basemaps, defaultBasemap, dispatch, engine]
+        [basemaps, defaultBasemap, dispatch, engine, nameProperty]
     )
 
     useEffect(() => {

src/components/edit/LayerEdit.jsx

@@ -46,7 +46,7 @@ const getLayerNames = () => ({
 
 const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
     const [isValidLayer, setIsValidLayer] = useState(false)
-    const { systemSettings, periodsSettings, currentUser } = useCachedData()
+    const { systemSettings, periodsSettings } = useCachedData()
     const orgUnits = useOrgUnits()
 
     const onValidateLayer = () => setIsValidLayer(true)
@@ -106,7 +106,6 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
                         {...layer}
                         systemSettings={systemSettings}
                         periodsSettings={periodsSettings}
-                        currentUser={currentUser}
                         orgUnits={orgUnits}
                         validateLayer={isValidLayer}
                         onLayerValidation={onLayerValidation}

src/components/edit/thematic/ThematicDialog.jsx

@@ -38,6 +38,7 @@ import {
     getPeriodsFromFilters,
     getDimensionsFromFilters,
 } from '../../../util/analytics.js'
+import { useCachedData } from '../../cachedDataProvider/CachedDataProvider.jsx'
 import NumericLegendStyle from '../../classification/NumericLegendStyle.jsx'
 import { Tab, Tabs, Checkbox } from '../../core/index.js'
 import DimensionFilter from '../../dimensions/DimensionFilter.jsx'
@@ -71,7 +72,6 @@ const ThematicDialog = ({
     noDataLegend,
     unclassifiedLegend,
     periodsSettings,
-    currentUser,
     validateLayer,
     onLayerValidation,
     legendSet,
@@ -82,6 +82,7 @@ const ThematicDialog = ({
     legendIsolated,
 }) => {
     const dispatch = useDispatch()
+    const { nameProperty } = useCachedData()
     const countFeaturesWithoutCoordinates = useSelector(
         (state) => state.layerEdit.countFeaturesWithoutCoordinates
     )
@@ -385,9 +386,7 @@ const ThematicDialog = ({
                     <div data-test="thematicdialog-datatab">
                         <div className={styles.flexRowFlow}>
                             <DataDimension
-                                displayNameProp={
-                                    currentUser.keyAnalysisDisplayProperty
-                                }
+                                displayNameProp={nameProperty}
                                 selectedDimensions={
                                     dataItem
                                         ? [
@@ -622,7 +621,6 @@ const ThematicDialog = ({
 ThematicDialog.propTypes = {
     backupPeriodsDates: PropTypes.object,
     columns: PropTypes.array,
-    currentUser: PropTypes.object,
     endDate: PropTypes.string,
     eventStatus: PropTypes.string,
     filters: PropTypes.array,

src/components/map/MapView.jsx

@@ -29,8 +29,7 @@ const MapView = (props) => {
 
     const { baseUrl } = useConfig()
     const engine = useDataEngine()
-    const { currentUser } = useCachedData()
-    const nameProperty = currentUser.keyAnalysisDisplayProperty
+    const { nameProperty } = useCachedData()
 
     const splitViewLayers = getSplitViewLayers(layers)
     const isSplitView = splitViewLayers.length > 0

src/components/map/layers/EventLayer.jsx

@@ -234,17 +234,14 @@ class EventLayer extends Layer {
         programStage,
         eventCoordinateField,
     }) {
-        const displayNameProp =
-            nameProperty === 'name' ? 'displayName' : 'displayShortName'
-
         let displayItems = []
 
         const programStageResponse = await engine.query(
             EVENT_PROGRAM_STAGE_DATA_ELEMENTS_QUERY,
             {
                 variables: {
                     id: programStage.id,
-                    nameProperty: displayNameProp,
+                    nameProperty,
                 },
             }
         )
@@ -275,7 +272,7 @@ class EventLayer extends Layer {
                 {
                     variables: {
                         id: program.id,
-                        nameProperty: displayNameProp,
+                        nameProperty,
                     },
                 }
             )
@@ -316,7 +313,7 @@ class EventLayer extends Layer {
             programStage,
             eventCoordinateField,
             engine,
-            displayNameProp,
+            nameProperty,
         })
 
         this.setState({ displayItems, eventCoordinateFieldName })

src/components/map/layers/TrackedEntityLayer.jsx

@@ -172,15 +172,12 @@ class TrackedEntityLayer extends Layer {
         const { trackedEntityType, program } = this.props
         // Get relationshipType object from loader if we want to retrieve attributes from secondary dataset
 
-        const displayNameProp =
-            nameProperty === 'name' ? 'displayName' : 'displayShortName'
-
         const { trackedEntityType: data } = await engine.query(
             TRACKED_ENTITY_TRACKED_ENTITY_TYPE_ATTRIBUTES_QUERY,
             {
                 variables: {
                     id: trackedEntityType.id,
-                    nameProperty: displayNameProp,
+                    nameProperty,
                 },
             }
         )
@@ -192,7 +189,7 @@ class TrackedEntityLayer extends Layer {
                 {
                     variables: {
                         id: program.id,
-                        nameProperty: displayNameProp,
+                        nameProperty,
                     },
                 }
             )

src/components/map/layers/TrackedEntityPopup.jsx

@@ -15,8 +15,8 @@ const TRACKED_ENTITIES_QUERY = {
     trackedEntities: {
         resource: `tracker/trackedEntities`,
         id: ({ id }) => id,
-        params: ({ program }) => ({
-            fields: 'updatedAt,orgUnit,attributes[displayName~rename(name),value,attribute],relationships',
+        params: ({ program, nameProperty }) => ({
+            fields: `updatedAt,orgUnit,attributes[${nameProperty}~rename(name),value,attribute],relationships`,
             program: program?.id,
         }),
     },
@@ -85,6 +85,7 @@ const TrackedEntityPopup = ({
         variables: {
             id: feature.properties.id,
             program,
+            nameProperty,
         },
         lazy: true,
     })
@@ -118,7 +119,10 @@ const TrackedEntityPopup = ({
                 })
             const orgUnitsNamesMap = {}
             for (const id of orgUnitIds) {
-                const result = await refetchOrgUnit({ id, nameProperty })
+                const result = await refetchOrgUnit({
+                    id,
+                    nameProperty,
+                })
                 orgUnitsNamesMap[id] = result?.orgUnit?.name
             }
             setOrgUnitNames(orgUnitsNamesMap)

src/components/plugin/LayerLoader.jsx

@@ -31,6 +31,7 @@ const LayerLoader = ({ config, onLoad }) => {
     const {
         systemSettings: { keyAnalysisDigitGroupSeparator },
         currentUser,
+        nameProperty,
     } = useCachedData()
     const { keyAnalysisDisplayProperty, id: userId } = currentUser
     const periodTypeData = useDataOutputPeriodTypes()
@@ -48,6 +49,7 @@ const LayerLoader = ({ config, onLoad }) => {
             config,
             engine,
             keyAnalysisDisplayProperty, // name/shortName
+            nameProperty, // displayName/displayShortName
             keyAnalysisDigitGroupSeparator, // NONE/SPACE/COMMA
             userId,
             baseUrl,
@@ -66,6 +68,7 @@ const LayerLoader = ({ config, onLoad }) => {
         userId,
         baseUrl,
         keyAnalysisDisplayProperty,
+        nameProperty,
         keyAnalysisDigitGroupSeparator,
         serverVersion,
     ])

src/loaders/eventLoader.js

@@ -49,7 +49,7 @@ const unknownErrorAlert = {
 const eventLoader = async ({
     config: layerConfig,
     engine,
-    keyAnalysisDisplayProperty,
+    nameProperty,
     keyAnalysisDigitGroupSeparator,
     analyticsEngine,
     periodTypeData,
@@ -59,16 +59,12 @@ const eventLoader = async ({
         ...layerConfig,
         keyAnalysisDigitGroupSeparator,
     }
-    const displayNameProp =
-        keyAnalysisDisplayProperty === 'name'
-            ? 'displayName'
-            : 'displayShortName'
 
     try {
         await loadEventLayer({
             config,
             engine,
-            displayNameProp,
+            nameProperty,
             analyticsEngine,
             periodTypeData,
             loadExtended,
@@ -98,7 +94,7 @@ const eventLoader = async ({
 const loadEventLayer = async ({
     config,
     engine,
-    displayNameProp,
+    nameProperty,
     analyticsEngine,
     periodTypeData,
     loadExtended,
@@ -162,7 +158,7 @@ const loadEventLayer = async ({
 
     const analyticsRequest = await getAnalyticsRequest(config, {
         analyticsEngine,
-        nameProperty: displayNameProp,
+        nameProperty,
         engine,
     })
     let alert
@@ -292,7 +288,7 @@ const loadEventLayer = async ({
         programStage,
         eventCoordinateField,
         engine,
-        displayNameProp,
+        nameProperty,
     })
     if (eventCoordinateFieldName) {
         config.legend.coordinateFields = [eventCoordinateFieldName]

src/util/coordinatesName.js

@@ -9,7 +9,7 @@ export const loadEventCoordinateFieldName = async ({
     programStage,
     eventCoordinateField,
     engine,
-    displayNameProp,
+    nameProperty,
 }) => {
     if (!eventCoordinateField) {
         return
@@ -22,7 +22,7 @@ export const loadEventCoordinateFieldName = async ({
     const { programStage: programStageData } = await engine.query(
         EVENT_PROGRAM_STAGE_DATA_ELEMENTS_QUERY,
         {
-            variables: { id: programStage.id, nameProperty: displayNameProp },
+            variables: { id: programStage.id, nameProperty },
         }
     )
     const { programStageDataElements } = programStageData
@@ -40,7 +40,7 @@ export const loadEventCoordinateFieldName = async ({
         {
             variables: {
                 id: program.id,
-                nameProperty: displayNameProp,
+                nameProperty,
             },
         }
     )