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

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

@@ -5,10 +5,7 @@ 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(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  jest.spyOn(console, 'error').mockImplementation((...args) => {
     const [err] = args;
     if (!err.toString().match(/^Warning: An update to/)) {
       origError(...args);
@@ -18,10 +15,7 @@ describe('OrganisationUnitTree - useRootOrgData', () => {
   // @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(function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
+  jest.spyOn(console, 'warn').mockImplementation((...args) => {
     const [err] = args;
     if (!err.toString().match(dynamicQueryWarningMsg)) {
       origWarn(...args);
@@ -40,14 +34,11 @@ describe('OrganisationUnitTree - useRootOrgData', () => {
       };
     })
   };
-  const wrapper = _ref => {
-    let {
-      children
-    } = _ref;
-    return /*#__PURE__*/React.createElement(CustomDataProvider, {
-      data: dataProviderData
-    }, children);
-  };
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: dataProviderData
+  }, children);
   it('should respond with `loading: false`, `error: null` and `data: null` initially', () => {
     const {
       result
@@ -67,32 +58,30 @@ describe('OrganisationUnitTree - useRootOrgData', () => {
     } = 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'
+    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 = _ref2 => {
-      let {
-        children
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(CustomDataProvider, {
-        data: {
-          organisationUnits: async () => {
-            throw new Error('Error message');
-          }
+    const errorWrapper = ({
+      children
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
         }
-      }, children);
-    };
+      }
+    }, children);
     const {
       result
     } = renderHook(() => useRootOrgData(['A0000000000']), {
@@ -142,14 +131,11 @@ describe('OrganisationUnitTree - useRootOrgData', () => {
         };
       })
     };
-    const wrapperWithoutDisplayName = _ref3 => {
-      let {
-        children
-      } = _ref3;
-      return /*#__PURE__*/React.createElement(CustomDataProvider, {
-        data: dataProviderDataWithoutDisplayName
-      }, children);
-    };
+    const wrapperWithoutDisplayName = ({
+      children
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithoutDisplayName
+    }, children);
     const {
       result
     } = renderHook(() => useRootOrgData(['A0000000000']), {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/organisation-unit-tree",
-    "version": "10.16.3",
+    "version": "10.16.5",
     "description": "UI OrganisationUnitTree",
     "repository": {
         "type": "git",
@@ -35,11 +35,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "10.16.3",
-        "@dhis2-ui/checkbox": "10.16.3",
-        "@dhis2-ui/loader": "10.16.3",
-        "@dhis2-ui/node": "10.16.3",
-        "@dhis2/ui-constants": "10.16.3",
+        "@dhis2-ui/button": "10.16.5",
+        "@dhis2-ui/checkbox": "10.16.5",
+        "@dhis2-ui/loader": "10.16.5",
+        "@dhis2-ui/node": "10.16.5",
+        "@dhis2/ui-constants": "10.16.5",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/src/locales/index.js

@@ -28,23 +28,62 @@ import zhTranslations from './zh/translations.json'
 import zh_CNTranslations from './zh_CN/translations.json'
 
 const namespace = 'default'
-i18n.addResources('ar', namespace, arTranslations)
-i18n.addResources('cs', namespace, csTranslations)
-i18n.addResources('en', namespace, enTranslations)
-i18n.addResources('es', namespace, esTranslations)
-i18n.addResources('es_419', namespace, es_419Translations)
-i18n.addResources('fr', namespace, frTranslations)
-i18n.addResources('lo', namespace, loTranslations)
-i18n.addResources('nb', namespace, nbTranslations)
-i18n.addResources('nl', namespace, nlTranslations)
-i18n.addResources('pt', namespace, ptTranslations)
-i18n.addResources('ru', namespace, ruTranslations)
-i18n.addResources('uk', namespace, ukTranslations)
-i18n.addResources('uz_Latn', namespace, uz_LatnTranslations)
-i18n.addResources('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations)
-i18n.addResources('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations)
-i18n.addResources('vi', namespace, viTranslations)
-i18n.addResources('zh', namespace, zhTranslations)
-i18n.addResources('zh_CN', namespace, zh_CNTranslations)
+
+// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
+// custom translations from the datastore (added by the app adapter)
+
+i18n.addResourceBundle('ar', namespace, arTranslations, true, false)
+i18n.addResourceBundle('ar', namespace, arTranslations, true, false)
+
+i18n.addResourceBundle('cs', namespace, csTranslations, true, false)
+i18n.addResourceBundle('cs', namespace, csTranslations, true, false)
+
+i18n.addResourceBundle('en', namespace, enTranslations, true, false)
+i18n.addResourceBundle('en', namespace, enTranslations, true, false)
+
+i18n.addResourceBundle('es', namespace, esTranslations, true, false)
+i18n.addResourceBundle('es', namespace, esTranslations, true, false)
+
+i18n.addResourceBundle('es_419', namespace, es_419Translations, true, false)
+i18n.addResourceBundle('es-419', namespace, es_419Translations, true, false)
+
+i18n.addResourceBundle('fr', namespace, frTranslations, true, false)
+i18n.addResourceBundle('fr', namespace, frTranslations, true, false)
+
+i18n.addResourceBundle('lo', namespace, loTranslations, true, false)
+i18n.addResourceBundle('lo', namespace, loTranslations, true, false)
+
+i18n.addResourceBundle('nb', namespace, nbTranslations, true, false)
+i18n.addResourceBundle('nb', namespace, nbTranslations, true, false)
+
+i18n.addResourceBundle('nl', namespace, nlTranslations, true, false)
+i18n.addResourceBundle('nl', namespace, nlTranslations, true, false)
+
+i18n.addResourceBundle('pt', namespace, ptTranslations, true, false)
+i18n.addResourceBundle('pt', namespace, ptTranslations, true, false)
+
+i18n.addResourceBundle('ru', namespace, ruTranslations, true, false)
+i18n.addResourceBundle('ru', namespace, ruTranslations, true, false)
+
+i18n.addResourceBundle('uk', namespace, ukTranslations, true, false)
+i18n.addResourceBundle('uk', namespace, ukTranslations, true, false)
+
+i18n.addResourceBundle('uz_Latn', namespace, uz_LatnTranslations, true, false)
+i18n.addResourceBundle('uz-Latn', namespace, uz_LatnTranslations, true, false)
+
+i18n.addResourceBundle('uz_UZ_Cyrl', namespace, uz_UZ_CyrlTranslations, true, false)
+i18n.addResourceBundle('uz-Cyrl-UZ', namespace, uz_UZ_CyrlTranslations, true, false)
+
+i18n.addResourceBundle('uz_UZ_Latn', namespace, uz_UZ_LatnTranslations, true, false)
+i18n.addResourceBundle('uz-Latn-UZ', namespace, uz_UZ_LatnTranslations, true, false)
+
+i18n.addResourceBundle('vi', namespace, viTranslations, true, false)
+i18n.addResourceBundle('vi', namespace, viTranslations, true, false)
+
+i18n.addResourceBundle('zh', namespace, zhTranslations, true, false)
+i18n.addResourceBundle('zh', namespace, zhTranslations, true, false)
+
+i18n.addResourceBundle('zh_CN', namespace, zh_CNTranslations, true, false)
+i18n.addResourceBundle('zh-CN', namespace, zh_CNTranslations, true, false)
 
 export default i18n

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

@@ -1,6 +1,7 @@
 import { requiredIf } from '@dhis2/prop-types'
 import PropTypes from 'prop-types'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
+import { sortNodeChildrenAlphabetically } from '../helpers/index.js'
 import { OrganisationUnitNode } from '../organisation-unit-node/index.js'
 import { orgUnitPathPropType } from '../prop-types.js'
 import { defaultRenderNodeLabel } from './default-render-node-label/index.js'
@@ -75,14 +76,24 @@ const OrganisationUnitTree = ({
 
     const isLoading = !called || loading
 
+    const sortedRoots = useMemo(() => {
+        if (!data) {
+            return staticArray
+        }
+        const rootNodes = rootIds.map((rootId) => data[rootId])
+        return suppressAlphabeticalSorting
+            ? rootNodes
+            : sortNodeChildrenAlphabetically(rootNodes)
+    }, [data, rootIds, suppressAlphabeticalSorting])
+
     return (
         <div data-test={dataTest}>
             {isLoading && <OrganisationUnitTreeRootLoading />}
             {error && <OrganisationUnitTreeRootError error={error} />}
             {!error &&
                 !isLoading &&
-                rootIds.map((rootId) => {
-                    const rootNode = data[rootId]
+                sortedRoots.map((rootNode) => {
+                    const rootId = rootNode.id
 
                     return (
                         <OrganisationUnitNode

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

@@ -1,4 +1,5 @@
 import { CustomDataProvider } from '@dhis2/app-runtime'
+import { render } from '@testing-library/react'
 import { shallow } from 'enzyme'
 import React from 'react'
 import { OrganisationUnitTree } from './organisation-unit-tree.js'
@@ -74,4 +75,67 @@ describe('OrganisationUnitTree', () => {
             })
         })
     })
+
+    describe('Root node sorting', () => {
+        // displayNames intentionally out of alphabetical order relative to ids
+        const rootNodes = {
+            A001: { id: 'A001', path: '/A001', displayName: 'Bravo' },
+            A002: { id: 'A002', path: '/A002', displayName: 'Alpha' },
+            A003: { id: 'A003', path: '/A003', displayName: 'Charlie' },
+        }
+
+        const dataProvider = {
+            organisationUnits: (type, { id }) => {
+                const node = rootNodes[id]
+                if (node) {
+                    // children: 0 so nodes don't try to load descendants
+                    return { ...node, children: 0 }
+                }
+                return Promise.reject(`No org unit with id "${id}"`)
+            },
+        }
+
+        it('sorts root nodes alphabetically by displayName by default', async () => {
+            const { container, findByText } = render(
+                <CustomDataProvider data={dataProvider}>
+                    <OrganisationUnitTree
+                        roots={['A001', 'A002', 'A003']}
+                        onChange={() => {}}
+                    />
+                </CustomDataProvider>
+            )
+
+            await findByText('Alpha')
+
+            const { textContent } = container
+            expect(textContent.indexOf('Alpha')).toBeLessThan(
+                textContent.indexOf('Bravo')
+            )
+            expect(textContent.indexOf('Bravo')).toBeLessThan(
+                textContent.indexOf('Charlie')
+            )
+        })
+
+        it('keeps the provided roots order when suppressAlphabeticalSorting is true', async () => {
+            const { container, findByText } = render(
+                <CustomDataProvider data={dataProvider}>
+                    <OrganisationUnitTree
+                        roots={['A003', 'A001', 'A002']}
+                        suppressAlphabeticalSorting
+                        onChange={() => {}}
+                    />
+                </CustomDataProvider>
+            )
+
+            await findByText('Charlie')
+
+            const { textContent } = container
+            expect(textContent.indexOf('Charlie')).toBeLessThan(
+                textContent.indexOf('Bravo')
+            )
+            expect(textContent.indexOf('Bravo')).toBeLessThan(
+                textContent.indexOf('Alpha')
+            )
+        })
+    })
 })

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

@@ -67,21 +67,21 @@ describe('OrganisationUnitTree - useRootOrgData', () => {
             wrapper,
         })
 
-        await waitFor(() => {})
-
-        expect(result.current).toEqual(
-            expect.objectContaining({
-                loading: false,
-                error: null,
-                data: {
-                    A0000000000: {
-                        id: 'A0000000000',
-                        path: '/A0000000000',
-                        displayName: 'Org Unit 1',
+        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 () => {