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

package/src/organisation-unit-node/use-org-children.test.js

@@ -0,0 +1,314 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import { renderHook, waitFor } from '@testing-library/react'
+import React from 'react'
+import { useOrgChildren } from './use-org-children.js'
+
+describe('OrganisationUnitTree - useOrgChildren', () => {
+    const dataProviderData = {
+        organisationUnits: jest.fn((type, { id }) => {
+            if (id === 'A0000000000') {
+                return {
+                    children: [
+                        {
+                            id: 'A0000000001',
+                            path: '/A0000000000/A0000000001',
+                            children: [],
+                            displayName: 'Org Unit 2',
+                        },
+                    ],
+                }
+            }
+
+            return Promise.reject(`No org unit with id "${id}"`)
+        }),
+    }
+
+    const wrapper = ({ children }) => (
+        <CustomDataProvider data={dataProviderData}>
+            {children}
+        </CustomDataProvider>
+    )
+
+    const node = {
+        id: 'A0000000000',
+        path: '/A0000000000',
+        displayName: 'Org Unit 1',
+        children: 1,
+    }
+
+    it('should respond with `loading: true`, `error: null` and `data: null` initially', async () => {
+        const { result } = renderHook(() => useOrgChildren({ node }), {
+            wrapper,
+        })
+
+        expect(result.current).toEqual({
+            called: true,
+            loading: true,
+            error: null,
+            data: undefined,
+        })
+
+        // Prevent the following error log with
+        // "Warning: An update to TestComponent inside a test was not wrapped
+        // in act(...)."
+        await waitFor(() => {})
+    })
+
+    it('should provide the org unit data', async () => {
+        const { result } = renderHook(() => useOrgChildren({ node }), {
+            wrapper,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                called: true,
+                loading: false,
+                error: null,
+                data: [
+                    {
+                        id: 'A0000000001',
+                        path: '/A0000000000/A0000000001',
+                        children: [],
+                        displayName: 'Org Unit 2',
+                    },
+                ],
+            })
+        })
+    })
+
+    it('should provide the error', async () => {
+        const errorWrapper = ({ children }) => (
+            <CustomDataProvider
+                data={{
+                    organisationUnits: async () => {
+                        throw new Error('Error message')
+                    },
+                }}
+            >
+                {children}
+            </CustomDataProvider>
+        )
+
+        const { result } = renderHook(() => useOrgChildren({ node }), {
+            wrapper: errorWrapper,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                called: true,
+                loading: false,
+                error: new Error('Error message'),
+                data: undefined,
+            })
+        })
+    })
+
+    it('should call the onComplete callback', async () => {
+        const onComplete = jest.fn()
+        const options = { onComplete, node }
+
+        renderHook(() => useOrgChildren(options), { wrapper })
+
+        await waitFor(() => {
+            expect(onComplete).toHaveBeenCalledWith({
+                id: 'A0000000000',
+                path: '/A0000000000',
+                displayName: 'Org Unit 1',
+                children: [
+                    {
+                        id: 'A0000000001',
+                        path: '/A0000000000/A0000000001',
+                        children: [],
+                        displayName: 'Org Unit 2',
+                    },
+                ],
+            })
+        })
+    })
+
+    it("should sort the node's children alphabetically by default", async () => {
+        const dataProviderDataWithUnsortedChildren = {
+            organisationUnits: jest.fn((type, { id }) => {
+                if (id === 'A0000000000') {
+                    return {
+                        children: [
+                            {
+                                id: 'A0000000002',
+                                path: '/A0000000000/A0000000002',
+                                children: [],
+                                displayName: 'Org Unit 3',
+                            },
+                            {
+                                id: 'A0000000001',
+                                path: '/A0000000000/A0000000001',
+                                children: [],
+                                displayName: 'Org Unit 2',
+                            },
+                        ],
+                    }
+                }
+
+                return Promise.reject(`No org unit with id "${id}"`)
+            }),
+        }
+
+        const wrapperWithUnsortedChildren = ({ children }) => (
+            <CustomDataProvider data={dataProviderDataWithUnsortedChildren}>
+                {children}
+            </CustomDataProvider>
+        )
+
+        const { result } = renderHook(
+            () => useOrgChildren({ node: { ...node, children: 2 } }),
+            { wrapper: wrapperWithUnsortedChildren }
+        )
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                called: true,
+                loading: false,
+                error: null,
+                data: [
+                    {
+                        id: 'A0000000001',
+                        path: '/A0000000000/A0000000001',
+                        children: [],
+                        displayName: 'Org Unit 2',
+                    },
+                    {
+                        id: 'A0000000002',
+                        path: '/A0000000000/A0000000002',
+                        children: [],
+                        displayName: 'Org Unit 3',
+                    },
+                ],
+            })
+        })
+    })
+
+    it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
+        const dataProviderDataWithUnsortedChildren = {
+            organisationUnits: jest.fn((type, { id }) => {
+                if (id === 'A0000000000') {
+                    return {
+                        children: [
+                            {
+                                id: 'A0000000002',
+                                path: '/A0000000000/A0000000002',
+                                children: [],
+                                displayName: 'Org Unit 3',
+                            },
+                            {
+                                id: 'A0000000001',
+                                path: '/A0000000000/A0000000001',
+                                children: [],
+                                displayName: 'Org Unit 2',
+                            },
+                        ],
+                    }
+                }
+
+                return Promise.reject(`No org unit with id "${id}"`)
+            }),
+        }
+
+        const wrapperWithUnsortedChildren = ({ children }) => (
+            <CustomDataProvider data={dataProviderDataWithUnsortedChildren}>
+                {children}
+            </CustomDataProvider>
+        )
+
+        const options = {
+            node: { ...node, children: 2 },
+            suppressAlphabeticalSorting: true,
+        }
+        const { result } = renderHook(() => useOrgChildren(options), {
+            wrapper: wrapperWithUnsortedChildren,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                called: true,
+                loading: false,
+                error: null,
+                data: [
+                    {
+                        id: 'A0000000002',
+                        path: '/A0000000000/A0000000002',
+                        children: [],
+                        displayName: 'Org Unit 3',
+                    },
+                    {
+                        id: 'A0000000001',
+                        path: '/A0000000000/A0000000001',
+                        children: [],
+                        displayName: 'Org Unit 2',
+                    },
+                ],
+            })
+        })
+    })
+
+    it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
+        const dataProviderDataWithUnsortedChildren = {
+            organisationUnits: jest.fn((type, { id }) => {
+                if (id === 'A0000000000') {
+                    return {
+                        children: [
+                            {
+                                id: 'A0000000002',
+                                path: '/A0000000000/A0000000002',
+                                children: [],
+                                displayName: 'Org Unit 3',
+                            },
+                            {
+                                id: 'A0000000001',
+                                path: '/A0000000000/A0000000001',
+                                children: [],
+                                displayName: 'Org Unit 2',
+                            },
+                        ],
+                    }
+                }
+
+                return Promise.reject(`No org unit with id "${id}"`)
+            }),
+        }
+
+        const wrapperWithUnsortedChildren = ({ children }) => (
+            <CustomDataProvider data={dataProviderDataWithUnsortedChildren}>
+                {children}
+            </CustomDataProvider>
+        )
+
+        const options = {
+            node: { ...node, children: 2 },
+            suppressAlphabeticalSorting: true,
+        }
+        const { result } = renderHook(() => useOrgChildren(options), {
+            wrapper: wrapperWithUnsortedChildren,
+        })
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                called: true,
+                loading: false,
+                error: null,
+                data: [
+                    {
+                        id: 'A0000000002',
+                        path: '/A0000000000/A0000000002',
+                        children: [],
+                        displayName: 'Org Unit 3',
+                    },
+                    {
+                        id: 'A0000000001',
+                        path: '/A0000000000/A0000000001',
+                        children: [],
+                        displayName: 'Org Unit 2',
+                    },
+                ],
+            })
+        })
+    })
+})

package/src/organisation-unit-node/use-org-data/index.js

@@ -0,0 +1 @@
+export { useOrgData } from './use-org-data.js'

package/src/organisation-unit-node/use-org-data/use-org-data.js

@@ -0,0 +1,40 @@
+import { useDataQuery } from '@dhis2/app-runtime'
+
+const ORG_DATA_QUERY = {
+    orgUnit: {
+        resource: `organisationUnits`,
+        id: ({ id }) => id,
+        params: ({ isUserDataViewFallback }) => ({
+            isUserDataViewFallback,
+            fields: ['path', 'children::size'],
+        }),
+    },
+}
+
+/**
+ * @param {string[]} ids
+ * @param {Object} options
+ * @param {string} options.displayName
+ * @param {bool} options.isUserDataViewFallback
+ * @returns {Object}
+ */
+export const useOrgData = (id, { displayName, isUserDataViewFallback }) => {
+    if (!displayName) {
+        throw new Error('"displayName" is required')
+    }
+
+    const variables = { id, isUserDataViewFallback }
+    const {
+        loading,
+        error,
+        data = {},
+    } = useDataQuery(ORG_DATA_QUERY, {
+        variables,
+    })
+
+    return {
+        loading,
+        error: error || null,
+        data: { id, displayName, ...data.orgUnit },
+    }
+}

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

@@ -0,0 +1,137 @@
+import { CustomDataProvider } from '@dhis2/app-runtime'
+import { renderHook, waitFor } from '@testing-library/react'
+import React from 'react'
+import { useOrgData } from './use-org-data.js'
+
+describe('OrganisationUnitTree - useOrgData', () => {
+    // @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)
+        }
+    })
+
+    afterAll(() => {
+        console.error.mockRestore()
+    })
+
+    const dataProviderData = {
+        organisationUnits: jest.fn((type, { id }) => {
+            if (id === 'A0000000000') {
+                return {
+                    id: 'A0000000000',
+                    path: '/A0000000000',
+                    displayName: 'Org Unit 1',
+                }
+            }
+
+            return Promise.reject(`No org unit with id "${id}"`)
+        }),
+    }
+
+    const wrapper = ({ children }) => (
+        <CustomDataProvider data={dataProviderData}>
+            {children}
+        </CustomDataProvider>
+    )
+
+    it('should respond with `loading: true`, `error: null` and `data: { displayName, id }` initially', () => {
+        const { result } = renderHook(
+            () => useOrgData('A0000000000', { displayName: 'Display name' }),
+            { wrapper }
+        )
+
+        expect(result.current).toEqual({
+            loading: true,
+            error: null,
+            data: { displayName: 'Display name', id: 'A0000000000' },
+        })
+    })
+
+    it('should provide the org unit data', async () => {
+        const { result } = renderHook(
+            () => useOrgData('A0000000000', { displayName: 'Display name' }),
+            { wrapper }
+        )
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                loading: false,
+                error: null,
+                data: {
+                    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(
+            () => useOrgData('A0000000000', { displayName: 'Display name' }),
+            { wrapper: errorWrapper }
+        )
+
+        await waitFor(() => {
+            expect(result.current).toEqual({
+                loading: false,
+                error: new Error('Error message'),
+                data: { displayName: 'Display name', id: 'A0000000000' },
+            })
+        })
+    })
+
+    it('should send the "isUserDataViewFallback" parameter with value "undefined"', async () => {
+        const options = { displayName: 'Display name' }
+
+        renderHook(() => useOrgData('A0000000000', options), { 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,
+            displayName: 'Display name',
+        }
+
+        renderHook(() => useOrgData('A0000000000', options), { wrapper })
+
+        await waitFor(() => {
+            expect(dataProviderData.organisationUnits).toHaveBeenCalledWith(
+                'read',
+                expect.objectContaining({
+                    params: expect.objectContaining({
+                        isUserDataViewFallback: true,
+                    }),
+                }),
+                expect.objectContaining({}) // contains the `signal`
+            )
+        })
+    })
+})

package/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js

@@ -0,0 +1 @@
+export const defaultRenderNodeLabel = ({ label }) => label

package/src/organisation-unit-tree/default-render-node-label/index.js

@@ -0,0 +1 @@
+export { defaultRenderNodeLabel } from './default-render-node-label.js'

package/src/organisation-unit-tree/filter-root-ids.js

@@ -0,0 +1,9 @@
+import { isPathIncluded } from '../helpers/index.js'
+
+export const filterRootIds = (filter, rootIds) => {
+    if (!filter?.length) {
+        return rootIds
+    }
+
+    return rootIds.filter((rootId) => isPathIncluded(filter, `/${rootId}`))
+}

package/src/organisation-unit-tree/index.js

@@ -0,0 +1,3 @@
+export { OrganisationUnitTree } from './organisation-unit-tree.js'
+export { OrganisationUnitTreeRootError } from './organisation-unit-tree-root-error.js'
+export { OrganisationUnitTreeRootLoading } from './organisation-unit-tree-root-loading.js'

package/src/organisation-unit-tree/organisation-unit-tree-root-error.js

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../locales/index.js'
+
+export const OrganisationUnitTreeRootError = ({
+    dataTest = 'dhis2-uiwidgets-orgunittree-error',
+    error,
+}) => (
+    <div data-test={dataTest}>
+        {i18n.t('Error: {{ ERRORMESSAGE }}', {
+            ERRORMESSAGE: error,
+            nsSeparator: '>',
+        })}
+    </div>
+)
+
+OrganisationUnitTreeRootError.propTypes = {
+    error: PropTypes.string.isRequired,
+    dataTest: PropTypes.string,
+}

package/src/organisation-unit-tree/organisation-unit-tree-root-loading.js

@@ -0,0 +1,22 @@
+import { CircularLoader } from '@dhis2-ui/loader'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+export const OrganisationUnitTreeRootLoading = ({
+    dataTest = 'dhis2-uiwidgets-orgunittree-loading',
+}) => (
+    <div data-test={dataTest}>
+        <CircularLoader small />
+
+        <style jsx>{`
+            div {
+                display: flex;
+                justify-content: center;
+            }
+        `}</style>
+    </div>
+)
+
+OrganisationUnitTreeRootLoading.propTypes = {
+    dataTest: PropTypes.string,
+}