@dhis2-ui/organisation-unit-tree 10.16.4 → 10.17.0

package/build/cjs/organisation-unit-tree/organisation-unit-tree.js

@@ -7,15 +7,16 @@ exports.OrganisationUnitTree = void 0;
 var _propTypes = require("@dhis2/prop-types");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
-var _index = require("../organisation-unit-node/index.js");
+var _index = require("../helpers/index.js");
+var _index2 = require("../organisation-unit-node/index.js");
 var _propTypes3 = require("../prop-types.js");
-var _index2 = require("./default-render-node-label/index.js");
+var _index3 = require("./default-render-node-label/index.js");
 var _filterRootIds = require("./filter-root-ids.js");
 var _organisationUnitTreeRootError = require("./organisation-unit-tree-root-error.js");
 var _organisationUnitTreeRootLoading = require("./organisation-unit-tree-root-loading.js");
-var _index3 = require("./use-expanded/index.js");
+var _index4 = require("./use-expanded/index.js");
 var _useForceReload = require("./use-force-reload.js");
-var _index4 = require("./use-root-org-data/index.js");
+var _index5 = require("./use-root-org-data/index.js");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // A stable object to reference
@@ -32,7 +33,7 @@ const OrganisationUnitTree = ({
   isUserDataViewFallback,
   initiallyExpanded = staticArray,
   filter = staticArray,
-  renderNodeLabel = _index2.defaultRenderNodeLabel,
+  renderNodeLabel = _index3.defaultRenderNodeLabel,
   selected = staticArray,
   singleSelection,
   suppressAlphabeticalSorting,
@@ -52,7 +53,7 @@ const OrganisationUnitTree = ({
     error,
     data,
     refetch
-  } = (0, _index4.useRootOrgData)(rootIds, {
+  } = (0, _index5.useRootOrgData)(rootIds, {
     isUserDataViewFallback,
     suppressAlphabeticalSorting,
     displayProperty
@@ -61,7 +62,7 @@ const OrganisationUnitTree = ({
     expanded,
     handleExpand,
     handleCollapse
-  } = (0, _index3.useExpanded)({
+  } = (0, _index4.useExpanded)({
     initiallyExpanded,
     onExpand,
     onCollapse,
@@ -78,13 +79,20 @@ const OrganisationUnitTree = ({
     return () => console.warn('@TODO: Why does this component unmount after a force reload?');
   }, [reloadId, prevReloadId, refetch]);
   const isLoading = !called || loading;
+  const sortedRoots = (0, _react.useMemo)(() => {
+    if (!data) {
+      return staticArray;
+    }
+    const rootNodes = rootIds.map(rootId => data[rootId]);
+    return suppressAlphabeticalSorting ? rootNodes : (0, _index.sortNodeChildrenAlphabetically)(rootNodes);
+  }, [data, rootIds, suppressAlphabeticalSorting]);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-test": dataTest
   }, isLoading && /*#__PURE__*/_react.default.createElement(_organisationUnitTreeRootLoading.OrganisationUnitTreeRootLoading, null), error && /*#__PURE__*/_react.default.createElement(_organisationUnitTreeRootError.OrganisationUnitTreeRootError, {
     error: error
-  }), !error && !isLoading && rootIds.map(rootId => {
-    const rootNode = data[rootId];
-    return /*#__PURE__*/_react.default.createElement(_index.OrganisationUnitNode, {
+  }), !error && !isLoading && sortedRoots.map(rootNode => {
+    const rootId = rootNode.id;
+    return /*#__PURE__*/_react.default.createElement(_index2.OrganisationUnitNode, {
       key: rootNode.path,
       rootId: rootId,
       autoExpandLoadingError: autoExpandLoadingError,

package/build/cjs/organisation-unit-tree/organisation-unit-tree.test.js

@@ -1,8 +1,9 @@
 "use strict";
 
 var _appRuntime = require("@dhis2/app-runtime");
+var _react = require("@testing-library/react");
 var _enzyme = require("enzyme");
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 var _organisationUnitTree = require("./organisation-unit-tree.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('OrganisationUnitTree', () => {
@@ -18,9 +19,9 @@ describe('OrganisationUnitTree', () => {
   describe('Controlled expanded props', () => {
     describe('Missing props', () => {
       it('should throw a prop-types error when "handleCollapse" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           expanded: [],
           onChange: () => {},
@@ -30,9 +31,9 @@ describe('OrganisationUnitTree', () => {
         expect(errorMock.mock.calls[0][2]).toMatch(/Invalid prop `handleCollapse` supplied to `OrganisationUnitTree`/, {});
       });
       it('should throw a prop-types error when "handleExpand" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           expanded: [],
           onChange: () => {},
@@ -42,9 +43,9 @@ describe('OrganisationUnitTree', () => {
         expect(errorMock.mock.calls[0][2]).toMatch(/Invalid prop `handleExpand` supplied to `OrganisationUnitTree`/);
       });
       it('should throw a prop-types error when "expanded" is missing', () => {
-        (0, _enzyme.shallow)(/*#__PURE__*/_react.default.createElement(_appRuntime.CustomDataProvider, {
+        (0, _enzyme.shallow)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
           data: {}
-        }, /*#__PURE__*/_react.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
           roots: "/A001",
           onChange: () => {},
           handleCollapse: () => {},
@@ -55,4 +56,74 @@ 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
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        roots: ['A001', 'A002', 'A003'],
+        onChange: () => {}
+      })));
+      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
+      } = (0, _react.render)(/*#__PURE__*/_react2.default.createElement(_appRuntime.CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/_react2.default.createElement(_organisationUnitTree.OrganisationUnitTree, {
+        roots: ['A003', 'A001', 'A002'],
+        suppressAlphabeticalSorting: true,
+        onChange: () => {}
+      })));
+      await findByText('Charlie');
+      const {
+        textContent
+      } = container;
+      expect(textContent.indexOf('Charlie')).toBeLessThan(textContent.indexOf('Bravo'));
+      expect(textContent.indexOf('Bravo')).toBeLessThan(textContent.indexOf('Alpha'));
+    });
+  });
 });

package/build/es/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';
@@ -71,12 +72,19 @@ const OrganisationUnitTree = ({
     return () => console.warn('@TODO: Why does this component unmount after a force reload?');
   }, [reloadId, prevReloadId, refetch]);
   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 /*#__PURE__*/React.createElement("div", {
     "data-test": dataTest
   }, isLoading && /*#__PURE__*/React.createElement(OrganisationUnitTreeRootLoading, null), error && /*#__PURE__*/React.createElement(OrganisationUnitTreeRootError, {
     error: error
-  }), !error && !isLoading && rootIds.map(rootId => {
-    const rootNode = data[rootId];
+  }), !error && !isLoading && sortedRoots.map(rootNode => {
+    const rootId = rootNode.id;
     return /*#__PURE__*/React.createElement(OrganisationUnitNode, {
       key: rootNode.path,
       rootId: rootId,

package/build/es/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';
@@ -52,4 +53,74 @@ 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(/*#__PURE__*/React.createElement(CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+        roots: ['A001', 'A002', 'A003'],
+        onChange: () => {}
+      })));
+      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(/*#__PURE__*/React.createElement(CustomDataProvider, {
+        data: dataProvider
+      }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+        roots: ['A003', 'A001', 'A002'],
+        suppressAlphabeticalSorting: true,
+        onChange: () => {}
+      })));
+      await findByText('Charlie');
+      const {
+        textContent
+      } = container;
+      expect(textContent.indexOf('Charlie')).toBeLessThan(textContent.indexOf('Bravo'));
+      expect(textContent.indexOf('Bravo')).toBeLessThan(textContent.indexOf('Alpha'));
+    });
+  });
 });

package/package.json

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

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')
+            )
+        })
+    })
 })