@dhis2-ui/organisation-unit-tree 10.16.2 → 10.16.3-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "10.16.2",
+    "version": "10.16.3-alpha.1",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -35,17 +35,18 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.16.2",
-        "@dhis2-ui/checkbox": "10.16.2",
-        "@dhis2-ui/loader": "10.16.2",
-        "@dhis2-ui/node": "10.16.2",
-        "@dhis2/ui-constants": "10.16.2",
+        "@dhis2-ui/button": "10.16.3-alpha.1",
+        "@dhis2-ui/checkbox": "10.16.3-alpha.1",
+        "@dhis2-ui/loader": "10.16.3-alpha.1",
+        "@dhis2-ui/node": "10.16.3-alpha.1",
+        "@dhis2/ui-constants": "10.16.3-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
         "build",
-        "types"
+        "types",
+        "src"
     ],
     "devDependencies": {
         "@dhis2/app-runtime": "^3.9.0",

package/src/__e2e__/children_as_child_nodes.js

@@ -0,0 +1,23 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    StatefulMultiSelectionWrapper,
+    dataProviderData,
+    namespace,
+} from './common.js'
+
+export default { title: namespace }
+export const ClosedWithChildren = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ selected, onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={onChange}
+                    selected={selected}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/common.js

@@ -0,0 +1,70 @@
+/* eslint-disable react/display-name */
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import PropTypes from 'prop-types'
+import React, { useState } from 'react'
+import { getOrganisationUnitData } from './get-organisation-unit-data.js'
+
+export { getOrganisationUnitData } from './get-organisation-unit-data.js'
+export { namespace } from './namespace.js'
+
+export const delayResponse = (delay, response) => () =>
+    new Promise((resolve) => setTimeout(() => resolve(response), delay))
+
+export const dataProviderData = {
+    organisationUnits: (_, { id, params = {} }) => {
+        console.log('id, params', 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: ({ selected: newSelected }) => {
+            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 || dataProviderData
+
+    return (Story) => {
+        window.dataProviderData = data
+
+        return (
+            <CustomDataProvider data={data}>
+                <Story />
+            </CustomDataProvider>
+        )
+    }
+}

package/src/__e2e__/controlled_expanded.js

@@ -0,0 +1,89 @@
+import { Button } from '@dhis2-ui/button'
+import React, { useState } from 'react'
+import { OrganisationUnitTree, getAllExpandedOrgUnitPaths } from '../index.js'
+import { createDecoratorCustomDataProvider } from './common.js'
+
+window.initiallyExpandedPaths = ['/A0000000000/A0000000001']
+window.orgUnitPathToExpand = '/A0000000000/A0000000001'
+
+export const Controlled = () => {
+    const initiallyExpanded = getAllExpandedOrgUnitPaths(
+        window.initiallyExpandedPaths
+    )
+
+    const [expanded, setExpanded] = useState(initiallyExpanded)
+
+    const handleExpand = ({ path }) => {
+        if (!expanded.includes(path)) {
+            setExpanded([...expanded, path])
+        }
+    }
+
+    const handleCollapse = ({ path }) => {
+        const pathIndex = expanded.indexOf(path)
+
+        if (pathIndex !== -1) {
+            const updatedExpanded =
+                pathIndex === 0
+                    ? expanded.slice(1)
+                    : [
+                          ...expanded.slice(0, pathIndex),
+                          ...expanded.slice(pathIndex + 1),
+                      ]
+
+            setExpanded(updatedExpanded)
+        }
+    }
+
+    const imperativeToggle = () => {
+        if (!expanded.includes('/A0000000000/A0000000001')) {
+            // Make sure that all required sub paths are included as well
+            const nextPaths = getAllExpandedOrgUnitPaths([
+                ...expanded,
+                window.orgUnitPathToExpand,
+            ])
+
+            return setExpanded(nextPaths)
+        }
+
+        setExpanded(expanded.filter((v) => v !== '/A0000000000/A0000000001'))
+    }
+
+    return (
+        <>
+            <OrganisationUnitTree
+                onChange={() => null}
+                name="Root org unit"
+                roots={['A0000000000']}
+                expanded={expanded}
+                handleExpand={handleExpand}
+                handleCollapse={handleCollapse}
+            />
+
+            <br />
+
+            <Button dataTest="org-unit-toggle" onClick={imperativeToggle}>
+                Toggle Org Unit 2
+            </Button>
+        </>
+    )
+}
+
+Controlled.decorators = [createDecoratorCustomDataProvider()]
+
+export const MissingProps = () => {
+    const expanded = []
+    const handleExpand = () => null
+
+    return (
+        <OrganisationUnitTree
+            onChange={() => null}
+            name="Root org unit"
+            roots={['A0000000000']}
+            expanded={expanded}
+            handleExpand={handleExpand}
+        />
+    )
+}
+
+MissingProps.decorators = [createDecoratorCustomDataProvider()]

package/src/__e2e__/displaying_loading_error.js

@@ -0,0 +1,45 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+const dataProviderDataWithError = {
+    organisationUnits: (...args) => {
+        const [, { id }] = args
+        if (id === 'A0000000001') {
+            return new Promise((resolve, reject) =>
+                setTimeout(() => {
+                    reject(new Error('Foobar custom error message'))
+                }, 100)
+            )
+        }
+
+        return dataProviderData.organisationUnits(...args)
+    },
+}
+
+export const A0000000001LoadingError = () => (
+    <CustomDataProvider data={dataProviderDataWithError}>
+        <StatefulMultiSelectionWrapper>
+            {() => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={() => null}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)
+export const A0000000001LoadingErrorAutoexpand = () => (
+    <CustomDataProvider data={dataProviderDataWithError}>
+        <StatefulMultiSelectionWrapper>
+            {() => (
+                <OrganisationUnitTree
+                    autoExpandLoadingError
+                    roots="A0000000000"
+                    onChange={() => null}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/expanded.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    createDecoratorCustomDataProvider,
+    createDecoratorStatefulMultiSelection,
+} from './common.js'
+
+const decorators = [
+    createDecoratorStatefulMultiSelection(),
+    createDecoratorCustomDataProvider(),
+]
+
+export const NoInitiallyExpandedPaths = (_, { onChange, selected }) => (
+    <OrganisationUnitTree
+        roots="A0000000000"
+        selected={selected}
+        onChange={onChange}
+    />
+)
+
+NoInitiallyExpandedPaths.decorators = decorators
+
+export const InitiallyExpandedPaths = (_, { onChange, selected }) => (
+    <OrganisationUnitTree
+        roots="A0000000000"
+        selected={selected}
+        onChange={onChange}
+        initiallyExpanded={['/A0000000000']}
+    />
+)
+
+InitiallyExpandedPaths.decorators = decorators
+
+export const WithRootMainAndRootSubOrgUnit = (_, { onChange, selected }) => (
+    <OrganisationUnitTree
+        roots={['A0000000000', 'A0000000001']}
+        selected={selected}
+        onChange={onChange}
+    />
+)
+
+WithRootMainAndRootSubOrgUnit.decorators = decorators

package/src/__e2e__/force_reload.js

@@ -0,0 +1,66 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React, { useState } from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    StatefulMultiSelectionWrapper,
+    dataProviderData,
+    delayResponse,
+    namespace,
+} from './common.js'
+
+const afterReloadData = {
+    organisationUnits: (...args) => {
+        const [, { id }] = args
+
+        if (id === 'A0000000000') {
+            return delayResponse(
+                1000,
+                dataProviderData.organisationUnits(...args)
+            )()
+        }
+
+        if (id === 'A0000000001') {
+            return delayResponse(
+                2200,
+                dataProviderData.organisationUnits(...args)
+            )()
+        }
+
+        return dataProviderData.organisationUnits(...args)
+    },
+}
+
+const ForceReloading_ = () => {
+    const [forceReload, setForceReload] = useState(false)
+
+    return (
+        <CustomDataProvider data={afterReloadData}>
+            <button
+                disabled={forceReload}
+                data-test="reload-all"
+                onClick={() => setForceReload(true)}
+            >
+                Force reload tree
+            </button>
+
+            <StatefulMultiSelectionWrapper>
+                {({ selected, onChange }) => (
+                    <OrganisationUnitTree
+                        roots="A0000000000"
+                        onChange={onChange}
+                        selected={selected}
+                        forceReload={forceReload}
+                        onChildrenLoaded={(data) => {
+                            if (data.A0000000000) {
+                                setForceReload(false)
+                            }
+                        }}
+                    />
+                )}
+            </StatefulMultiSelectionWrapper>
+        </CustomDataProvider>
+    )
+}
+
+export default { title: namespace }
+export const ForceReloading = () => <ForceReloading_ />

package/src/__e2e__/get-organisation-unit-data.js

@@ -0,0 +1,119 @@
+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',
+                    displayName: 'Org Unit 2',
+                },
+                {
+                    id: 'A0000000002',
+                    path: '/A0000000000/A0000000002',
+                    displayName: 'Org Unit 3',
+                },
+                {
+                    id: 'A0000000006',
+                    path: '/A0000000000/A0000000006',
+                    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
+}

package/src/__e2e__/highlight.js

@@ -0,0 +1,23 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    StatefulMultiSelectionWrapper,
+    dataProviderData,
+    namespace,
+} from './common.js'
+
+export default { title: namespace }
+export const RootHighlighted = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={onChange}
+                    highlighted={['/A0000000000']}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/loading_state.js

@@ -0,0 +1,37 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    StatefulMultiSelectionWrapper,
+    dataProviderData,
+    delayResponse,
+} from './common.js'
+
+const data = {
+    organisationUnits: (...args) => {
+        const [, { id }] = args
+
+        if (id === 'A0000000000') {
+            return dataProviderData.organisationUnits(...args)
+        }
+
+        if (id === 'A0000000001') {
+            return delayResponse(
+                1000,
+                dataProviderData.organisationUnits(...args)
+            )()
+        }
+
+        return Promise.resolve({})
+    },
+}
+
+export const A0000000001Loading = () => (
+    <CustomDataProvider data={data}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree roots="A0000000000" onChange={onChange} />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/multi_selection.js

@@ -0,0 +1,24 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+window.selection = []
+
+export const MultipleSelection = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper
+            onSelectionChange={(newSelection) =>
+                (window.selection = newSelection)
+            }
+        >
+            {({ selected, onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={onChange}
+                    selected={selected}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/namespace.js

@@ -0,0 +1 @@
+export const namespace = 'OrganisationUnitTree'

package/src/__e2e__/no_selection.js

@@ -0,0 +1,32 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+export const NoSelectionClosed = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree
+                    disableSelection
+                    roots="A0000000000"
+                    onChange={onChange}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)
+export const NoSelectionRootOpened = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree
+                    disableSelection
+                    roots="A0000000000"
+                    onChange={onChange}
+                    initiallyExpanded={['/A0000000000']}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/path_based_filtering.js

@@ -0,0 +1,49 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+window.allUnits = []
+for (let i = 0; i < 7; ++i) {
+    window.allUnits.push(`A000000000${i}`)
+}
+
+export const FilteredBy3LevelPath = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={onChange}
+                    initiallyExpanded={[
+                        '/A0000000000',
+                        '/A0000000000/A0000000001',
+                        '/A0000000000/A0000000002',
+                    ]}
+                    filter={['/A0000000000/A0000000001/A0000000003']}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)
+export const FilteredBy3LevelPathAnd2LevelPath = () => (
+    <CustomDataProvider data={dataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    onChange={onChange}
+                    initiallyExpanded={[
+                        '/A0000000000',
+                        '/A0000000000/A0000000001',
+                        '/A0000000000/A0000000002',
+                    ]}
+                    filter={[
+                        '/A0000000000/A0000000001/A0000000003',
+                        '/A0000000000/A0000000002',
+                    ]}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)