@dhis2-ui/organisation-unit-tree 10.16.2 → 10.16.3

package/src/__stories__/no-selection.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const NoSelection = () => (
+    <OrganisationUnitTree
+        onChange={onChange}
+        disableSelection
+        name="Root org unit"
+        roots={['A0000000000']}
+        selected={['/A0000000000/A0000000001']}
+        initiallyExpanded={['/A0000000000']}
+    />
+)
+
+NoSelection.storyName = 'No selection'

package/src/__stories__/replace-roots.js

@@ -0,0 +1,28 @@
+import React from 'react'
+
+export const ReplaceRoots = () => {
+    return (
+        <p>
+            This is currently not working due to limitations of the data engine
+            in the app runtime. Normally the root unit would&apos;ve been
+            replaced after 1000 milliseconds.
+        </p>
+    )
+
+    //const [roots, setRoots] = useState(['A0000000000'])
+
+    //useEffect(() => {
+    //    setTimeout(() => setRoots(['A0000000001']), delay)
+    //}, [])
+
+    //return (
+    //    <OrganisationUnitTree
+    //        name="Root org unit"
+    //        roots={roots}
+    //        onChange={console.log.bind(null, 'onChange')}
+    //        initiallyExpanded={['/A0000000001']}
+    //    />
+    //)
+}
+
+ReplaceRoots.storyName = 'Replace roots'

package/src/__stories__/root-error.js

@@ -0,0 +1,36 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { customData, onChange } from './shared.js'
+
+export const RootError = () => (
+    <CustomDataProvider
+        data={{
+            ...customData,
+            organisationUnits: (...args) => {
+                const [, { id }] = args
+                if (id === 'A0000000000') {
+                    return Promise.reject(
+                        'This is a custom error message, it could be anything'
+                    )
+                }
+
+                return customData.organisationUnits(...args)
+            },
+        }}
+    >
+        <fieldset style={{ maxWidth: 600 }}>
+            <legend style={{ padding: '0 10px' }}>
+                Custom container (max-width: 600px)
+            </legend>
+            <OrganisationUnitTree
+                onChange={onChange}
+                name="Root org unit"
+                roots={['A0000000000']}
+                initiallyExpanded={['/A0000000000/A0000000001']}
+            />
+        </fieldset>
+    </CustomDataProvider>
+)
+
+RootError.storyName = 'Root error'

package/src/__stories__/root-loading.js

@@ -0,0 +1,34 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { customData, onChange } from './shared.js'
+
+export const RootLoading = () => (
+    <CustomDataProvider
+        data={{
+            ...customData,
+            organisationUnits: (...args) => {
+                const [, { id }] = args
+                if (id === 'A0000000000') {
+                    return new Promise(() => null)
+                }
+
+                return customData.organisationUnits(...args)
+            },
+        }}
+    >
+        <fieldset style={{ maxWidth: 600 }}>
+            <legend style={{ padding: '0 10px' }}>
+                Custom container (max-width: 600px)
+            </legend>
+            <OrganisationUnitTree
+                onChange={onChange}
+                name="Root org unit"
+                roots={['A0000000000']}
+                initiallyExpanded={['/A0000000000/A0000000001']}
+            />
+        </fieldset>
+    </CustomDataProvider>
+)
+
+RootLoading.storyName = 'Root loading'

package/src/__stories__/rtl.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const RTL = () => (
+    <div dir="rtl">
+        <OrganisationUnitTree
+            onChange={onChange}
+            name="Root org unit"
+            roots={['A0000000000']}
+            initiallyExpanded={['/A0000000000/A0000000001']}
+        />
+    </div>
+)

package/src/__stories__/selected-multiple.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const SelectedMultiple = () => (
+    <OrganisationUnitTree
+        onChange={onChange}
+        name="Root org unit"
+        roots={['A0000000000']}
+        selected={[
+            '/A0000000000/A0000000002',
+            '/A0000000000/A0000000001/A0000000003',
+        ]}
+        initiallyExpanded={['/A0000000000', '/A0000000000/A0000000001']}
+    />
+)
+
+SelectedMultiple.storyName = 'Selected multiple'

package/src/__stories__/shared.js

@@ -0,0 +1,192 @@
+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)
+export const onExpand = (...args) => log && console.log('onExpand', ...args)
+export const onCollapse = (...args) => log && console.log('onCollapse', ...args)
+export const onChildrenLoaded = (...args) =>
+    log && console.log('onChildrenLoaded', ...args)
+
+const createResponse = ({ fields, id, path, displayName, children }) => ({
+    ...(fields.includes('id') ? { id } : {}),
+    ...(fields.includes('path') ? { path } : {}),
+    ...(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',
+                    children: [{ id: 'A0000000003' }, { id: 'A0000000004' }],
+                    displayName: 'Org Unit 2',
+                },
+                {
+                    id: 'A0000000002',
+                    path: '/A0000000000/A0000000002',
+                    children: [],
+                    displayName: 'Org Unit 3',
+                },
+                {
+                    id: 'A0000000006',
+                    path: '/A0000000000/A0000000006',
+                    children: [],
+                    displayName: 'Org Unit 7',
+                },
+            ],
+        })
+    }
+
+    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',
+                },
+            ],
+        })
+    }
+
+    if (id === 'A0000000002') {
+        data = createResponse({
+            fields,
+            displayName: 'Org Unit 3',
+            id: 'A0000000002',
+            path: '/A0000000000/A0000000002',
+            children: [],
+        })
+    }
+
+    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',
+                },
+            ],
+        })
+    }
+
+    if (id === 'A0000000004') {
+        data = createResponse({
+            fields,
+            displayName: 'Org Unit 5',
+            id: 'A0000000004',
+            path: '/A0000000000/A0000000001/A0000000004',
+            children: [],
+        })
+    }
+
+    if (id === 'A0000000006') {
+        data = createResponse({
+            fields,
+            displayName: 'Org Unit 7',
+            id: 'A0000000006',
+            path: '/A0000000000/A0000000006',
+            children: [],
+        })
+    }
+
+    if (id === 'A0000000007') {
+        data = createResponse({
+            fields,
+            displayName: 'Org Unit 8',
+            id: 'A0000000007',
+            path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+            children: [],
+        })
+    }
+
+    return data
+}
+
+export const customData = {
+    organisationUnits: (_, { id, params = {} }) => {
+        const data = getOrganisationUnitData(id, params)
+
+        if (!data) {
+            return Promise.reject(new Error('404 - Org unit not found'))
+        }
+
+        return Promise.resolve(data)
+    },
+}
+
+export const StatefulMultiSelectionWrapper = ({
+    children,
+    onSelectionChange = () => null,
+}) => {
+    const [selected, setSelected] = useState([])
+
+    return children({
+        selected,
+        onChange: (...args) => {
+            onChange(...args)
+
+            const [{ selected: newSelected }] = args
+            setSelected(newSelected)
+            onSelectionChange(newSelected)
+        },
+    })
+}
+
+StatefulMultiSelectionWrapper.propTypes = {
+    children: PropTypes.func.isRequired,
+    onSelectionChange: PropTypes.func,
+}
+
+export const createDecoratorStatefulMultiSelection = (args) => {
+    return (Story) => (
+        <StatefulMultiSelectionWrapper
+            onSelectionChange={args?.onSelectionChange}
+        >
+            {({ selected, onChange }) => (
+                <Story selected={selected} onChange={onChange} />
+            )}
+        </StatefulMultiSelectionWrapper>
+    )
+}
+
+export const createDecoratorCustomDataProvider = (args) => {
+    const data = args?.data || customData
+
+    return (Story) => {
+        return (
+            <CustomDataProvider data={data}>
+                <Story />
+            </CustomDataProvider>
+        )
+    }
+}

package/src/__stories__/single-selection.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const SingleSelection = () => (
+    <OrganisationUnitTree
+        onChange={onChange}
+        singleSelection
+        name="Root org unit"
+        roots={['A0000000000']}
+        selected={['/A0000000000/A0000000001']}
+        initiallyExpanded={['/A0000000000']}
+    />
+)
+
+SingleSelection.storyName = 'Single selection'

package/src/features/children_as_child_nodes/index.js

@@ -0,0 +1,29 @@
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given('an OrganisationUnitTree with children is rendered', () => {
+    cy.visitStory('OrganisationUnitTree', 'Closed with children')
+})
+
+Given('the node is open', () => {
+    cy.get(
+        '[data-test="dhis2-uiwidgets-orgunittree"] > [data-test="dhis2-uiwidgets-orgunittree-node"]'
+    ).as('rootUnit')
+
+    cy.get('@rootUnit').openOrgUnitNode()
+})
+
+Then("its children are nodes inside the unit's node", () => {
+    cy.get('@rootUnit')
+        .find(
+            '> [data-test="dhis2-uiwidgets-orgunittree-node-content"] > [data-test="dhis2-uiwidgets-orgunittree-node-leaves"]'
+        )
+        .children()
+        .should('have.length', 3)
+        .and((children) =>
+            children.each((_, child) => {
+                const $child = Cypress.$(child)
+                const dataTest = $child.data('test')
+                expect(dataTest).to.equal('dhis2-uiwidgets-orgunittree-node')
+            })
+        )
+})

package/src/features/children_as_child_nodes.feature

@@ -0,0 +1,6 @@
+Feature: Children of a node are rendered as a child node
+
+    Scenario: A unit has some children
+        Given an OrganisationUnitTree with children is rendered
+        And the node is open
+        Then its children are nodes inside the unit's node

package/src/features/controlled_expanded/index.js

@@ -0,0 +1,86 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+import { getOrganisationUnitData } from '../../__e2e__/get-organisation-unit-data.js'
+import { namespace } from '../../__e2e__/namespace.js'
+
+const expectOrgUnitsToBeDisplayed = (ids) => {
+    const expandedLabels = ids.map(
+        (id) =>
+            getOrganisationUnitData(id, { fields: ['displayName'] }).displayName
+    )
+
+    expandedLabels.forEach((label) => {
+        cy.get(`:contains("${label}")`).should('exist')
+    })
+}
+
+const expectOrgUnitsToNotBeDisplayed = (ids) => {
+    const expandedLabels = ids.map((id) => {
+        const data = getOrganisationUnitData(id, { fields: ['displayName'] })
+        return data.displayName
+    })
+
+    expandedLabels.forEach((label) => {
+        cy.get(`:contains("${label}")`).should('not.exist')
+    })
+}
+
+Given(
+    'the initial state of the controlled expanded prop has some paths',
+    () => {
+        cy.visitStory(namespace, 'Controlled')
+        cy.get(':contains("Org Unit 1")').should('exist')
+        cy.window().then((win) => {
+            cy.wrap(win.initiallyExpandedPaths).as('providedPaths', {
+                type: 'static',
+            })
+        })
+    }
+)
+
+When('the org unit tree should is done loading the provided paths', () => {
+    cy.window().then((win) => {
+        const expandedIds = win.initiallyExpandedPaths.map(
+            (path) => path.match(/[^/]+$/)[0]
+        )
+
+        expectOrgUnitsToBeDisplayed(expandedIds)
+    })
+})
+
+When('the user clicks on a button to collapse one of the opened paths', () => {
+    cy.window().then((win) => {
+        cy.wrap([win.orgUnitPathToExpand]).as('providedPaths', {
+            type: 'static',
+        })
+    })
+
+    cy.get('[data-test="org-unit-toggle"]').click()
+})
+
+Then(
+    'the org unit tree should open the provided paths when done loading',
+    () => {
+        cy.get('@providedPaths').then((providedPaths) => {
+            const providedIds = providedPaths.map(
+                (path) => path.match(/[^/]+$/)[0]
+            )
+
+            expectOrgUnitsToBeDisplayed(providedIds)
+        })
+    }
+)
+
+Then('the path should close', () => {
+    cy.get('@providedPaths').then((providedPaths) => {
+        const providedIds = providedPaths.map((path) => path.match(/[^/]+$/)[0])
+        const hiddenChildrenIds = providedIds.reduce((acc, cur) => {
+            const curData = getOrganisationUnitData(cur, {
+                fields: ['children[id,path,displayName]'],
+            })
+            const childrenIds = curData.children.map(({ id }) => id)
+            return [...acc, ...childrenIds]
+        }, [])
+
+        expectOrgUnitsToNotBeDisplayed(hiddenChildrenIds)
+    })
+})

package/src/features/controlled_expanded.feature

@@ -0,0 +1,11 @@
+Feature: The expanded paths of the org unit tree can be controlled
+
+    Scenario: The org unit tree expands some paths initially
+        Given the initial state of the controlled expanded prop has some paths
+        Then the org unit tree should open the provided paths when done loading
+
+    Scenario: The user collapses a path by pressing a button
+        Given the initial state of the controlled expanded prop has some paths
+        When the org unit tree should is done loading the provided paths
+        When the user clicks on a button to collapse one of the opened paths
+        Then the path should close

package/src/features/displaying_loading_error/index.js

@@ -0,0 +1,46 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+Given(
+    "loading errors do not display automatically and loading A0000000001's children will fail",
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'A 0000000001 loading error')
+    }
+)
+
+Given(
+    "loading errors display automatically and loading A0000000001's children will fail",
+    () => {
+        cy.visitStory(
+            'OrganisationUnitTree',
+            'A 0000000001 loading error autoexpand'
+        )
+    }
+)
+
+Given('the OrganisationUnitTree is closed', () => {
+    cy.get(
+        '[data-test="dhis2-uiwidgets-orgunittree"] > [data-test="dhis2-uiwidgets-orgunittree-node"]'
+    )
+        .as('rootNode')
+        .shouldBeAClosedNode()
+})
+
+When('the A0000000000 path is opened', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').openOrgUnitNode()
+})
+
+When('the A0000000000 -> A0000000001 path is opened', () => {
+    cy.getOrgUnitByLabel('Org Unit 2').openOrgUnitNode()
+})
+
+Then('no error message is shown', () => {
+    cy.getOrgUnitByLabel('Org Unit 2')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-error"]')
+        .should('not.exist')
+})
+
+Then('an appropriate error message is shown', () => {
+    cy.getOrgUnitByLabel('Org Unit 2')
+        .find('[data-test="dhis2-uiwidgets-orgunittree-error"]')
+        .should('contain', 'Could not load children')
+})

package/src/features/displaying_loading_error.feature

@@ -0,0 +1,24 @@
+Feature: When loading children fails a loading error should be shown
+
+    Due to the asynchronous nature of the tree, loading children
+    can fail at any given time. An appropriate error message should
+    be displayed when this happens
+
+    The error does not show automatically until a node's
+    children should be displayed.
+    This behavior can be changed to expand the node immediately
+    when the loading process fails.
+
+    Scenario: Loading the children of the root unit fails and error should not be auto expanded
+        Given loading errors do not display automatically and loading A0000000001's children will fail
+        And the OrganisationUnitTree is closed
+        When the A0000000000 path is opened
+        Then no error message is shown
+        When the A0000000000 -> A0000000001 path is opened
+        Then an appropriate error message is shown
+
+    Scenario: Loading the children of the root unit fails and error should be auto expanded
+        Given loading errors display automatically and loading A0000000001's children will fail
+        And the OrganisationUnitTree is closed
+        When the A0000000000 path is opened
+        Then an appropriate error message is shown

package/src/features/expanded/index.js

@@ -0,0 +1,87 @@
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor'
+
+const getRootOrgUnitByLabel = (label) => {
+    const rootOrgUnitLabelSelector = `
+        [data-test="dhis2-uiwidgets-orgunittree"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node-content"]
+        > [data-test="dhis2-uiwidgets-orgunittree-node-label"]
+        label
+    `
+
+    return cy
+        .contains(rootOrgUnitLabelSelector, label)
+        .parents('[data-test="dhis2-uiwidgets-orgunittree-node"]')
+}
+
+Given(
+    'a OrganisationUnitTree with children and no paths in the initiallyExpanded prop is rendered',
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'No initially expanded paths')
+    }
+)
+
+Given(
+    'a OrganisationUnitTree with children and the path of the first unit on the second level in the initiallyExpanded prop is rendered',
+    () => {
+        cy.visitStory('OrganisationUnitTree', 'Initially expanded paths')
+    }
+)
+
+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()
+})
+
+When('the user expands the sub org unit within the main org unit tree', () => {
+    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', () => {
+    cy.getOrgUnitByLabel('Org Unit 1').shouldBeAClosedNode()
+})
+
+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('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')
+})