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

package/src/__e2e__/single_selection.js

@@ -0,0 +1,46 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+const data = {
+    organisationUnits: (...args) => {
+        const [, { id }] = args
+
+        if (id === 'A0000000000') {
+            return dataProviderData
+                .organisationUnits(...args)
+                .then((response) => ({
+                    ...response,
+                    children: [],
+                }))
+        }
+
+        if (id === 'A0000000001') {
+            return dataProviderData
+                .organisationUnits(...args)
+                .then((response) => ({
+                    ...response,
+                    path: '/A0000000001',
+                    children: [],
+                }))
+        }
+
+        return Promise.resolve({})
+    },
+}
+
+export const SingleSelection = () => (
+    <CustomDataProvider data={data}>
+        <StatefulMultiSelectionWrapper>
+            {({ selected, onChange }) => (
+                <OrganisationUnitTree
+                    singleSelection
+                    roots={['A0000000000', 'A0000000001']}
+                    onChange={onChange}
+                    selected={selected}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__e2e__/sub_unit_as_root.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    createDecoratorCustomDataProvider,
+    createDecoratorStatefulMultiSelection,
+} from './common.js'
+
+export const MultipleRootSubAndOneMainOrgUnit = (_, { selected, onChange }) => {
+    const [filter, setFilter] = useState('')
+
+    return (
+        <>
+            <input type="input" onChange={(e) => setFilter(e.target.value)} />
+
+            <OrganisationUnitTree
+                filter={filter ? filter.split(',') : []}
+                onChange={onChange}
+                selected={selected}
+                roots={['A0000000000', 'A0000000001', 'A0000000002']}
+            />
+        </>
+    )
+}
+
+MultipleRootSubAndOneMainOrgUnit.decorators = [
+    createDecoratorStatefulMultiSelection(),
+    createDecoratorCustomDataProvider(),
+]

package/src/__e2e__/tree_api.js

@@ -0,0 +1,55 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { StatefulMultiSelectionWrapper, dataProviderData } from './common.js'
+
+const customizedDataProviderData = {
+    organisationUnits: (...args) => {
+        const [, { id, params }] = args
+        const { fields } = params
+
+        if (id === 'A0000000000') {
+            return dataProviderData.organisationUnits(...args).then((data) => ({
+                ...data,
+                children: fields.includes('children::size')
+                    ? 1
+                    : data.children?.slice(0, 1),
+            }))
+        }
+
+        if (id === 'A0000000001') {
+            return dataProviderData.organisationUnits(...args).then((data) => ({
+                ...data,
+                path: '/A0000000001',
+                children: fields.includes('children::size') ? 0 : [],
+            }))
+        }
+
+        return Promise.resolve({})
+    },
+}
+
+window.onChange = window.Cypress && window.Cypress.cy.stub()
+window.onCollapse = window.Cypress && window.Cypress.cy.stub()
+window.onExpand = window.Cypress && window.Cypress.cy.stub()
+window.onChildrenLoaded = window.Cypress && window.Cypress.cy.stub()
+
+export const Events = () => (
+    <CustomDataProvider data={customizedDataProviderData}>
+        <StatefulMultiSelectionWrapper>
+            {({ selected, onChange }) => (
+                <OrganisationUnitTree
+                    roots="A0000000000"
+                    selected={selected}
+                    onChange={(...args) => {
+                        onChange(...args)
+                        window.onChange(...args)
+                    }}
+                    onExpand={window.onExpand}
+                    onCollapse={window.onCollapse}
+                    onChildrenLoaded={window.onChildrenLoaded}
+                />
+            )}
+        </StatefulMultiSelectionWrapper>
+    </CustomDataProvider>
+)

package/src/__stories__/collapsed.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const Collapsed = () => (
+    <OrganisationUnitTree
+        onChange={onChange}
+        name={'Root org unit'}
+        roots={['A0000000000']}
+    />
+)

package/src/__stories__/custom-expanded-imperative-open.js

@@ -0,0 +1,181 @@
+import { Button } from '@dhis2-ui/button'
+import React, { useState } from 'react'
+import { OrganisationUnitTree, getAllExpandedOrgUnitPaths } from '../index.js'
+import { onChange } from './shared.js'
+
+export const CustomExpandedImperativeOpen = () => {
+    const orgUnit2Path = '/A0000000000/A0000000001'
+    const initiallyExpanded = getAllExpandedOrgUnitPaths([])
+
+    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,
+                orgUnit2Path,
+            ])
+
+            return setExpanded(nextPaths)
+        }
+
+        setExpanded(expanded.filter((v) => v !== '/A0000000000/A0000000001'))
+    }
+
+    return (
+        <>
+            <OrganisationUnitTree
+                onChange={onChange}
+                name="Root org unit"
+                roots={['A0000000000']}
+                expanded={expanded}
+                handleExpand={handleExpand}
+                handleCollapse={handleCollapse}
+            />
+            <br />
+            <Button onClick={imperativeToggle}>Toggle Org Unit 2</Button>
+        </>
+    )
+}
+
+// Do we need this story?
+// export const CustomExpandedKeepUserExpanded = () => {
+//     /**
+//      * @param {string} path
+//      * @returns {string[]}
+//      */
+//     const extractAllPathsFromPath = path => {
+//         // remove leading slash and split by path delimiter/slashes
+//         const segments = path.replace(/^\//, '').split('/')
+//
+//         const withSubPaths = segments.map((segment, index) => {
+//             // take all segments from 0 to index and join them with the delimiter
+//             return `/${segments.slice(0, index + 1).join('/')}`
+//         })
+//
+//         return withSubPaths
+//     }
+//
+//     /**
+//      * @param {string[]} initiallyExpanded
+//      * @returns {string[]}
+//      */
+//     const getInitiallyExpandedPaths = paths =>
+//         paths.reduce((all, curPath) => {
+//             const allPathsInCurPath = extractAllPathsFromPath(curPath)
+//             return [...all, ...allPathsInCurPath]
+//         }, [])
+//
+//     const [useOriginal, setUseOriginal] = useState(true)
+//     const initiallyExpanded = getInitiallyExpandedPaths(
+//         ['/A0000000000/A0000000001']
+//     )
+//     const alternativeInitiallyExpanded = getInitiallyExpandedPaths(
+//         ['/A0000000000']
+//     )
+//
+//     const [expandedConfig, setExpandedConfig] = useState(
+//         () => initiallyExpanded.map(path => ({
+//             userExpanded: false,
+//             path,
+//         }))
+//     )
+//
+//     const expanded = useMemo(
+//         () => expandedConfig.map(({ path }) => path),
+//         [expandedConfig]
+//     )
+//
+//     const switchAutomaticallyExpended = () => {
+//         // Necessary due to the nature of the async state setter of the hook
+//         const nextUseOriginal = !useOriginal
+//         const allUserExpandedPaths = getInitiallyExpandedPaths(
+//             expandedConfig
+//                 .filter(({ userExpanded }) => userExpanded)
+//                 .map(({ path }) => path)
+//         )
+//
+//         const allUserExpanded = allUserExpandedPaths.map(path => ({
+//             userExpanded: true,
+//             path,
+//         }))
+//
+//         const actualInitiallyExpended = nextUseOriginal ? initiallyExpanded : alternativeInitiallyExpanded
+//         const missingInitiallyExpanded = actualInitiallyExpended.filter(path => {
+//             return !allUserExpandedPaths.find(curPath => curPath.includes(path))
+//         })
+//
+//         const nextExpandedConfig = [
+//             ...allUserExpanded,
+//             ...missingInitiallyExpanded.map(path => ({
+//                 userExpanded: false,
+//                 path,
+//             }))
+//         ]
+//
+//         setExpandedConfig(nextExpandedConfig)
+//         setUseOriginal(nextUseOriginal)
+//     }
+//
+//     const handleExpand = ({ path }) => {
+//         if (!expandedConfig.find(config => config.path === path)) {
+//             setExpandedConfig([...expandedConfig, { userExpanded: true, path }])
+//         }
+//     }
+//
+//     const handleCollapse = ({ path }) => {
+//         const pathIndex = expandedConfig.findIndex(config => config.path === path)
+//
+//         if (pathIndex !== -1) {
+//             const updatedExpandedConfig =
+//                 pathIndex === 0
+//                     ? expandedConfig.slice(1)
+//                     : [
+//                           ...expandedConfig.slice(0, pathIndex),
+//                           ...expandedConfig.slice(pathIndex + 1),
+//                       ]
+//
+//             setExpandedConfig(updatedExpandedConfig)
+//         }
+//     }
+//
+//     return (
+//         <>
+//             <OrganisationUnitTree
+//                 onChange={onChange}
+//                 name="Root org unit"
+//                 roots={['A0000000000']}
+//                 expanded={expanded}
+//                 handleExpand={handleExpand}
+//                 handleCollapse={handleCollapse}
+//             />
+//             <br />
+//             <Button onClick={switchAutomaticallyExpended}>
+//                 Switch automatically expanded
+//             </Button>
+//         </>
+//     )
+// }

package/src/__stories__/custom-node-label.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const CustomNodeLabel = () => (
+    <OrganisationUnitTree
+        name="Root org unit"
+        roots="A0000000000"
+        initiallyExpanded={['/A0000000000/A0000000001']}
+        renderNodeLabel={({ label, node }) => {
+            if (node.path !== '/A0000000000/A0000000001') {
+                return label
+            }
+
+            return <span>--- {label}</span>
+        }}
+        onChange={onChange}
+    />
+)

package/src/__stories__/development-stories.js

@@ -0,0 +1,86 @@
+import { DataProvider } from '@dhis2/app-runtime'
+import React, { useState } from 'react'
+import { OrganisationUnitTree } from '../index.js'
+
+const DX_onChange =
+    (selected, setSelected, singleSelection) =>
+    ({ id, path, checked }) => {
+        console.log('onChange', { path, id, checked })
+        const pathIndex = selected.indexOf(path)
+
+        let nextSelected
+
+        if (checked) {
+            nextSelected = singleSelection ? [path] : [...selected, path]
+        } else {
+            nextSelected = singleSelection
+                ? []
+                : [
+                      ...selected.slice(0, pathIndex),
+                      ...selected.slice(pathIndex + 1),
+                  ]
+        }
+
+        console.log('> nextSelected', nextSelected)
+        setSelected(nextSelected)
+    }
+
+const Wrapper = (props) => {
+    const [selected, setSelected] = useState([])
+
+    return (
+        <OrganisationUnitTree
+            name="Root org unit"
+            roots={['A0000000000']}
+            selected={selected}
+            onChange={DX_onChange(selected, setSelected, props.singleSelection)}
+            initiallyExpanded={['A0000000001/A0000000002']}
+            {...props}
+        />
+    )
+}
+
+export const DxMultiSelection = () => <Wrapper />
+DxMultiSelection.storyName = 'DX: Multi selection'
+
+export const DxSingleSelection = () => <Wrapper singleSelection />
+DxSingleSelection.storyName = 'DX: Single selection'
+
+export const DxNoSelection = () => <Wrapper disableSelection />
+DxNoSelection.storyName = 'DX: No selection'
+
+export const DxWithRealBackend = () => (
+    <div>
+        <div style={{ marginBottom: 20, lineHeight: '28px' }}>
+            <b>
+                This story doesn&apos;t work on netlify for some reason, just
+                run it locally.
+            </b>
+            <br />
+            You need to log in to{' '}
+            <a
+                href="https://debug.dhis2.org/dev"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                https://debug.dhis2.org/dev
+            </a>
+            <br />
+            Make sure the{' '}
+            <code style={{ background: '#ccc' }}>localhost:[PORT]</code> is part
+            of the accepted list:{' '}
+            <a
+                href="https://debug.dhis2.org/dev/dhis-web-settings/#/access"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                Settings app / Access
+            </a>
+        </div>
+        <DataProvider baseUrl="https://debug.dhis2.org/dev" apiVersion="">
+            <Wrapper roots={['ImspTQPwCqd', 'O6uvpzGd5pu', 'fdc6uOvgoji']} />
+        </DataProvider>
+    </div>
+)
+
+DxWithRealBackend.storyName = 'DX: With real backend'

package/src/__stories__/expanded.js

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

package/src/__stories__/filtered-root.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const FilteredRoot = () => (
+    <OrganisationUnitTree
+        onChange={onChange}
+        name="Root org unit"
+        roots={['A0000000000', 'A0000000001']}
+        initiallyExpanded={['/A0000000000/A0000000001']}
+        filter={['/A0000000000']}
+    />
+)
+
+FilteredRoot.storyName = 'Filtered (root)'

package/src/__stories__/filtered.js

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

package/src/__stories__/force-reload-all.js

@@ -0,0 +1,46 @@
+import { Button } from '@dhis2/ui'
+import React, { useState } from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { onChange } from './shared.js'
+
+export const ForceReloadAll = () => {
+    const [forceReload, _setForceReload] = useState(false)
+    const setForceReload = (v) =>
+        console.log('setForceReload', v) || _setForceReload(v)
+
+    return (
+        <>
+            <Button disabled={forceReload} onClick={() => setForceReload(true)}>
+                Reload org unit tree
+            </Button>{' '}
+            <span>(Force reload: {forceReload ? 'true' : 'false'})</span>
+            <div>
+                <OrganisationUnitTree
+                    onChange={onChange}
+                    forceReload={forceReload}
+                    name="Root org unit"
+                    roots={['A0000000000']}
+                    initiallyExpanded={['/A0000000000/A0000000001']}
+                    selected={['/A0000000000/A0000000001/A0000000003']}
+                    onChildrenLoaded={(data) => {
+                        const { id } = data
+                        if (id === 'A0000000000') {
+                            setForceReload(false)
+                        }
+                    }}
+                />
+            </div>
+            <style jsx>{`
+                div {
+                    width: 400px;
+                    border: 1px solid black;
+                    margin-top: 32px;
+                    padding: 16px;
+                    min-height: 200px;
+                }
+            `}</style>
+        </>
+    )
+}
+
+ForceReloadAll.storyName = 'Force reload all'

package/src/__stories__/force-reload-one-unit.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+export const ForceReloadOneUnit = () => {
+    return (
+        <p>
+            This is currently not working due to limitations of the data engine
+            in the app runtime.
+        </p>
+    )
+
+    //const [idsThatShouldBeReloaded, setIdsThatShouldBeReloaded] = useState([])
+
+    //useEffect(() => {
+    //    setTimeout(() => setIdsThatShouldBeReloaded(['A0000000001']), delay)
+    //}, [])
+
+    //return (
+    //    <OrganisationUnitTree
+    //        onChange={onChange}
+    //        idsThatShouldBeReloaded={idsThatShouldBeReloaded}
+    //        name="Root org unit"
+    //        roots={['A0000000000']}
+    //        initiallyExpanded={['/A0000000000', '/A0000000000/A0000000001']}
+    //        selected={['/A0000000000/A0000000001/A0000000003']}
+    //        onChildrenLoaded={({ path, forced }) =>
+    //            console.log(
+    //                `Unit with path "${path}" loaded, was forced: ${
+    //                    forced ? 'yes' : 'no'
+    //                }`
+    //            )
+    //        }
+    //    />
+    //)
+}
+
+ForceReloadOneUnit.storyName = 'Force reload one unit'

package/src/__stories__/highlighted.js

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

package/src/__stories__/indeterminate.js

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

package/src/__stories__/loading-error-grandchild.js

@@ -0,0 +1,39 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import {
+    customData,
+    onChange,
+    onExpand,
+    onCollapse,
+    onChildrenLoaded,
+} from './shared.js'
+
+export const LoadingErrorGrandchild = () => (
+    <CustomDataProvider
+        data={{
+            ...customData,
+            organisationUnits: (...args) => {
+                const [, { id }] = args
+                if (id === 'A0000000003') {
+                    return Promise.reject('Loading org unit 4 and 5 failed')
+                }
+
+                return customData.organisationUnits(...args)
+            },
+        }}
+    >
+        <OrganisationUnitTree
+            autoExpandLoadingError
+            name="Root org unit"
+            roots={['A0000000000']}
+            onChange={onChange}
+            onExpand={onExpand}
+            onCollapse={onCollapse}
+            onChildrenLoaded={onChildrenLoaded}
+            initiallyExpanded={['/A0000000000/A0000000001']}
+        />
+    </CustomDataProvider>
+)
+
+LoadingErrorGrandchild.storyName = 'Loading error grandchild'

package/src/__stories__/loading.js

@@ -0,0 +1,27 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { OrganisationUnitTree } from '../index.js'
+import { customData, onChange } from './shared.js'
+
+export const Loading = () => (
+    <CustomDataProvider
+        data={{
+            ...customData,
+            organisationUnits: (...args) => {
+                const [, { id }] = args
+                if (id === 'A0000000001') {
+                    return new Promise(() => null)
+                }
+
+                return customData.organisationUnits(...args)
+            },
+        }}
+    >
+        <OrganisationUnitTree
+            onChange={onChange}
+            name="Root org unit"
+            roots={['A0000000000']}
+            initiallyExpanded={['/A0000000000/A0000000001']}
+        />
+    </CustomDataProvider>
+)

package/src/__stories__/multiple-roots.js

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