refactor(org unit tree): implement PR feedback

dhis2 · Jul 30, 2021 · 399375e · 399375e
1 parent 0c664e4
commit 399375e
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 61 deletions.
diff --git a/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js b/components/organisation-unit-tree/src/__e2e__/displaying_loading_error.stories.e2e.js
@@ -25,7 +25,7 @@ const dataProviderDataWithError = {
 
 storiesOf(namespace, module)
     .add('A0000000001 loading error', () => (
-        <CustomDataProvider data={dataPriverDataWithError}>
+        <CustomDataProvider data={dataProviderDataWithError}>
             <StatefulMultiSelectionWrapper>
                 {() => (
                     <OrganisationUnitTree
@@ -37,7 +37,7 @@ storiesOf(namespace, module)
         </CustomDataProvider>
     ))
     .add('A0000000001 loading error autoexpand', () => (
-        <CustomDataProvider data={dataPriverDataWithError}>
+        <CustomDataProvider data={dataProviderDataWithError}>
             <StatefulMultiSelectionWrapper>
                 {() => (
                     <OrganisationUnitTree

diff --git a/...it-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js b/...it-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js
@@ -13,7 +13,6 @@ export const defaultRenderNodeLabel = ({
     onChange,
     onToggleOpen,
     open,
-    path,
     selected,
     singleSelection,
 }) => (
@@ -31,7 +30,7 @@ export const defaultRenderNodeLabel = ({
         selected={selected}
         onToggleOpen={onToggleOpen}
         open={open}
-        path={path}
+        path={node.path}
         singleSelection={singleSelection}
     />
 )
diff --git a/...rganisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js b/...rganisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js
@@ -72,9 +72,7 @@ const Label = ({
                     label={displayName}
                     onChange={onClick}
                     loading={loading}
-                >
-                    {displayName}
-                </SingleSelectionLabel>
+                />
             </LabelContainer>
         )
     }

diff --git a/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js b/components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js
@@ -150,33 +150,45 @@ OrganisationUnitTree.propTypes = {
     /** When provided, the 'isUserDataViewFallback' option will be sent when requesting the org units */
     isUserDataViewFallback: propTypes.bool,
 
-    /** Renders the actual node component for each leaf, can be used to customize the node.
-     * The `node`'s data is incomplete while `loading` is true.
-     * `{
-     *    node: {
-     *      displayName: string,
-     *      id?: string,
-     *      path?: string,
-     *      children?: Array.<{
-     *        id: string,
-     *        path: string,
-     *        displayName: string
-     *      }>
-     *    },
-     *    dataTest: string,
-     *    disableSelection: boolean,
-     *    hasChildren: boolean,
-     *    hasSelectedDescendants: boolean,
-     *    highlighted: boolean,
-     *    checked: boolean,
-     *    loading: boolean,
-     *    onChange: Function,
-     *    onToggleOpen: Function,
-     *    open: boolean,
-     *    path: string,
-     *    selected: Array.<string>,
-     *    singleSelection: boolean,
-     *  }` */
+    /** Renders the actual node component for each leaf, can be used to
+     * customize the node.  In order to change the displayed node while keeping
+     * the existing functionality intact, you can re-use the original prop
+     * and overwrite the node's displayName.
+     *
+     * @example
+     * renderNodeLabel={data => {
+     *   return OrganisationUnitTree.defaultProps.renderNodeLabel({
+     *     ...data,
+     *     node: {
+     *       ...data.node,
+     *       displayName: (
+     *          <MyCustomComponent>
+     *              {data.node.displayName}
+     *          </MyCustomComponent>
+     *       ),
+     *     },
+     *   })
+     * }}
+     *
+     * @param {Object} data
+     * @param {Object} data.node
+     * @param {string} data.node.displayName
+     * @param {string} data.node.id
+     * @param {string} [data.node.path] Only provided once `loading` is false
+     * @param {Object} [data.node.children] Only provided once `loading` is false
+     * @param {string} data.dataTest
+     * @param {string[]} data.selected
+     * @param {boolean} data.disableSelection
+     * @param {boolean} data.hasChildren
+     * @param {boolean} data.hasSelectedDescendants
+     * @param {boolean} data.highlighted
+     * @param {boolean} data.checked
+     * @param {boolean} data.loading
+     * @param {boolean} data.open
+     * @param {boolean} data.singleSelection
+     * @param {Function} data.onChange
+     * @param {Function} data.onToggleOpen
+     */
     renderNodeLabel: propTypes.func,
 
     /** An array of paths of selected OUs. The path of an OU is the UIDs of the OU and all its parent OUs separated by slashes (`/`) */

diff --git a/...tion-unit-tree/src/organisation-unit-tree/use-root-org-data/patch-missing-display-name.js b/...tion-unit-tree/src/organisation-unit-tree/use-root-org-data/patch-missing-display-name.js
@@ -1,12 +1,3 @@
-export const fromEntries = entries =>
-    entries.reduce(
-        (collection, [key, name]) => ({
-            ...collection,
-            [key]: name,
-        }),
-        {}
-    )
-
 /**
  * Note by JGS: I can't recall why this is necessary,
  * but it's there.. So I guess it's better to leave it in for now
@@ -25,5 +16,5 @@ export const patchMissingDisplayName = nodes => {
         return [id, { ...node, displayName }]
     })
 
-    return fromEntries(nodesWithDisplayName)
+    return Object.fromEntries(nodesWithDisplayName)
 }
diff --git a/...unit-tree/src/organisation-unit-tree/use-root-org-data/patch-missing-display-name.test.js b/...unit-tree/src/organisation-unit-tree/use-root-org-data/patch-missing-display-name.test.js
@@ -1,20 +1,4 @@
-import {
-    fromEntries,
-    patchMissingDisplayName,
-} from './patch-missing-display-name.js'
-
-describe('fromEntries', () => {
-    it('should transform an array of entries to an object', () => {
-        const expected = { key1: 'value1', key2: 'value2', key3: 'value3' }
-        const actual = fromEntries([
-            ['key1', 'value1'],
-            ['key2', 'value2'],
-            ['key3', 'value3'],
-        ])
-
-        expect(actual).toEqual(expected)
-    })
-})
+import { patchMissingDisplayName } from './patch-missing-display-name.js'
 
 describe('patchMissingDisplayName', () => {
     it('should add an empty string as displayName if the prop is falsy', () => {