fix: enable ou tree and levels/groups with user orgunits and display …

…translated title (DHIS2-18066) (#3241)

* chore: use d2-ci analytics build for testing

* fix: inject translated user ou names

* fix: upgrade analytics

* test: update test to work with analytics function

* chore: import order

* test: update cypress test - no longer expect disabled tree

* test: update cypress test - expect root to be selected

* test: update cypress test - expect 2 units selected

* fix: never overwrite default metadata

* test: add reducer test for default metadata

* chore: comment

cypress/elements/dimensionModal/index.js

@@ -169,7 +169,6 @@ export {
     openOrgUnitTreeItem,
     toggleOrgUnitGroup,
     selectUserOrgUnit,
-    expectOrgUnitTreeToBeDisabled,
     expectOrgUnitTreeToBeEnabled,
     deselectUserOrgUnit,
 } from './orgUnitDimension.js'

cypress/elements/dimensionModal/orgUnitDimension.js

@@ -104,12 +104,6 @@ export const deselectUserOrgUnit = (name) => {
         .should('not.be.checked')
 }
 
-export const expectOrgUnitTreeToBeDisabled = () => {
-    cy.getBySel(orgUnitTreeEl).should('have.css', 'pointer-events', 'none')
-    cy.getBySel(levelSelectEl).should('have.css', 'pointer-events', 'none')
-    cy.getBySel(groupSelectEl).should('have.css', 'pointer-events', 'none')
-}
-
 export const expectOrgUnitTreeToBeEnabled = () => {
     cy.getBySel(orgUnitTreeEl).should('not.have.css', 'pointer-events', 'none')
     cy.getBySel(levelSelectEl).should('not.have.css', 'pointer-events', 'none')

cypress/integration/dimensions/orgUnit.cy.js

@@ -19,7 +19,6 @@ import {
     toggleOrgUnitLevel,
     toggleOrgUnitGroup,
     selectUserOrgUnit,
-    expectOrgUnitTreeToBeDisabled,
     expectOrgUnitTreeToBeEnabled,
     deselectUserOrgUnit,
 } from '../../elements/dimensionModal/index.js'
@@ -59,7 +58,7 @@ describe(`Org unit dimension`, () => {
         openDimension(DIMENSION_ID_ORGUNIT)
         expectOrgUnitDimensionModalToBeVisible()
         expectOrgUnitDimensionToNotBeLoading()
-        expectOrgUnitTreeToBeDisabled()
+        expectOrgUnitTreeToBeEnabled()
         deselectUserOrgUnit(TEST_DEFAULT_ORG_UNIT)
         selectOrgUnitTreeItem(TEST_ROOT)
         selectOrgUnitTreeItem(TEST_DISTRICT_1)
@@ -150,20 +149,19 @@ describe(`Org unit dimension`, () => {
         expectOrgUnitItemToBeSelected(TEST_ROOT)
         expectOrgUnitTreeToBeEnabled()
         selectUserOrgUnit(TEST_USER_ORG_UNIT)
-        expectOrgUnitTreeToBeDisabled()
+        expectOrgUnitTreeToBeEnabled()
         clickDimensionModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_COLUMN)
-        expectWindowConfigSeriesToHaveLength(13) // number of items in user org unit
-        expectDimensionToHaveItemAmount(DIMENSION_ID_ORGUNIT, 1)
+        expectWindowConfigSeriesToHaveLength(14) // number of items in user org unit
+        expectDimensionToHaveItemAmount(DIMENSION_ID_ORGUNIT, 2)
     })
     it(`deselects '${TEST_USER_ORG_UNIT}'`, () => {
         openDimension(DIMENSION_ID_ORGUNIT)
         expectOrgUnitDimensionModalToBeVisible()
         expectOrgUnitDimensionToNotBeLoading()
-        expectOrgUnitTreeToBeDisabled()
+        expectOrgUnitTreeToBeEnabled()
         deselectUserOrgUnit(TEST_USER_ORG_UNIT)
         expectOrgUnitTreeToBeEnabled()
-        selectOrgUnitTreeItem(TEST_ROOT)
         expectOrgUnitItemToBeSelected(TEST_ROOT)
         clickDimensionModalUpdateButton()
         expectVisualizationToBeVisible(VIS_TYPE_COLUMN)

package.json

@@ -41,7 +41,7 @@
         "typescript": "^4.8.4"
     },
     "dependencies": {
-        "@dhis2/analytics": "^26.9.0",
+        "@dhis2/analytics": "^26.9.3",
         "@dhis2/app-runtime": "^3.10.4",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",

src/components/App.js

@@ -17,7 +17,6 @@ import * as fromActions from '../actions/index.js'
 import { Snackbar } from '../components/Snackbar/Snackbar.js'
 import { USER_DATASTORE_CURRENT_AO_KEY } from '../modules/currentAnalyticalObject.js'
 import history from '../modules/history.js'
-import defaultMetadata from '../modules/metadata.js'
 import { getParentGraphMapFromVisualization } from '../modules/ui.js'
 import { STATE_DIRTY, getVisualizationState } from '../modules/visualization.js'
 import * as fromReducers from '../reducers/index.js'
@@ -139,18 +138,19 @@ export class UnconnectedApp extends Component {
 
         await this.fetchOuLevels()
 
-        const rootOrgUnits = this.props.settings.rootOrganisationUnits
-
-        const metaData = { ...defaultMetadata() }
-
-        rootOrgUnits.forEach((rootOrgUnit) => {
-            if (rootOrgUnit.id) {
-                metaData[rootOrgUnit.id] = {
-                    ...rootOrgUnit,
-                    path: `/${rootOrgUnit.id}`,
+        const metaData = this.props.settings.rootOrganisationUnits.reduce(
+            (obj, rootOrgUnit) => {
+                if (rootOrgUnit.id) {
+                    obj[rootOrgUnit.id] = {
+                        ...rootOrgUnit,
+                        path: `/${rootOrgUnit.id}`,
+                    }
                 }
-            }
-        })
+
+                return obj
+            },
+            {}
+        )
 
         this.props.addMetadata(metaData)
 

src/components/VisualizationPlugin/VisualizationPlugin.js

@@ -10,6 +10,10 @@ import {
     isLegendSetType,
     VIS_TYPE_LINE,
     DIMENSION_ID_DATA,
+    layoutGetDimensionItems,
+    USER_ORG_UNIT,
+    USER_ORG_UNIT_CHILDREN,
+    USER_ORG_UNIT_GRANDCHILDREN,
 } from '@dhis2/analytics'
 import { useDataEngine } from '@dhis2/app-runtime'
 import { Button, IconLegend24, Layer } from '@dhis2/ui'
@@ -20,6 +24,7 @@ import React, { useEffect, useState, useCallback } from 'react'
 import { apiFetchLegendSets } from '../../api/legendSets.js'
 import { getDisabledOptions } from '../../modules/disabledOptions.js'
 import { fetchData } from '../../modules/fetchData.js'
+import getDefaultMetadata from '../../modules/metadata.js'
 import { getOptionsFromVisualization } from '../../modules/options.js'
 import ChartPlugin from './ChartPlugin.js'
 import ContextualMenu from './ContextualMenu.js'
@@ -183,6 +188,29 @@ export const VisualizationPlugin = ({
 
         const filteredVisualization = cloneDeep(originalVisualization)
 
+        // inject translated user orgunit names
+        const ouItems = layoutGetDimensionItems(
+            filteredVisualization,
+            DIMENSION_ID_ORGUNIT
+        )
+
+        if (ouItems.length) {
+            const defaultMetaData = getDefaultMetadata()
+            const userOuIds = [
+                USER_ORG_UNIT,
+                USER_ORG_UNIT_CHILDREN,
+                USER_ORG_UNIT_GRANDCHILDREN,
+            ]
+
+            ouItems.forEach((ouItem) => {
+                userOuIds.forEach((userOuId) => {
+                    if (ouItem.id === userOuId) {
+                        ouItem.name = defaultMetaData[userOuId].name
+                    }
+                })
+            })
+        }
+
         Object.keys(disabledOptions).forEach(
             (option) => delete filteredVisualization[option]
         )

src/components/VisualizationPlugin/__tests__/VisualizationPlugin.spec.js

@@ -174,7 +174,11 @@ describe('VisualizationPlugin', () => {
             // eslint-disable-next-line no-import-assign, import/namespace
             api.apiFetchAnalytics = jest.fn().mockRejectedValue('error')
 
-            await canvas()
+            await canvas({
+                visualization: {
+                    ...defaultCurrentMock,
+                },
+            })
 
             expect(defaultProps.onError).toHaveBeenCalled()
         })

src/reducers/__tests__/metadata.spec.js

@@ -1,3 +1,8 @@
+import {
+    USER_ORG_UNIT,
+    USER_ORG_UNIT_CHILDREN,
+    USER_ORG_UNIT_GRANDCHILDREN,
+} from '@dhis2/analytics'
 import reducer, { DEFAULT_METADATA, ADD_METADATA } from '../metadata.js'
 
 const currentState = {
@@ -32,4 +37,31 @@ describe('reducer: metadata', () => {
 
         expect(actualState).toEqual(expectedState)
     })
+
+    it(`${ADD_METADATA}: should not overwrite default metadata`, () => {
+        const ids = [
+            USER_ORG_UNIT,
+            USER_ORG_UNIT_CHILDREN,
+            USER_ORG_UNIT_GRANDCHILDREN,
+            'LAST_12_MONTHS',
+        ]
+
+        const unwantedMetadata = ids.reduce((meta, id) => {
+            meta[id] = {
+                id,
+                name: id,
+            }
+            return meta
+        }, {})
+
+        const actualState = reducer(DEFAULT_METADATA, {
+            type: ADD_METADATA,
+            value: unwantedMetadata,
+        })
+
+        ids.forEach((id) => {
+            expect(actualState[id].name).toEqual(DEFAULT_METADATA[id].name)
+            expect(actualState[id].name).not.toEqual(unwantedMetadata[id].name)
+        })
+    })
 })

src/reducers/metadata.js

@@ -1,14 +1,21 @@
+import getDefaultMetadata from '../modules/metadata.js'
+
 export const ADD_METADATA = 'ADD_METADATA'
 
-export const DEFAULT_METADATA = {}
+export const DEFAULT_METADATA = getDefaultMetadata()
 
 export default (state = DEFAULT_METADATA, action) => {
     switch (action.type) {
         case ADD_METADATA: {
             const result = { ...state }
-            Object.entries(action.value).forEach(
-                ([key, value]) => (result[key] = { ...result[key], ...value })
-            )
+            Object.entries(action.value).forEach(([key, value]) => {
+                // Default metadata is translated by the client, so never overwrite with values from the server
+                if (value.id in DEFAULT_METADATA) {
+                    return
+                }
+
+                result[key] = { ...result[key], ...value }
+            })
             return result
         }
         default: