@dhis2-ui/organisation-unit-tree 7.16.1 → 8.0.0

package/build/es/organisation-unit-node/label/label.js

@@ -71,7 +71,7 @@ const Label = ({
       singleSelection,
       rootId
     }); // @TODO: It'd make more sense to pass the node as an object
-    // isntead of spread it. But that'd be a breaking change
+    // instead of spread it. But that'd be a breaking change
 
     const payload = { ...node,
       path: fullPath,
@@ -125,10 +125,7 @@ Label.propTypes = {
   node: PropTypes.shape({
     displayName: PropTypes.string.isRequired,
     id: PropTypes.string.isRequired,
-    children: PropTypes.arrayOf(PropTypes.shape({
-      displayName: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired
-    })),
+    children: PropTypes.number,
     path: PropTypes.string
   }).isRequired,
   open: PropTypes.bool.isRequired,

package/build/es/organisation-unit-node/loading-spinner.js

@@ -0,0 +1,17 @@
+import _JSXStyle from "styled-jsx/style";
+import { CircularLoader } from '@dhis2-ui/loader';
+import React from 'react';
+const loadingSpinnerStyles = {
+  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "358163430"
+  }, [".extrasmall.jsx-358163430{display:block;margin:3px 0;}"]),
+  className: "jsx-358163430"
+};
+export const LoadingSpinner = () => /*#__PURE__*/React.createElement("div", {
+  className: "jsx-2503342345"
+}, /*#__PURE__*/React.createElement(CircularLoader, {
+  extrasmall: true,
+  className: loadingSpinnerStyles.className
+}), /*#__PURE__*/React.createElement("style", null, loadingSpinnerStyles.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
+  id: "2503342345"
+}, ["div.jsx-2503342345{width:24px;}"]));

package/build/es/organisation-unit-node/organisation-unit-node-children.js

@@ -0,0 +1,103 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isPathIncluded } from '../helpers/index.js';
+import i18n from '../locales/index.js';
+import { orgUnitPathPropType } from '../prop-types.js';
+import { LoadingSpinner } from './loading-spinner.js';
+import { useOrgChildren } from './use-org-children.js';
+
+const getFilteredChildren = ({
+  orgChildren,
+  filter,
+  node
+}) => {
+  if (!(filter !== null && filter !== void 0 && filter.length)) {
+    return orgChildren;
+  }
+
+  return orgChildren.filter(child => {
+    return isPathIncluded(filter, `${node.path}/${child.id}`);
+  });
+};
+
+export const OrganisationUnitNodeChildren = ({
+  node,
+  autoExpandLoadingError,
+  dataTest,
+  disableSelection,
+  expanded,
+  filter,
+  highlighted,
+  isUserDataViewFallback,
+  onChange,
+  onChildrenLoaded,
+  onCollapse,
+  onExpand,
+  parentPath,
+  renderNodeLabel,
+  rootId,
+  selected,
+  singleSelection,
+  suppressAlphabeticalSorting,
+  OrganisationUnitNode
+}) => {
+  const orgChildren = useOrgChildren({
+    node,
+    isUserDataViewFallback,
+    suppressAlphabeticalSorting,
+    onComplete: onChildrenLoaded
+  });
+  const displayChildren = orgChildren.called && !orgChildren.loading && !orgChildren.error;
+  const filteredChildren = displayChildren ? getFilteredChildren({
+    orgChildren: orgChildren.data,
+    filter,
+    node
+  }) : [];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, orgChildren.loading && /*#__PURE__*/React.createElement(LoadingSpinner, null), orgChildren.error && `Error: ${orgChildren.error}`, displayChildren && !filteredChildren.length && i18n.t('No children match filter'), !!filteredChildren.length && filteredChildren.map(child => {
+    const childPath = `${parentPath}/${child.id}`;
+    return /*#__PURE__*/React.createElement(OrganisationUnitNode, {
+      autoExpandLoadingError: autoExpandLoadingError,
+      dataTest: dataTest,
+      disableSelection: disableSelection,
+      displayName: child.displayName,
+      expanded: expanded,
+      filter: filter,
+      highlighted: highlighted,
+      id: child.id,
+      isUserDataViewFallback: isUserDataViewFallback,
+      key: childPath,
+      onChange: onChange,
+      onChildrenLoaded: onChildrenLoaded,
+      onCollapse: onCollapse,
+      onExpand: onExpand,
+      path: childPath,
+      renderNodeLabel: renderNodeLabel,
+      rootId: rootId,
+      selected: selected,
+      singleSelection: singleSelection,
+      suppressAlphabeticalSorting: suppressAlphabeticalSorting
+    });
+  }));
+};
+OrganisationUnitNodeChildren.propTypes = {
+  // Prevent cirular imports
+  OrganisationUnitNode: PropTypes.func.isRequired,
+  dataTest: PropTypes.string.isRequired,
+  node: PropTypes.object.isRequired,
+  parentPath: PropTypes.string.isRequired,
+  renderNodeLabel: PropTypes.func.isRequired,
+  rootId: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  autoExpandLoadingError: PropTypes.bool,
+  disableSelection: PropTypes.bool,
+  expanded: PropTypes.arrayOf(orgUnitPathPropType),
+  filter: PropTypes.arrayOf(orgUnitPathPropType),
+  highlighted: PropTypes.arrayOf(orgUnitPathPropType),
+  isUserDataViewFallback: PropTypes.bool,
+  selected: PropTypes.arrayOf(orgUnitPathPropType),
+  singleSelection: PropTypes.bool,
+  suppressAlphabeticalSorting: PropTypes.bool,
+  onChildrenLoaded: PropTypes.func,
+  onCollapse: PropTypes.func,
+  onExpand: PropTypes.func
+};

package/build/es/organisation-unit-node/organisation-unit-node.js

@@ -1,33 +1,16 @@
-import _JSXStyle from "styled-jsx/style";
-import { CircularLoader } from '@dhis2-ui/loader';
 import { Node } from '@dhis2-ui/node';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { leftTrimToRootId } from '../helpers/index.js';
 import i18n from '../locales/index.js';
 import { orgUnitPathPropType } from '../prop-types.js';
-import { computeChildNodes } from './compute-child-nodes.js';
 import { ErrorMessage } from './error-message.js';
 import { hasDescendantSelectedPaths } from './has-descendant-selected-paths.js';
 import { Label } from './label/index.js';
+import { LoadingSpinner } from './loading-spinner.js';
+import { OrganisationUnitNodeChildren } from './organisation-unit-node-children.js';
 import { useOpenState } from './use-open-state.js';
 import { useOrgData } from './use-org-data/index.js';
-const loadingSpinnerStyles = {
-  styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "358163430"
-  }, [".extrasmall.jsx-358163430{display:block;margin:3px 0;}"]),
-  className: "jsx-358163430"
-};
-
-const LoadingSpinner = () => /*#__PURE__*/React.createElement("div", {
-  className: "jsx-2503342345"
-}, /*#__PURE__*/React.createElement(CircularLoader, {
-  extrasmall: true,
-  className: loadingSpinnerStyles.className
-}), /*#__PURE__*/React.createElement("style", null, loadingSpinnerStyles.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2503342345"
-}, ["div.jsx-2503342345{width:24px;}"]));
-
 export const OrganisationUnitNode = ({
   autoExpandLoadingError,
   dataTest,
@@ -49,22 +32,20 @@ export const OrganisationUnitNode = ({
   onCollapse,
   onExpand
 }) => {
-  const {
-    loading,
-    error,
-    data
-  } = useOrgData(id, {
+  const orgData = useOrgData(id, {
     isUserDataViewFallback,
-    suppressAlphabeticalSorting,
-    displayName,
-    onComplete: onChildrenLoaded
+    displayName
   });
   const strippedPath = leftTrimToRootId(path, rootId);
-  const node = { ...data,
+  const node = {
+    // guarantee that displayName and id are avaiable before data loaded
+    displayName,
+    id,
+    ...(orgData.data || {}),
+    // do not override strippedPath with path from loaded data
     path: strippedPath
   };
-  const childNodes = !loading && !error ? computeChildNodes(node, filter) : [];
-  const hasChildren = !!childNodes.length;
+  const hasChildren = !!node.children && node.children > 0;
   const hasSelectedDescendants = hasDescendantSelectedPaths(strippedPath, selected, rootId);
   const isHighlighted = highlighted.includes(path);
   const {
@@ -72,7 +53,7 @@ export const OrganisationUnitNode = ({
     onToggleOpen
   } = useOpenState({
     autoExpandLoadingError,
-    errorMessage: error && error.toString(),
+    errorMessage: orgData.error && orgData.error.toString(),
     path: strippedPath,
     expanded,
     onExpand,
@@ -83,14 +64,14 @@ export const OrganisationUnitNode = ({
     disableSelection,
     hasChildren,
     hasSelectedDescendants,
-    loading,
-    error,
+    loading: orgData.loading,
+    error: orgData.error,
     selected,
     open,
     path,
     singleSelection,
     node,
-    label: node.displayName,
+    label: displayName,
     checked: isSelected,
     highlighted: isHighlighted
   });
@@ -98,7 +79,7 @@ export const OrganisationUnitNode = ({
     node: node,
     fullPath: path,
     open: open,
-    loading: loading,
+    loading: orgData.loading,
     checked: isSelected,
     rootId: rootId,
     onChange: onChange,
@@ -122,45 +103,40 @@ export const OrganisationUnitNode = ({
    * 4. Child nodes: There are children and the node is open
    */
 
-  const showPlaceholder = hasChildren && !open && !error;
-  const showChildNodes = hasChildren && open && !error;
+  const showPlaceholder = hasChildren && !open && !orgData.error;
+  const showChildNodes = hasChildren && open && !orgData.error;
   return /*#__PURE__*/React.createElement(Node, {
     dataTest: `${dataTest}-node`,
     open: open,
     onOpen: onToggleOpen,
     onClose: onToggleOpen,
     component: label,
-    icon: loading && /*#__PURE__*/React.createElement(LoadingSpinner, null)
-  }, error && /*#__PURE__*/React.createElement(ErrorMessage, {
+    icon: orgData.loading && /*#__PURE__*/React.createElement(LoadingSpinner, null)
+  }, orgData.error && /*#__PURE__*/React.createElement(ErrorMessage, {
     dataTest: dataTest
   }, i18n.t('Could not load children')), showPlaceholder && /*#__PURE__*/React.createElement("span", {
     "data-test": `${dataTest}-placeholder`
-  }), showChildNodes && childNodes.map(child => {
-    const childPath = `${path}/${child.id}`;
-    const grandChildNodes = computeChildNodes(child, filter);
-    return /*#__PURE__*/React.createElement(OrganisationUnitNode, {
-      autoExpandLoadingError: autoExpandLoadingError,
-      childNodes: grandChildNodes,
-      dataTest: dataTest,
-      disableSelection: disableSelection,
-      displayName: child.displayName,
-      expanded: expanded,
-      filter: filter,
-      highlighted: highlighted,
-      id: child.id,
-      isUserDataViewFallback: isUserDataViewFallback,
-      key: childPath,
-      onChange: onChange,
-      onChildrenLoaded: onChildrenLoaded,
-      onCollapse: onCollapse,
-      onExpand: onExpand,
-      path: childPath,
-      renderNodeLabel: renderNodeLabel,
-      rootId: rootId,
-      selected: selected,
-      singleSelection: singleSelection,
-      suppressAlphabeticalSorting: suppressAlphabeticalSorting
-    });
+  }), showChildNodes && /*#__PURE__*/React.createElement(OrganisationUnitNodeChildren // Prevent cirular imports
+  , {
+    OrganisationUnitNode: OrganisationUnitNode,
+    node: node,
+    autoExpandLoadingError: autoExpandLoadingError,
+    dataTest: dataTest,
+    disableSelection: disableSelection,
+    expanded: expanded,
+    filter: filter,
+    highlighted: highlighted,
+    isUserDataViewFallback: isUserDataViewFallback,
+    onChange: onChange,
+    onChildrenLoaded: onChildrenLoaded,
+    onCollapse: onCollapse,
+    onExpand: onExpand,
+    parentPath: path,
+    renderNodeLabel: renderNodeLabel,
+    rootId: rootId,
+    selected: selected,
+    singleSelection: singleSelection,
+    suppressAlphabeticalSorting: suppressAlphabeticalSorting
   }));
 };
 OrganisationUnitNode.propTypes = {

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

@@ -0,0 +1,69 @@
+import { useDataQuery } from '@dhis2/app-runtime';
+import { useMemo, useEffect, useRef } from 'react';
+import { sortNodeChildrenAlphabetically } from '../helpers/index.js';
+const ORG_DATA_QUERY = {
+  orgUnit: {
+    resource: `organisationUnits`,
+    id: ({
+      id
+    }) => id,
+    params: {
+      fields: 'children[id,path,displayName]'
+    }
+  }
+};
+/**
+ * @param {string[]} ids
+ * @param {Object} options
+ * @param {string} options.displayName
+ * @param {boolean} [options.withChildren]
+ * @returns {Object}
+ */
+
+export const useOrgChildren = ({
+  node,
+  suppressAlphabeticalSorting,
+  onComplete
+}) => {
+  const onCompleteCalledRef = useRef(false);
+  const {
+    called,
+    loading,
+    error,
+    data
+  } = useDataQuery(ORG_DATA_QUERY, {
+    variables: {
+      id: node.id
+    }
+  });
+  const orgChildren = useMemo(() => {
+    if (!data) {
+      return undefined;
+    } // undefined or zero
+
+
+    if (!node.children) {
+      return [];
+    }
+
+    const {
+      orgUnit
+    } = data;
+    return suppressAlphabeticalSorting ? orgUnit.children : sortNodeChildrenAlphabetically(orgUnit.children);
+  }, [data, suppressAlphabeticalSorting]);
+  useEffect(() => {
+    if (onComplete && orgChildren && !onCompleteCalledRef.current) {
+      // For backwards compatibility: Pass entire node incl. children
+      onComplete({ ...node,
+        children: orgChildren
+      });
+      onCompleteCalledRef.current = true;
+    }
+  }, [onComplete, orgChildren, onCompleteCalledRef]);
+  return {
+    called,
+    loading,
+    error: error || null,
+    data: orgChildren
+  };
+};

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

@@ -0,0 +1,311 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import { renderHook } from '@testing-library/react-hooks';
+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
+  }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+    data: dataProviderData
+  }, children);
+
+  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,
+      waitForNextUpdate
+    } = 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 waitForNextUpdate();
+  });
+  it('should provide the org unit data', async () => {
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren({
+      node
+    }), {
+      wrapper
+    });
+    await waitForNextUpdate();
+    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
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: {
+        organisationUnits: async () => {
+          throw new Error('Error message');
+        }
+      }
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren({
+      node
+    }), {
+      wrapper: errorWrapper
+    });
+    await waitForNextUpdate();
+    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
+    };
+    const {
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren(options), {
+      wrapper
+    });
+    await waitForNextUpdate();
+    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
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren({
+      node: { ...node,
+        children: 2
+      }
+    }), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    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
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren(options), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    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
+    }) => /*#__PURE__*/React.createElement(CustomDataProvider, {
+      data: dataProviderDataWithUnsortedChildren
+    }, children);
+
+    const options = {
+      node: { ...node,
+        children: 2
+      },
+      suppressAlphabeticalSorting: true
+    };
+    const {
+      result,
+      waitForNextUpdate
+    } = renderHook(() => useOrgChildren(options), {
+      wrapper: wrapperWithUnsortedChildren
+    });
+    await waitForNextUpdate();
+    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'
+      }]
+    });
+  });
+});