fix(OrganisationUnitTree): deduplicate orgunit roots

collections/forms/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-09T12:09:30.724Z\n"
-"PO-Revision-Date: 2024-09-09T12:09:30.724Z\n"
+"POT-Creation-Date: 2024-11-13T11:27:44.715Z\n"
+"PO-Revision-Date: 2024-11-13T11:27:44.725Z\n"
 
 msgid "Upload file"
 msgstr "Upload file"

components/organisation-unit-tree/src/__e2e__/get-organisation-unit-data.js

@@ -1,119 +1,127 @@
 const createResponse = ({ fields, id, path, displayName, children }) => ({
     ...(fields.includes('id') ? { id } : {}),
-    ...(fields.includes('path') ? { path } : {}),
+    ...(fields.includes('path') ? { path, level: path.split('/').length } : {}),
     ...(fields.includes('displayName') ? { displayName } : {}),
     ...(fields.includes('children::size') ? { children: children.length } : {}),
     ...(fields.includes('children[id,path,displayName]') ? { children } : {}),
 })
 
 export const getOrganisationUnitData = (id, { fields }) => {
-    let data
-
-    if (id === 'A0000000000') {
-        data = createResponse({
-            fields,
-            id: 'A0000000000',
-            path: '/A0000000000',
-            displayName: 'Org Unit 1',
-            children: [
-                {
-                    id: 'A0000000001',
-                    path: '/A0000000000/A0000000001',
-                    displayName: 'Org Unit 2',
-                },
-                {
-                    id: 'A0000000002',
-                    path: '/A0000000000/A0000000002',
-                    displayName: 'Org Unit 3',
-                },
-                {
-                    id: 'A0000000006',
-                    path: '/A0000000000/A0000000006',
-                    displayName: 'Org Unit 7',
-                },
-            ],
-        })
+    const allData = {
+        ...createHierarchyResponses({ rootPrefix: 'A', fields }),
+        ...createHierarchyResponses({ rootPrefix: 'B', fields, nameGenerator: (num) => `Org unit B ${num}` }),
     }
+    // return null
+    console.log({ id})
+    console.log({allData})
+    return allData[id]
+}
 
-    if (id === 'A0000000001') {
-        data = createResponse({
-            fields,
-            id: 'A0000000001',
-            path: '/A0000000000/A0000000001',
-            displayName: 'Org Unit 2',
-            children: [
-                {
-                    id: 'A0000000003',
-                    path: '/A0000000000/A0000000001/A0000000003',
-                    children: [],
-                    displayName: 'Org Unit 4',
-                },
-                {
-                    id: 'A0000000004',
-                    path: '/A0000000000/A0000000001/A0000000004',
-                    children: [],
-                    displayName: 'Org Unit 5',
-                },
-            ],
-        })
-    }
+const createHierarchyResponses = ({ rootPrefix, nameGenerator, fields }) => {
+    nameGenerator =
+        typeof nameGenerator === 'function'
+            ? nameGenerator
+            : (num) => `Org Unit ${num}`
+    const data = {}
+    const generateId = (num) => `${rootPrefix}000000000${num}`
 
-    if (id === 'A0000000002') {
-        data = createResponse({
-            fields,
-            displayName: 'Org Unit 3',
-            id: 'A0000000002',
-            path: '/A0000000000/A0000000002',
-            children: [],
-        })
-    }
+    data[generateId(0)] = createResponse({
+        fields,
+        id: generateId(0),
+        path: `/${rootPrefix}0000000000`,
+        displayName: nameGenerator(1),
+        children: [
+            {
+                id: generateId(1),
+                path: [generateId(0), generateId(1)].join('/'),
+                displayName: nameGenerator(2), //'Org Unit 2',
+            },
+            {
+                id: generateId(2),
+                path: [generateId(0), generateId(2)].join('/'),
+                displayName: nameGenerator(3),
+            },
+            {
+                id: generateId(6),
+                path: [generateId(0), generateId(6)].join('/'),
+                displayName: nameGenerator(7),
+            },
+        ],
+    })
 
-    if (id === 'A0000000003') {
-        data = createResponse({
-            fields,
-            displayName: 'Org Unit 4',
-            id: 'A0000000003',
-            path: '/A0000000000/A0000000001/A0000000003',
-            children: [
-                {
-                    id: 'A0000000007',
-                    path: '/A0000000000/A0000000001/A0000000003/A0000000007',
-                    children: [],
-                    displayName: 'Org Unit 8',
-                },
-            ],
-        })
-    }
+    data[generateId(1)] = createResponse({
+        fields,
+        id: generateId(1),
+        path: [generateId(0), generateId(1)].join('/'),
+        displayName: nameGenerator(2),
+        children: [
+            {
+                id: generateId(3),
+                path: [generateId(0), generateId(1), generateId(3)].join('/'),
+                children: [],
+                displayName: nameGenerator(4),
+            },
+            {
+                id: generateId(4),
+                path: [generateId(0), generateId(1), generateId(4)].join('/'),
+                children: [],
+                displayName: nameGenerator(5),
+            },
+        ],
+    })
 
-    if (id === 'A0000000004') {
-        data = createResponse({
-            fields,
-            displayName: 'Org Unit 5',
-            id: 'A0000000004',
-            path: '/A0000000000/A0000000001/A0000000004',
-            children: [],
-        })
-    }
+    data[generateId(2)] = createResponse({
+        fields,
+        displayName: nameGenerator(3),
+        id: generateId(2),
+        path: [generateId(0), generateId(2)].join('/'),
+        children: [],
+    })
 
-    if (id === 'A0000000006') {
-        data = createResponse({
-            fields,
-            displayName: 'Org Unit 7',
-            id: 'A0000000006',
-            path: '/A0000000000/A0000000006',
-            children: [],
-        })
-    }
+    data[generateId(3)] = createResponse({
+        fields,
+        displayName: nameGenerator(4),
+        id: generateId(3),
+        path: [generateId(0), generateId(1), generateId(3)].join('/'),
+        children: [
+            {
+                id: generateId(7),
+                path: [
+                    generateId(0),
+                    generateId(1),
+                    generateId(3),
+                    generateId(7),
+                ].join('/'),
+                displayName: nameGenerator(8),
+            },
+        ],
+    })
 
-    if (id === 'A0000000007') {
-        data = createResponse({
-            fields,
-            displayName: 'Org Unit 8',
-            id: 'A0000000007',
-            path: '/A0000000000/A0000000001/A0000000003/A0000000007',
-            children: [],
-        })
-    }
+    data[generateId(4)] = createResponse({
+        fields,
+        displayName: nameGenerator(5),
+        id: generateId(4),
+        path: [generateId(0), generateId(1), generateId(4)].join('/'),
+        children: [],
+    })
+
+    data[generateId(6)] = createResponse({
+        fields,
+        displayName: nameGenerator(7),
+        id: generateId(6),
+        path: [generateId(0), generateId(6)].join('/'),
+        children: [],
+    })
+
+    data[generateId(7)] = createResponse({
+        fields,
+        displayName: nameGenerator(8),
+        id: generateId(7),
+        path: [generateId(0), generateId(1), generateId(3), generateId(7)].join(
+            '/'
+        ),
+        children: [],
+    })
 
     return data
 }

components/organisation-unit-tree/src/__e2e__/sub_unit_as_root.js

@@ -16,7 +16,7 @@ export const MultipleRootSubAndOneMainOrgUnit = (_, { selected, onChange }) => {
                 filter={filter ? filter.split(',') : []}
                 onChange={onChange}
                 selected={selected}
-                roots={['A0000000000', 'A0000000001', 'A0000000002']}
+                roots={['A0000000001', 'A0000000002']}
             />
         </>
     )

components/organisation-unit-tree/src/__stories__/multiple-roots.js

@@ -9,7 +9,7 @@ export const MultipleRoots = (_, { onChange, selected }) => (
     <OrganisationUnitTree
         selected={selected}
         onChange={onChange}
-        roots={['A0000000000', 'A0000000001']}
+        roots={['A0000000000', 'B0000000000']}
         initiallyExpanded={['/A0000000000/A0000000001']}
     />
 )

components/organisation-unit-tree/src/__stories__/shared.js

@@ -1,6 +1,6 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
 export const log = true
 export const onChange = (...args) => log && console.log('onChange', ...args)
@@ -16,8 +16,11 @@
     ...(fields.includes('children::size') ? { children: children.length } : {}),
     ...(fields.includes('children[id,path,displayName]') ? { children } : {}),
 })
+import { getOrganisationUnitData as goud } from '../__e2e__/get-organisation-unit-data'
 
-export const getOrganisationUnitData = (id, { fields }) => {
+export const getOrganisationUnitData = goud
+
+const t = (id, { fields }) => {
     let data
 
     if (id === 'A0000000000') {

components/organisation-unit-tree/src/features/expanded.feature

@@ -10,18 +10,8 @@ Feature: Nodes can be expanded
         Given a OrganisationUnitTree with children and the path of the first unit on the second level in the initiallyExpanded prop is rendered
         Then the root unit is opened
 
-    # For info what a "sub", "main" and "root" unit is, see
-    # "sub_unit_as_root.feature"
-    Scenario: A sub org unit gets expanded within the main org unit tree
-        Given both a sub org unit with children and a main org unit are root org units
-        And the root main org unit is expanded
-        When the user expands the sub org unit within the main org unit tree
-        Then the root sub org unit should not expand
-
-    # For info what a "sub", "main" and "root" unit is, see
-    # "sub_unit_as_root.feature"
-    Scenario: A root sub org unit gets expanded which is also in the main org unit tree
-        Given both a sub org unit with children and a main org unit are root org units
-        And the root main org unit is expanded
-        When the user expands the root sub org unit
-        Then the sub org unit within the main org unit tree should not expand
+    Scenario: A sub org unit and its parents are both root org units
+        Given both a sub org unit and its parent are root org units
+        Then only the parent unit is first rendered
+        When the root main org unit is expanded
+        Then the sub org unit is rendered

components/organisation-unit-tree/src/features/expanded/index.js

@@ -1,4 +1,4 @@
-import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
 
 const getRootOrgUnitByLabel = (label) => {
     const rootOrgUnitLabelSelector = `
@@ -28,38 +28,17 @@ Given(
     }
 )
 
-Given(
-    'both a sub org unit with children and a main org unit are root org units',
-    () => {
-        cy.visitStory(
-            'OrganisationUnitTree',
-            'with root main and root sub org unit'
-        )
-    }
-)
-
-Given('the root main org unit is expanded', () => {
-    getRootOrgUnitByLabel('Org Unit 1')
-        .find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]')
-        .click()
+Given('both a sub org unit and its parent are root org units', () => {
+    cy.visitStory(
+        'OrganisationUnitTree',
+        'with root main and root sub org unit'
+    )
 })
 
-When('the user expands the sub org unit within the main org unit tree', () => {
+Given('the root main org unit is expanded', () => {
     getRootOrgUnitByLabel('Org Unit 1')
-        .contains(
-            '[data-test="dhis2-uiwidgets-orgunittree-node"]',
-            'Org Unit 2'
-        )
-        .find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]')
-        .click()
-        .should('have.class', 'open')
-})
-
-When('the user expands the root sub org unit', () => {
-    getRootOrgUnitByLabel('Org Unit 2')
         .find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]')
         .click()
-        .should('have.class', 'open')
 })
 
 Then('the root unit is closed', () => {
@@ -70,18 +49,21 @@ Then('the root unit is opened', () => {
     cy.getOrgUnitByLabel('Org Unit 1').shouldBeAnOrgUnitNode()
 })
 
-Then('the root sub org unit should not expand', () => {
-    getRootOrgUnitByLabel('Org Unit 2')
-        .find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]')
-        .should('not.have.class', 'open')
+Then('only the parent unit is first rendered', () => {
+    cy.contains(
+        '[data-test="dhis2-uiwidgets-orgunittree-node-label"]',
+        'Org Unit 1'
+    ).should('exist')
+
+    cy.contains(
+        '[data-test="dhis2-uiwidgets-orgunittree-node-label"]',
+        'Org Unit 2'
+    ).should('not.exist')
 })
 
-Then('the sub org unit within the main org unit tree should not expand', () => {
-    getRootOrgUnitByLabel('Org Unit 1')
-        .contains(
-            '[data-test="dhis2-uiwidgets-orgunittree-node"]',
-            'Org Unit 2'
-        )
-        .find('> [data-test="dhis2-uiwidgets-orgunittree-node-toggle"]')
-        .should('not.have.class', 'open')
+Then('the sub org unit is rendered', () => {
+    cy.contains(
+        '[data-test="dhis2-uiwidgets-orgunittree-node-label"]',
+        'Org Unit 2'
+    ).should('exist')
 })