fix: enable ou tree and levels/groups with user orgunits and display decent title (DHIS2-18066)

src/components/OrgUnitDimension/OrgUnitDimension.js

@@ -51,10 +51,7 @@ const OrgUnitDimension = ({
         let result = [...selected]
 
         if (checked && DYNAMIC_ORG_UNITS.includes(id)) {
-            result = [
-                ...result.filter((item) => DYNAMIC_ORG_UNITS.includes(item.id)),
-                { id, displayName },
-            ]
+            result = [...result, { id, displayName }]
         } else if (checked) {
             result.push({ id, path, name: displayName })
         } else {
@@ -236,13 +233,7 @@ const OrgUnitDimension = ({
                     />
                 </div>
             )}
-            <div
-                className={cx('orgUnitTreeWrapper', {
-                    disabled: selected.some((item) =>
-                        DYNAMIC_ORG_UNITS.includes(item.id)
-                    ),
-                })}
-            >
+            <div className="orgUnitTreeWrapper">
                 <OrganisationUnitTree
                     roots={roots}
                     initiallyExpanded={[
@@ -276,9 +267,6 @@ const OrgUnitDimension = ({
             </div>
             <div
                 className={cx('selectsWrapper', {
-                    disabled: selected.some((item) =>
-                        DYNAMIC_ORG_UNITS.includes(item.id)
-                    ),
                     hidden: hideLevelSelect && hideGroupSelect,
                 })}
             >

src/components/OrgUnitDimension/__tests__/OrgUnitDimension.spec.js

@@ -0,0 +1,59 @@
+import { shallow } from 'enzyme'
+import React from 'react'
+import OrgUnitDimension from '../OrgUnitDimension.js'
+
+describe('The OrgUnitDimension component', () => {
+    let props
+    let shallowOrgUnitDimension
+
+    const getWrapper = () => {
+        if (!shallowOrgUnitDimension) {
+            shallowOrgUnitDimension = shallow(<OrgUnitDimension {...props} />)
+        }
+        return shallowOrgUnitDimension
+    }
+
+    beforeEach(() => {
+        props = {
+            roots: [],
+            selected: [],
+            onSelect: jest.fn(),
+            hideGroupSelect: false,
+            hideLevelSelect: false,
+            hideUserOrgUnits: false,
+            warning: '',
+        }
+        shallowOrgUnitDimension = undefined
+    })
+
+    it('matches the snapshot', () => {
+        const wrapper = getWrapper()
+        expect(wrapper).toMatchSnapshot()
+    })
+
+    it('calls onSelect when an organisation unit is selected', () => {
+        const wrapper = getWrapper()
+        const orgUnitTree = wrapper.find('OrganisationUnitTree')
+        const testOrgUnit = {
+            id: 'testId',
+            path: '/testPath',
+            displayName: 'Test Org Unit',
+            checked: true,
+        }
+        orgUnitTree.props().onChange(testOrgUnit)
+        expect(props.onSelect).toHaveBeenCalledWith({
+            dimensionId: 'ou',
+            items: [{ id: 'testId', path: '/testPath', name: 'Test Org Unit' }],
+        })
+    })
+
+    it('calls onSelect with an empty array when selection is cleared', () => {
+        const wrapper = getWrapper()
+        const deselectButton = wrapper.find('Button[onClick]')
+        deselectButton.simulate('click')
+        expect(props.onSelect).toHaveBeenCalledWith({
+            dimensionId: 'ou',
+            items: [],
+        })
+    })
+})

src/components/OrgUnitDimension/__tests__/__snapshots__/OrgUnitDimension.spec.js.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`The OrgUnitDimension component matches the snapshot 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="userOrgUnitsWrapper"
+  >
+    <Checkbox
+      checked={false}
+      dataTest="dhis2-uicore-checkbox"
+      dense={true}
+      indeterminate={false}
+      label="User organisation unit"
+      onChange={[Function]}
+    />
+    <Checkbox
+      checked={false}
+      dataTest="dhis2-uicore-checkbox"
+      dense={true}
+      indeterminate={false}
+      label="User sub-units"
+      onChange={[Function]}
+    />
+    <Checkbox
+      checked={false}
+      dataTest="dhis2-uicore-checkbox"
+      dense={true}
+      indeterminate={false}
+      label="User sub-x2-units"
+      onChange={[Function]}
+    />
+  </div>
+  <div
+    className="orgUnitTreeWrapper"
+  >
+    <OrganisationUnitTree
+      dataTest="org-unit-tree"
+      filter={Array []}
+      highlighted={Array []}
+      initiallyExpanded={Array []}
+      onChange={[Function]}
+      renderNodeLabel={[Function]}
+      roots={Array []}
+      selected={Array []}
+    />
+  </div>
+  <div
+    className="selectsWrapper"
+  >
+    <MultiSelect
+      dataTest="org-unit-level-select"
+      dense={true}
+      loading={true}
+      onChange={[Function]}
+      placeholder="Select a level"
+      selected={Array []}
+    />
+    <MultiSelect
+      dataTest="org-unit-group-select"
+      dense={true}
+      loading={true}
+      onChange={[Function]}
+      placeholder="Select a group"
+      selected={Array []}
+    />
+  </div>
+  <div
+    className="summaryWrapper"
+  >
+    <span
+      className="summaryText"
+    >
+      Nothing selected
+    </span>
+    <div
+      className="deselectButton"
+    >
+      <Button
+        dataTest="dhis2-uicore-button"
+        disabled={true}
+        onClick={[Function]}
+        secondary={true}
+        small={true}
+        type="button"
+      >
+        Deselect all
+      </Button>
+    </div>
+  </div>
+  <style />
+</div>
+`;

src/components/PivotTable/PivotTableTitleRows.js

@@ -6,6 +6,7 @@ import { PivotTableTitleRow } from './PivotTableTitleRow.js'
 
 export const PivotTableTitleRows = ({ clippingResult, width }) => {
     const engine = usePivotTableEngine()
+
     return (
         <>
             {engine.options.title ? (

src/modules/__tests__/getOuLevelAndGroupText.spec.js

@@ -61,4 +61,15 @@ describe('getOuLevelAndGroupText', () => {
             'Fruit and Veggies groups - Second floor levels'
         )
     })
+
+    it('grabs name for user orgunits from items when not present in metaData', () => {
+        filter.items = [
+            { id: 'USER_ORGUNIT', name: 'User organisation unit' },
+            { id: 'LEVEL-2nd-floor' },
+        ]
+
+        expect(getOuLevelAndGroupText(filter, metaData)).toEqual(
+            'Second floor levels in User organisation unit'
+        )
+    })
 })

src/modules/getOuLevelAndGroupText.js

@@ -28,7 +28,9 @@ export const getOuLevelAndGroupText = (filter, metaData) => {
 
 const getLevelAndGroupText = (items, metaData, isLevel) => {
     const getNameFromMetadata = (id) =>
-        metaData.items[id] ? metaData.items[id].name : id
+        metaData.items[id]
+            ? metaData.items[id].name
+            : items.find((item) => item.id === id)?.name || id
 
     const dynamicOuItems = items.filter((item) =>
         isLevel