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

package/src/organisation-unit-tree/use-root-org-data/use-root-org-data.js

@@ -0,0 +1,60 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+import { useMemo } from 'react'
+import { patchMissingDisplayName } from './patch-missing-display-name.js'
+
+export const createRootQuery = (ids, displayProperty) =>
+    ids.reduce(
+        (query, id) => ({
+            ...query,
+            [id]: {
+                id,
+                resource: `organisationUnits`,
+                params: ({ isUserDataViewFallback }) => ({
+                    isUserDataViewFallback,
+                    fields: [
+                        displayProperty === 'displayName'
+                            ? 'displayName'
+                            : `${displayProperty}~rename(displayName)`,
+                        'path',
+                        'id',
+                    ],
+                }),
+            },
+        }),
+        {}
+    )
+
+/**
+ * @param {string[]} ids
+ * @param {Object} [options]
+ * @param {boolean} [options.withChildren]
+ * @param {boolean} [options.isUserDataViewFallback]
+ * @param {'displayName'|'displayShortName'} [options.displayProperty]
+ * @returns {Object}
+ */
+export const useRootOrgData = (
+    ids,
+    { isUserDataViewFallback, displayProperty = 'displayName' } = {}
+) => {
+    const query = useMemo(
+        () => createRootQuery(ids, displayProperty),
+        [ids, displayProperty]
+    )
+    const variables = { isUserDataViewFallback }
+    const rootOrgUnits = useDataQuery(query, {
+        variables,
+    })
+    const { called, loading, error, data, refetch } = rootOrgUnits
+
+    const patchedData = useMemo(() => {
+        return data ? patchMissingDisplayName(data) : data
+    }, [data])
+
+    return {
+        called,
+        loading,
+        error: error || null,
+        data: patchedData || null,
+        refetch,
+    }
+}

package/src/organisation-unit-tree/use-root-org-data/use-root-org-unit.test.js

@@ -0,0 +1,184 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import { renderHook, waitFor } from '@testing-library/react'
+import React from 'react'
+import { useRootOrgData } from './use-root-org-data.js'
+
+describe('OrganisationUnitTree - useRootOrgData', () => {
+    // @TODO: Figure out why this is necessary at all...
+    const origError = console.error
+    jest.spyOn(console, 'error').mockImplementation((...args) => {
+        const [err] = args
+
+        if (!err.toString().match(/^Warning: An update to/)) {
+            origError(...args)
+        }
+    })
+
+    // @TODO: This is kind of necessary; no idea if we can get rid of this
+    const origWarn = console.warn
+    const dynamicQueryWarningMsg =
+        "The query should be static, don't create it within the render loop!"
+    jest.spyOn(console, 'warn').mockImplementation((...args) => {
+        const [err] = args
+
+        if (!err.toString().match(dynamicQueryWarningMsg)) {
+            origWarn(...args)
+        }
+    })
+
+    afterAll(() => {
+        console.error.mockRestore()
+        console.warn.mockRestore()
+    })
+
+    const dataProviderData = {
+        organisationUnits: jest.fn(() => {
+            return {
+                id: 'A0000000000',
+                path: '/A0000000000',
+                displayName: 'Org Unit 1',
+            }
+        }),
+    }
+
+    const wrapper = ({ children }) => (
+        <CustomDataProvider data={dataProviderData}>
+            {children}
+        </CustomDataProvider>
+    )
+
+    it('should respond with `loading: false`, `error: null` and `data: null` initially', () => {
+        const { result } = renderHook(() => useRootOrgData(['A0000000000']), {
+            wrapper,
+        })
+
+        expect(result.current).toEqual(
+            expect.objectContaining({
+                loading: true,
+                error: null,
+                data: null,
+            })
+        )
+        expect(result.current.refetch).toBeInstanceOf(Function)
+    })
+
+    it('should provide the org unit data', async () => {
+        const { result } = renderHook(() => useRootOrgData(['A0000000000']), {
+            wrapper,
+        })
+
+        await waitFor(() => {})
+
+        expect(result.current).toEqual(
+            expect.objectContaining({
+                loading: false,
+                error: null,
+                data: {
+                    A0000000000: {
+                        id: 'A0000000000',
+                        path: '/A0000000000',
+                        displayName: 'Org Unit 1',
+                    },
+                },
+            })
+        )
+    })
+
+    it('should provide the error', async () => {
+        const errorWrapper = ({ children }) => (
+            <CustomDataProvider
+                data={{
+                    organisationUnits: async () => {
+                        throw new Error('Error message')
+                    },
+                }}
+            >
+                {children}
+            </CustomDataProvider>
+        )
+
+        const { result } = renderHook(() => useRootOrgData(['A0000000000']), {
+            wrapper: errorWrapper,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual(
+                expect.objectContaining({
+                    loading: false,
+                    error: new Error('Error message'),
+                    data: null,
+                })
+            )
+        })
+    })
+
+    it('should send the "isUserDataViewFallback" parameter with value "undefined"', async () => {
+        renderHook(() => useRootOrgData(['A0000000000']), { wrapper })
+
+        await waitFor(() => {})
+
+        expect(dataProviderData.organisationUnits).toHaveBeenCalledWith(
+            'read',
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    isUserDataViewFallback: undefined,
+                }),
+            }),
+            expect.objectContaining({}) // contains the `signal`
+        )
+    })
+
+    it('should send the "isUserDataViewFallback" parameter with value "true"', async () => {
+        const options = { isUserDataViewFallback: true }
+        renderHook(() => useRootOrgData(['A0000000000'], options), { wrapper })
+
+        await waitFor(() => {})
+
+        expect(dataProviderData.organisationUnits).toHaveBeenCalledWith(
+            'read',
+            expect.objectContaining({
+                params: expect.objectContaining({
+                    isUserDataViewFallback: true,
+                }),
+            }),
+            expect.objectContaining({}) // contains the `signal`
+        )
+    })
+
+    it('should patch the display name if it is missing', async () => {
+        const dataProviderDataWithoutDisplayName = {
+            organisationUnits: jest.fn(() => {
+                return {
+                    id: 'A0000000000',
+                    path: '/A0000000000',
+                }
+            }),
+        }
+
+        const wrapperWithoutDisplayName = ({ children }) => (
+            <CustomDataProvider data={dataProviderDataWithoutDisplayName}>
+                {children}
+            </CustomDataProvider>
+        )
+
+        const { result } = renderHook(() => useRootOrgData(['A0000000000']), {
+            wrapper: wrapperWithoutDisplayName,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual(
+                expect.objectContaining({
+                    loading: false,
+                    error: null,
+                    data: {
+                        A0000000000: {
+                            id: 'A0000000000',
+                            path: '/A0000000000',
+                            displayName: '',
+                        },
+                    },
+                })
+            )
+        })
+    })
+})

package/src/organisation-unit-tree.e2e.stories.js

@@ -0,0 +1,28 @@
+export default { title: 'OrganisationUnitTree' }
+
+export { ClosedWithChildren } from './__e2e__/children_as_child_nodes.js'
+export { Controlled, MissingProps } from './__e2e__/controlled_expanded.js'
+export {
+    A0000000001LoadingError,
+    A0000000001LoadingErrorAutoexpand,
+} from './__e2e__/displaying_loading_error.js'
+export {
+    NoInitiallyExpandedPaths,
+    InitiallyExpandedPaths,
+    WithRootMainAndRootSubOrgUnit,
+} from './__e2e__/expanded.js'
+export { ForceReloading } from './__e2e__/force_reload.js'
+export { RootHighlighted } from './__e2e__/highlight.js'
+export { A0000000001Loading } from './__e2e__/loading_state.js'
+export { MultipleSelection } from './__e2e__/multi_selection.js'
+export {
+    NoSelectionClosed,
+    NoSelectionRootOpened,
+} from './__e2e__/no_selection.js'
+export {
+    FilteredBy3LevelPath,
+    FilteredBy3LevelPathAnd2LevelPath,
+} from './__e2e__/path_based_filtering.js'
+export { SingleSelection } from './__e2e__/single_selection.js'
+export { MultipleRootSubAndOneMainOrgUnit } from './__e2e__/sub_unit_as_root.js'
+export { Events } from './__e2e__/tree_api.js'

package/src/organisation-unit-tree.prod.stories.js

@@ -0,0 +1,70 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import React from 'react'
+import { customData } from './__stories__/shared.js'
+import { OrganisationUnitTree } from './index.js'
+
+const subtitle =
+    'Display, manipulate and select organization units displayed in a hierarchical tree'
+
+const description = `
+This is a complex, controlled component. It needs access to an App Runtime data provider to fetch org unit data.
+
+Several props require arrays of org. unit paths (referred to as \`orgUnitPathPropType[]\` in the table below). Take a look at the \`initiallyExpanded\` and \`filter\` props in the example to see an example of the paths format.
+
+Example:
+
+\`\`\`js
+import { OrganisationUnitTree } from '@dhis2/ui'
+
+const orgUnitTree = (
+    <OrganisationUnitTree
+        name="Root org unit"
+        roots="A0000000000"
+        onChange={onChange}
+        onExpand={onExpand}
+        onCollapse={onCollapse}
+        onChildrenLoaded={onChildrenLoaded}
+        // Notice the format of the org unit paths
+        initiallyExpanded={['/A0000000000/A0000000001']}
+        filter={['/A0000000000/A0000000001/A0000000003']}
+    />
+)
+\`\`\`
+
+`
+
+export default {
+    title: 'Organisation Unit Tree',
+    component: OrganisationUnitTree,
+    decorators: [
+        (fn) => (
+            <CustomDataProvider data={customData}>{fn()}</CustomDataProvider>
+        ),
+    ],
+    parameters: {
+        componentSubtitle: subtitle,
+        docs: { description: { component: description } },
+    },
+}
+
+export { Collapsed } from './__stories__/collapsed.js'
+export { Expanded } from './__stories__/expanded.js'
+export { CustomExpandedImperativeOpen } from './__stories__/custom-expanded-imperative-open.js'
+export { MultipleRoots } from './__stories__/multiple-roots.js'
+export { CustomNodeLabel } from './__stories__/custom-node-label.js'
+export { FilteredRoot } from './__stories__/filtered-root.js'
+export { Filtered } from './__stories__/filtered.js'
+export { SelectedMultiple } from './__stories__/selected-multiple.js'
+export { Indeterminate } from './__stories__/indeterminate.js'
+export { SingleSelection } from './__stories__/single-selection.js'
+export { NoSelection } from './__stories__/no-selection.js'
+export { Highlighted } from './__stories__/highlighted.js'
+export { ForceReloadAll } from './__stories__/force-reload-all.js'
+export { ForceReloadOneUnit } from './__stories__/force-reload-one-unit.js'
+export { ReplaceRoots } from './__stories__/replace-roots.js'
+export { Loading } from './__stories__/loading.js'
+export { RootLoading } from './__stories__/root-loading.js'
+export { RootError } from './__stories__/root-error.js'
+export { LoadingErrorGrandchild } from './__stories__/loading-error-grandchild.js'
+export { RTL } from './__stories__/rtl.js'
+export * from './__stories__/development-stories.js'

package/src/prop-types.js

@@ -0,0 +1,33 @@
+/* eslint-disable max-params */
+
+const UNIT_ID_PATTERN = '[a-zA-Z][a-zA-Z0-9]{10}'
+const orgUnitIdRegExp = new RegExp(`^${UNIT_ID_PATTERN}$`)
+const orgUnitPathRegExp = new RegExp(`(/${UNIT_ID_PATTERN})+`)
+
+export const orgUnitPathPropType = (
+    propValue,
+    key,
+    compName,
+    location,
+    propFullName
+) => {
+    if (!orgUnitPathRegExp.test(propValue[key])) {
+        return new Error(
+            `Invalid org unit path \`${propValue[key]}\` supplied to \`${compName}.${propFullName}\``
+        )
+    }
+}
+
+export const orgUnitIdPropType = (
+    propValue,
+    key,
+    compName,
+    location,
+    propFullName
+) => {
+    if (!orgUnitIdRegExp.test(propValue[key])) {
+        return new Error(
+            `Invalid org unit id \`${propValue[key]}\` supplied to \`${compName}.${propFullName}\``
+        )
+    }
+}