@dhis2-ui/organisation-unit-tree 7.2.8 → 7.4.2

package/build/es/__stories__/filtered.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const Filtered = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  initiallyExpanded: ['/A0000000000/A0000000001'],
+  filter: ['/A0000000000/A0000000001']
+});

package/build/es/__stories__/force-reload-all.js

@@ -0,0 +1,38 @@
+import _JSXStyle from "styled-jsx/style";
+import { Button } from '@dhis2/ui';
+import React, { useState } from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const ForceReloadAll = () => {
+  const [forceReload, _setForceReload] = useState(false);
+
+  const setForceReload = v => console.log('setForceReload', v) || _setForceReload(v);
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    disabled: forceReload,
+    onClick: () => setForceReload(true)
+  }, "Reload org unit tree"), ' ', /*#__PURE__*/React.createElement("span", {
+    className: "jsx-2109967648"
+  }, "(Force reload: ", forceReload ? 'true' : 'false', ")"), /*#__PURE__*/React.createElement("div", {
+    className: "jsx-2109967648"
+  }, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+    onChange: onChange,
+    forceReload: forceReload,
+    name: "Root org unit",
+    roots: ['A0000000000'],
+    initiallyExpanded: ['/A0000000000/A0000000001'],
+    selected: ['/A0000000000/A0000000001/A0000000003'],
+    onChildrenLoaded: data => {
+      const {
+        id
+      } = data;
+
+      if (id === 'A0000000000') {
+        setForceReload(false);
+      }
+    }
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2109967648"
+  }, ["div.jsx-2109967648{width:400px;border:1px solid black;margin-top:32px;padding:16px;min-height:200px;}"]));
+};
+ForceReloadAll.storyName = 'Force reload all';

package/build/es/__stories__/force-reload-one-unit.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export const ForceReloadOneUnit = () => {
+  return /*#__PURE__*/React.createElement("p", null, "This is currently not working due to limitations of the data engine in the app runtime."); //const [idsThatShouldBeReloaded, setIdsThatShouldBeReloaded] = useState([])
+  //useEffect(() => {
+  //    setTimeout(() => setIdsThatShouldBeReloaded(['A0000000001']), delay)
+  //}, [])
+  //return (
+  //    <OrganisationUnitTree
+  //        onChange={onChange}
+  //        idsThatShouldBeReloaded={idsThatShouldBeReloaded}
+  //        name="Root org unit"
+  //        roots={['A0000000000']}
+  //        initiallyExpanded={['/A0000000000', '/A0000000000/A0000000001']}
+  //        selected={['/A0000000000/A0000000001/A0000000003']}
+  //        onChildrenLoaded={({ path, forced }) =>
+  //            console.log(
+  //                `Unit with path "${path}" loaded, was forced: ${
+  //                    forced ? 'yes' : 'no'
+  //                }`
+  //            )
+  //        }
+  //    />
+  //)
+};
+ForceReloadOneUnit.storyName = 'Force reload one unit';

package/build/es/__stories__/highlighted.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const Highlighted = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  highlighted: ['/A0000000000/A0000000001'],
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  initiallyExpanded: ['/A0000000000']
+});

package/build/es/__stories__/indeterminate.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const Indeterminate = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  selected: ['/A0000000000/A0000000001'],
+  initiallyExpanded: ['/A0000000000']
+});

package/build/es/__stories__/loading-error-grandchild.js

@@ -0,0 +1,29 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { customData, onChange, onExpand, onCollapse, onChildrenLoaded } from './shared.js';
+export const LoadingErrorGrandchild = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: { ...customData,
+    organisationUnits: (...args) => {
+      const [, {
+        id
+      }] = args;
+
+      if (id === 'A0000000003') {
+        return Promise.reject('Loading org unit 4 and 5 failed');
+      }
+
+      return customData.organisationUnits(...args);
+    }
+  }
+}, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  autoExpandLoadingError: true,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  onChange: onChange,
+  onExpand: onExpand,
+  onCollapse: onCollapse,
+  onChildrenLoaded: onChildrenLoaded,
+  initiallyExpanded: ['/A0000000000/A0000000001']
+}));
+LoadingErrorGrandchild.storyName = 'Loading error grandchild';

package/build/es/__stories__/loading.js

@@ -0,0 +1,24 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { customData, onChange } from './shared.js';
+export const Loading = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: { ...customData,
+    organisationUnits: (...args) => {
+      const [, {
+        id
+      }] = args;
+
+      if (id === 'A0000000001') {
+        return new Promise(() => null);
+      }
+
+      return customData.organisationUnits(...args);
+    }
+  }
+}, /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  initiallyExpanded: ['/A0000000000/A0000000001']
+}));

package/build/es/__stories__/multiple-roots.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const MultipleRoots = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000', 'A0000000001'],
+  initiallyExpanded: ['/A0000000000/A0000000001']
+});
+MultipleRoots.storyName = 'Multiple roots';

package/build/es/__stories__/no-selection.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const NoSelection = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  disableSelection: true,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  selected: ['/A0000000000/A0000000001'],
+  initiallyExpanded: ['/A0000000000']
+});
+NoSelection.storyName = 'No selection';

package/build/es/__stories__/replace-roots.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export const ReplaceRoots = () => {
+  return /*#__PURE__*/React.createElement("p", null, "This is currently not working due to limitations of the data engine in the app runtime. Normally the root unit would've been replaced after 1000 milliseconds."); //const [roots, setRoots] = useState(['A0000000000'])
+  //useEffect(() => {
+  //    setTimeout(() => setRoots(['A0000000001']), delay)
+  //}, [])
+  //return (
+  //    <OrganisationUnitTree
+  //        name="Root org unit"
+  //        roots={roots}
+  //        onChange={console.log.bind(null, 'onChange')}
+  //        initiallyExpanded={['/A0000000001']}
+  //    />
+  //)
+};
+ReplaceRoots.storyName = 'Replace roots';

package/build/es/__stories__/root-error.js

@@ -0,0 +1,33 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { customData, onChange } from './shared.js';
+export const RootError = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: { ...customData,
+    organisationUnits: (...args) => {
+      const [, {
+        id
+      }] = args;
+
+      if (id === 'A0000000000') {
+        return Promise.reject('This is a custom error message, it could be anything');
+      }
+
+      return customData.organisationUnits(...args);
+    }
+  }
+}, /*#__PURE__*/React.createElement("fieldset", {
+  style: {
+    maxWidth: 600
+  }
+}, /*#__PURE__*/React.createElement("legend", {
+  style: {
+    padding: '0 10px'
+  }
+}, "Custom container (max-width: 600px)"), /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  initiallyExpanded: ['/A0000000000/A0000000001']
+})));
+RootError.storyName = 'Root error';

package/build/es/__stories__/root-loading.js

@@ -0,0 +1,33 @@
+import { CustomDataProvider } from '@dhis2/app-runtime';
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { customData, onChange } from './shared.js';
+export const RootLoading = () => /*#__PURE__*/React.createElement(CustomDataProvider, {
+  data: { ...customData,
+    organisationUnits: (...args) => {
+      const [, {
+        id
+      }] = args;
+
+      if (id === 'A0000000000') {
+        return new Promise(() => null);
+      }
+
+      return customData.organisationUnits(...args);
+    }
+  }
+}, /*#__PURE__*/React.createElement("fieldset", {
+  style: {
+    maxWidth: 600
+  }
+}, /*#__PURE__*/React.createElement("legend", {
+  style: {
+    padding: '0 10px'
+  }
+}, "Custom container (max-width: 600px)"), /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  initiallyExpanded: ['/A0000000000/A0000000001']
+})));
+RootLoading.storyName = 'Root loading';

package/build/es/__stories__/selected-multiple.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const SelectedMultiple = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  selected: ['/A0000000000/A0000000002', '/A0000000000/A0000000001/A0000000003'],
+  initiallyExpanded: ['/A0000000000', '/A0000000000/A0000000001']
+});
+SelectedMultiple.storyName = 'Selected multiple';

package/build/es/__stories__/shared.js

@@ -0,0 +1,120 @@
+export const log = true;
+export const onChange = (...args) => log && console.log('onChange', ...args);
+export const onExpand = (...args) => log && console.log('onExpand', ...args);
+export const onCollapse = (...args) => log && console.log('onCollapse', ...args);
+export const onChildrenLoaded = (...args) => log && console.log('onChildrenLoaded', ...args);
+export const customData = {
+  organisationUnits: (type, {
+    id
+  }) => {
+    let data;
+    let delay = 0;
+
+    if (id === 'A0000000000') {
+      delay = 1000;
+      data = {
+        id: 'A0000000000',
+        path: '/A0000000000',
+        displayName: 'Org Unit 1',
+        children: [{
+          id: 'A0000000001',
+          path: '/A0000000000/A0000000001',
+          children: [{
+            id: 'A0000000003'
+          }, {
+            id: 'A0000000004'
+          }],
+          displayName: 'Org Unit 2'
+        }, {
+          id: 'A0000000002',
+          path: '/A0000000000/A0000000002',
+          children: [],
+          displayName: 'Org Unit 3'
+        }, {
+          id: 'A0000000006',
+          path: '/A0000000000/A0000000006',
+          children: [],
+          displayName: 'Org Unit 7'
+        }]
+      };
+    }
+
+    if (id === 'A0000000001') {
+      data = {
+        id: 'A0000000001',
+        path: '/A0000000000/A0000000001',
+        displayName: 'Org Unit 2',
+        children: [{
+          id: 'A0000000003',
+          path: '/A0000000000/A0000000001/A0000000003',
+          children: [],
+          displayName: 'Org Unit 4'
+        }, {
+          id: 'A0000000004',
+          path: '/A0000000000/A0000000001/A0000000004',
+          children: [],
+          displayName: 'Org Unit 5'
+        }]
+      };
+    }
+
+    if (id === 'A0000000002') {
+      delay = 1000;
+      data = {
+        displayName: 'Org Unit 3',
+        id: 'A0000000002',
+        path: '/A0000000000/A0000000002',
+        children: []
+      };
+    }
+
+    if (id === 'A0000000003') {
+      data = {
+        displayName: 'Org Unit 4',
+        id: 'A0000000003',
+        path: '/A0000000000/A0000000001/A0000000003',
+        children: [{
+          id: 'A0000000007',
+          path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+          children: [],
+          displayName: 'Org Unit 8'
+        }]
+      };
+    }
+
+    if (id === 'A0000000004') {
+      data = {
+        displayName: 'Org Unit 5',
+        id: 'A0000000004',
+        path: '/A0000000000/A0000000001/A0000000004',
+        children: []
+      };
+    }
+
+    if (id === 'A0000000006') {
+      data = {
+        displayName: 'Org Unit 7',
+        id: 'A0000000006',
+        path: '/A0000000000/A0000000006',
+        children: []
+      };
+    }
+
+    if (id === 'A0000000007') {
+      data = {
+        displayName: 'Org Unit 8',
+        id: 'A0000000007',
+        path: '/A0000000000/A0000000001/A0000000003/A0000000007',
+        children: []
+      };
+    }
+
+    if (!data) {
+      return Promise.reject(new Error('404 - Org unit not found'));
+    }
+
+    return new Promise(resolve => {
+      setTimeout(() => resolve(data), delay);
+    });
+  }
+};

package/build/es/__stories__/single-selection.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { OrganisationUnitTree } from '../index.js';
+import { onChange } from './shared.js';
+export const SingleSelection = () => /*#__PURE__*/React.createElement(OrganisationUnitTree, {
+  onChange: onChange,
+  singleSelection: true,
+  name: "Root org unit",
+  roots: ['A0000000000'],
+  selected: ['/A0000000000/A0000000001'],
+  initiallyExpanded: ['/A0000000000']
+});
+SingleSelection.storyName = 'Single selection';

package/build/es/features/controlled_expanded/index.js

@@ -0,0 +1,57 @@
+import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { getOrganisationUnitData, namespace } from '../../__e2e__/common.js';
+
+const expectOrgUnitsToBeDisplayed = ids => {
+  const expandedLabels = ids.map(id => getOrganisationUnitData(id).displayName);
+  expandedLabels.forEach(label => {
+    cy.get(`:contains("${label}")`).should('exist');
+  });
+};
+
+const expectOrgUnitsToNotBeDisplayed = ids => {
+  const expandedLabels = ids.map(id => {
+    const data = getOrganisationUnitData(id);
+    return data.displayName;
+  });
+  expandedLabels.forEach(label => {
+    cy.get(`:contains("${label}")`).should('not.exist');
+  });
+};
+
+Given('the initial state of the controlled expanded prop has some paths', () => {
+  cy.visitStory(namespace, 'Controlled');
+  cy.window().then(win => {
+    cy.wrap(win.initiallyExpandedPaths).as('providedPaths');
+  });
+});
+When('the org unit tree should is done loading the provided paths', () => {
+  cy.window().then(win => {
+    const expandedIds = win.initiallyExpandedPaths.map(path => path.match(/[^/]+$/)[0]);
+    expectOrgUnitsToBeDisplayed(expandedIds);
+  });
+});
+When('the user clicks on a button to collapse one of the opened paths', () => {
+  cy.window().then(win => {
+    cy.wrap([win.orgUnitPathToExpand]).as('providedPaths');
+  });
+  cy.get('[data-test="org-unit-toggle"]').click();
+});
+Then('the org unit tree should open the provided paths when done loading', () => {
+  cy.get('@providedPaths').then(providedPaths => {
+    const providedIds = providedPaths.map(path => path.match(/[^/]+$/)[0]);
+    expectOrgUnitsToBeDisplayed(providedIds);
+  });
+});
+Then('the path should close', () => {
+  cy.get('@providedPaths').then(providedPaths => {
+    const providedIds = providedPaths.map(path => path.match(/[^/]+$/)[0]);
+    const hiddenChildrenIds = providedIds.reduce((acc, cur) => {
+      const curData = getOrganisationUnitData(cur);
+      const childrenIds = curData.children.map(({
+        id
+      }) => id);
+      return [...acc, ...childrenIds];
+    }, []);
+    expectOrgUnitsToNotBeDisplayed(hiddenChildrenIds);
+  });
+});

package/build/es/features/controlled_expanded.feature

@@ -0,0 +1,11 @@
+Feature: The expanded paths of the org unit tree can be controlled
+
+    Scenario: The org unit tree expands some paths initially
+        Given the initial state of the controlled expanded prop has some paths
+        Then the org unit tree should open the provided paths when done loading
+
+    Scenario: The user collapses a path by pressing a button
+        Given the initial state of the controlled expanded prop has some paths
+        When the org unit tree should is done loading the provided paths
+        When the user clicks on a button to collapse one of the opened paths
+        Then the path should close

package/build/es/features/tree_api/index.js

@@ -98,8 +98,6 @@ Then("the payload contains the loaded children's data", () => {
     const {
       args
     } = calls[calls.length - 1];
-    expect(args[0]).to.deep.eql(win.dataProviderData.organisationUnits('get', {
-      id: 'A0000000001'
-    }));
+    expect(args[0].id).to.equal('A0000000001');
   });
 });

package/build/es/get-all-expanded-paths/get-all-expanded-paths.js

@@ -0,0 +1,31 @@
+/**
+ * @template T
+ * @param {Array.<T>} arr
+ * @returns {Array.<T>}
+ */
+const removeDuplicates = arr => Array.from(new Set(arr));
+/**
+ * @param {string} path
+ * @returns {string[]}
+ */
+
+
+const extractAllPathsFromPath = path => {
+  // remove leading slash and split by path delimiter/slashes
+  const segments = path.replace(/^\//, '').split('/');
+  const withSubPaths = segments.map((segment, index) => {
+    // take all segments from 0 to index and join them with the delimiter
+    return `/${segments.slice(0, index + 1).join('/')}`;
+  });
+  return removeDuplicates(withSubPaths);
+};
+/**
+ * @param {string[]} initiallyExpanded
+ * @returns {string[]}
+ */
+
+
+export const getAllExpandedPaths = initiallyExpanded => initiallyExpanded.reduce((all, curPath) => {
+  const allPathsInCurPath = extractAllPathsFromPath(curPath);
+  return [...all, ...allPathsInCurPath];
+}, []);

package/build/es/get-all-expanded-paths/get-all-expanded-paths.test.js

@@ -0,0 +1,14 @@
+import { getAllExpandedPaths } from './get-all-expanded-paths.js';
+describe('OrganisationUnitTree - getAllExpandedPaths', () => {
+  const initiallyExpanded = ['/foo/bar/baz', '/foobar/barbaz/bazfoo'];
+  it('should include all initiallyExpanded paths in the returned expanded array', () => {
+    const actual = getAllExpandedPaths(initiallyExpanded);
+    const expected = expect.arrayContaining(initiallyExpanded);
+    expect(actual).toEqual(expected);
+  });
+  it('should include all sub paths of the paths in initiallyExpanded in the returned exanded array', () => {
+    const actual = getAllExpandedPaths(initiallyExpanded);
+    const expected = expect.arrayContaining(['/foo', '/foo/bar', '/foobar', '/foobar/barbaz']);
+    expect(actual).toEqual(expected);
+  });
+});

package/build/es/get-all-expanded-paths/index.js

@@ -0,0 +1 @@
+export { getAllExpandedPaths } from './get-all-expanded-paths.js';

package/build/es/index.js

@@ -1 +1,2 @@
-export { OrganisationUnitTree } from './organisation-unit-tree/index.js';
+export { OrganisationUnitTree } from './organisation-unit-tree/index.js';
+export { getAllExpandedPaths as getAllExpandedOrgUnitPaths } from './get-all-expanded-paths/index.js';

package/build/es/organisation-unit-node/use-open-state.js

@@ -20,30 +20,25 @@ export const useOpenState = ({
 }) => {
   const autoExpand = autoExpandLoadingError && !!errorMessage;
   const [openedOnceDueToError, setOpenedOnce] = useState(!!errorMessage);
-  const [open, setOpen] = useState(autoExpand || expanded.includes(path));
   useEffect(() => {
     if (autoExpand && !openedOnceDueToError) {
-      setOpen(true);
+      onExpand({
+        path
+      });
       setOpenedOnce(true);
     }
   }, [autoExpand, openedOnceDueToError]);
+  const open = autoExpand && !openedOnceDueToError || !!expanded.includes(path);
 
-  const onToggleOpen = () => {
-    const newOpen = !open;
-    const payload = {
-      path
-    };
-    setOpen(newOpen);
-
-    if (onExpand && newOpen) {
-      onExpand(payload);
-    } else if (onCollapse && !newOpen) {
-      onCollapse(payload);
-    }
-  };
+  const onToggleOpen = () => !open ? onExpand({
+    path
+  }) : onCollapse({
+    path
+  });
 
   return {
     open,
-    onToggleOpen
+    onToggleOpen,
+    openedOnceDueToError
   };
 };