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

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

@@ -4,10 +4,9 @@ import React from 'react';
 import { useOrgChildren } from './use-org-children.js';
 describe('OrganisationUnitTree - useOrgChildren', () => {
   const dataProviderData = {
-    organisationUnits: jest.fn((type, _ref) => {
-      let {
-        id
-      } = _ref;
+    organisationUnits: jest.fn((type, {
+      id
+    }) => {
       if (id === 'A0000000000') {
         return {
           children: [{
@@ -21,14 +20,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
       return Promise.reject(`No org unit with id "${id}"`);
     })
   };
-  const wrapper = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(CustomDataProvider, {
-      data: dataProviderData
-    }, children);
-  };
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: dataProviderData
+  }, children);
   const node = {
     id: 'A0000000000',
     path: '/A0000000000',
@@ -78,18 +74,15 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
     });
   });
   it('should provide the error', async () => {
-    const errorWrapper = _ref3 => {
-      let {
-        children
-      } = _ref3;
-      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(() => useOrgChildren({
@@ -131,10 +124,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it("should sort the node's children alphabetically by default", async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref4) => {
-        let {
-          id
-        } = _ref4;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -153,14 +145,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref5 => {
-      let {
-        children
-      } = _ref5;
-      return /*#__PURE__*/React.createElement(CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const {
       result
     } = renderHook(() => useOrgChildren({
@@ -192,10 +181,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref6) => {
-        let {
-          id
-        } = _ref6;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -214,14 +202,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref7 => {
-      let {
-        children
-      } = _ref7;
-      return /*#__PURE__*/React.createElement(CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const options = {
       node: {
         ...node,
@@ -255,10 +240,9 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
   });
   it(`should not sort the node's children alphabetically when "suppressAlphabeticalSorting" is true`, async () => {
     const dataProviderDataWithUnsortedChildren = {
-      organisationUnits: jest.fn((type, _ref8) => {
-        let {
-          id
-        } = _ref8;
+      organisationUnits: jest.fn((type, {
+        id
+      }) => {
         if (id === 'A0000000000') {
           return {
             children: [{
@@ -277,14 +261,11 @@ describe('OrganisationUnitTree - useOrgChildren', () => {
         return Promise.reject(`No org unit with id "${id}"`);
       })
     };
-    const wrapperWithUnsortedChildren = _ref9 => {
-      let {
-        children
-      } = _ref9;
-      return /*#__PURE__*/React.createElement(CustomDataProvider, {
-        data: dataProviderDataWithUnsortedChildren
-      }, children);
-    };
+    const wrapperWithUnsortedChildren = ({
+      children
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
     const options = {
       node: {
         ...node,

package/build/es/organisation-unit-node/use-org-data/use-org-data.js

@@ -2,21 +2,15 @@ import { useDataQuery } from '@dhis2/app-runtime';
 const ORG_DATA_QUERY = {
   orgUnit: {
     resource: `organisationUnits`,
-    id: _ref => {
-      let {
-        id
-      } = _ref;
-      return id;
-    },
-    params: _ref2 => {
-      let {
-        isUserDataViewFallback
-      } = _ref2;
-      return {
-        isUserDataViewFallback,
-        fields: ['path', 'children::size']
-      };
-    }
+    id: ({
+      id
+    }) => id,
+    params: ({
+      isUserDataViewFallback
+    }) => ({
+      isUserDataViewFallback,
+      fields: ['path', 'children::size']
+    })
   }
 };
 
@@ -27,11 +21,10 @@ const ORG_DATA_QUERY = {
  * @param {bool} options.isUserDataViewFallback
  * @returns {Object}
  */
-export const useOrgData = (id, _ref3) => {
-  let {
-    displayName,
-    isUserDataViewFallback
-  } = _ref3;
+export const useOrgData = (id, {
+  displayName,
+  isUserDataViewFallback
+}) => {
   if (!displayName) {
     throw new Error('"displayName" is required');
   }

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

@@ -5,10 +5,7 @@ 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(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,9 @@ describe('OrganisationUnitTree - useOrgData', () => {
     console.error.mockRestore();
   });
   const dataProviderData = {
-    organisationUnits: jest.fn((type, _ref) => {
-      let {
-        id
-      } = _ref;
+    organisationUnits: jest.fn((type, {
+      id
+    }) => {
       if (id === 'A0000000000') {
         return {
           id: 'A0000000000',
@@ -32,14 +28,11 @@ describe('OrganisationUnitTree - useOrgData', () => {
       return Promise.reject(`No org unit with id "${id}"`);
     })
   };
-  const wrapper = _ref2 => {
-    let {
-      children
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(CustomDataProvider, {
-      data: dataProviderData
-    }, children);
-  };
+  const wrapper = ({
+    children
+  }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: dataProviderData
+  }, children);
   it('should respond with `loading: true`, `error: null` and `data: { displayName, id }` initially', () => {
     const {
       result
@@ -78,18 +71,15 @@ describe('OrganisationUnitTree - useOrgData', () => {
     });
   });
   it('should provide the error', async () => {
-    const errorWrapper = _ref3 => {
-      let {
-        children
-      } = _ref3;
-      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(() => useOrgData('A0000000000', {

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

@@ -1,6 +1,3 @@
-export const defaultRenderNodeLabel = _ref => {
-  let {
-    label
-  } = _ref;
-  return label;
-};
+export const defaultRenderNodeLabel = ({
+  label
+}) => label;

package/build/es/organisation-unit-tree/organisation-unit-tree-root-error.js

@@ -1,18 +1,15 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import i18n from '../locales/index.js';
-export const OrganisationUnitTreeRootError = _ref => {
-  let {
-    dataTest = 'dhis2-uiwidgets-orgunittree-error',
-    error
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest
-  }, i18n.t('Error: {{ ERRORMESSAGE }}', {
-    ERRORMESSAGE: error,
-    nsSeparator: '>'
-  }));
-};
+export const OrganisationUnitTreeRootError = ({
+  dataTest = 'dhis2-uiwidgets-orgunittree-error',
+  error
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest
+}, i18n.t('Error: {{ ERRORMESSAGE }}', {
+  ERRORMESSAGE: error,
+  nsSeparator: '>'
+}));
 OrganisationUnitTreeRootError.propTypes = {
   error: PropTypes.string.isRequired,
   dataTest: PropTypes.string

package/build/es/organisation-unit-tree/organisation-unit-tree-root-loading.js

@@ -2,19 +2,16 @@ import _JSXStyle from "styled-jsx/style";
 import { CircularLoader } from '@dhis2-ui/loader';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const OrganisationUnitTreeRootLoading = _ref => {
-  let {
-    dataTest = 'dhis2-uiwidgets-orgunittree-loading'
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": dataTest,
-    className: "jsx-814846266"
-  }, /*#__PURE__*/React.createElement(CircularLoader, {
-    small: true
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "814846266"
-  }, ["div.jsx-814846266{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}"]));
-};
+export const OrganisationUnitTreeRootLoading = ({
+  dataTest = 'dhis2-uiwidgets-orgunittree-loading'
+}) => /*#__PURE__*/React.createElement("div", {
+  "data-test": dataTest,
+  className: "jsx-814846266"
+}, /*#__PURE__*/React.createElement(CircularLoader, {
+  small: true
+}), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "814846266"
+}, ["div.jsx-814846266{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}"]));
 OrganisationUnitTreeRootLoading.propTypes = {
   dataTest: PropTypes.string
 };

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';
@@ -13,30 +14,29 @@ import { useRootOrgData } from './use-root-org-data/index.js';
 
 // A stable object to reference
 const staticArray = [];
-const OrganisationUnitTree = _ref => {
-  let {
-    onChange,
-    roots,
-    autoExpandLoadingError,
-    dataTest = 'dhis2-uiwidgets-orgunittree',
-    disableSelection,
-    displayProperty = 'displayName',
-    forceReload,
-    highlighted = staticArray,
-    isUserDataViewFallback,
-    initiallyExpanded = staticArray,
-    filter = staticArray,
-    renderNodeLabel = defaultRenderNodeLabel,
-    selected = staticArray,
-    singleSelection,
-    suppressAlphabeticalSorting,
-    expanded: expandedControlled,
-    handleExpand: handleExpandControlled,
-    handleCollapse: handleCollapseControlled,
-    onExpand,
-    onCollapse,
-    onChildrenLoaded
-  } = _ref;
+const OrganisationUnitTree = ({
+  onChange,
+  roots,
+  autoExpandLoadingError,
+  dataTest = 'dhis2-uiwidgets-orgunittree',
+  disableSelection,
+  displayProperty = 'displayName',
+  forceReload,
+  highlighted = staticArray,
+  isUserDataViewFallback,
+  initiallyExpanded = staticArray,
+  filter = staticArray,
+  renderNodeLabel = defaultRenderNodeLabel,
+  selected = staticArray,
+  singleSelection,
+  suppressAlphabeticalSorting,
+  expanded: expandedControlled,
+  handleExpand: handleExpandControlled,
+  handleCollapse: handleCollapseControlled,
+  onExpand,
+  onCollapse,
+  onChildrenLoaded
+}) => {
   const rootIds = filterRootIds(filter, Array.isArray(roots) ? roots : [roots]);
   const reloadId = useForceReload(forceReload);
   const [prevReloadId, setPrevReloadId] = useState(reloadId);
@@ -72,12 +72,19 @@ const OrganisationUnitTree = _ref => {
     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/build/es/organisation-unit-tree/use-expanded/create-expand-handlers.js

@@ -6,18 +6,16 @@
  * @param {Function} [args.onCollapse]
  * @returns {{ handleExpand: Function, handleCollapse: Function }}
  */
-export const createExpandHandlers = _ref => {
-  let {
-    expanded,
-    setExpanded,
-    onExpand,
-    onCollapse
-  } = _ref;
-  const handleExpand = _ref2 => {
-    let {
-      path,
-      ...rest
-    } = _ref2;
+export const createExpandHandlers = ({
+  expanded,
+  setExpanded,
+  onExpand,
+  onCollapse
+}) => {
+  const handleExpand = ({
+    path,
+    ...rest
+  }) => {
     if (!expanded.includes(path)) {
       setExpanded([...expanded, path]);
       if (onExpand) {
@@ -28,11 +26,10 @@ export const createExpandHandlers = _ref => {
       }
     }
   };
-  const handleCollapse = _ref3 => {
-    let {
-      path,
-      ...rest
-    } = _ref3;
+  const handleCollapse = ({
+    path,
+    ...rest
+  }) => {
     const pathIndex = expanded.indexOf(path);
     if (pathIndex !== -1) {
       const updatedExpanded = pathIndex === 0 ? expanded.slice(1) : [...expanded.slice(0, pathIndex), ...expanded.slice(pathIndex + 1)];

package/build/es/organisation-unit-tree/use-expanded/use-expanded.js

@@ -8,15 +8,14 @@ import { createExpandHandlers } from './create-expand-handlers.js';
  * @param {Function} [onCollapse]
  * @returns {{ expanded: string[], handleExpand: Function, handleCollapse: Function }}
  */
-export const useExpanded = _ref => {
-  let {
-    initiallyExpanded,
-    onExpand,
-    onCollapse,
-    expandedControlled,
-    handleExpandControlled,
-    handleCollapseControlled
-  } = _ref;
+export const useExpanded = ({
+  initiallyExpanded,
+  onExpand,
+  onCollapse,
+  expandedControlled,
+  handleExpandControlled,
+  handleCollapseControlled
+}) => {
   const isControlled = !!expandedControlled;
   const allInitiallyExpandedPaths = isControlled ? [] : getAllExpandedPaths(initiallyExpanded);
   const [expanded, setExpanded] = useState(allInitiallyExpandedPaths);

package/build/es/organisation-unit-tree/use-root-org-data/patch-missing-display-name.js

@@ -11,8 +11,7 @@
  */
 export const patchMissingDisplayName = nodes => {
   const nodeEntries = Object.entries(nodes);
-  const nodesWithDisplayName = nodeEntries.map(_ref => {
-    let [id, node] = _ref;
+  const nodesWithDisplayName = nodeEntries.map(([id, node]) => {
     const displayName = node.displayName || '';
     return [id, {
       ...node,

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

@@ -6,15 +6,12 @@ export const createRootQuery = (ids, displayProperty) => ids.reduce((query, id)
   [id]: {
     id,
     resource: `organisationUnits`,
-    params: _ref => {
-      let {
-        isUserDataViewFallback
-      } = _ref;
-      return {
-        isUserDataViewFallback,
-        fields: [displayProperty === 'displayName' ? 'displayName' : `${displayProperty}~rename(displayName)`, 'path', 'id']
-      };
-    }
+    params: ({
+      isUserDataViewFallback
+    }) => ({
+      isUserDataViewFallback,
+      fields: [displayProperty === 'displayName' ? 'displayName' : `${displayProperty}~rename(displayName)`, 'path', 'id']
+    })
   }
 }), {});
 
@@ -26,11 +23,10 @@ export const createRootQuery = (ids, displayProperty) => ids.reduce((query, id)
  * @param {'displayName'|'displayShortName'} [options.displayProperty]
  * @returns {Object}
  */
-export const useRootOrgData = function (ids) {
-  let {
-    isUserDataViewFallback,
-    displayProperty = 'displayName'
-  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+export const useRootOrgData = (ids, {
+  isUserDataViewFallback,
+  displayProperty = 'displayName'
+} = {}) => {
   const query = useMemo(() => createRootQuery(ids, displayProperty), [ids, displayProperty]);
   const variables = {
     isUserDataViewFallback