refactor(render node label): return label children instead of whole l…

…abel component

components/organisation-unit-tree/src/__stories__/custom-node-label.js

@@ -6,15 +6,14 @@ export const CustomNodeLabel = () => (
         name="Root org unit"
         roots="A0000000000"
         initiallyExpanded={['/A0000000000/A0000000001']}
-        renderNodeLabel={data => {
-            if (data.node.path !== '/A0000000000/A0000000001') {
-                return OrganisationUnitTree.defaultProps.renderNodeLabel(data)
+        renderNodeLabel={({ node, loading }) => {
+            const { displayName } = node
+
+            if (loading) {
+                return `${displayName} (loading)`
             }
 
-            return OrganisationUnitTree.defaultProps.renderNodeLabel({
-                ...data,
-                label: <span>--- {data.node.displayName}</span>,
-            })
+            return <span>--- {displayName}</span>
         }}
     />
 )

components/organisation-unit-tree/src/__stories__/custom-requests.js

@@ -63,30 +63,22 @@ export const CustomRequests = () => {
             name="Root org unit"
             roots={['A0000000000']}
             initiallyExpanded={['/A0000000000/A0000000001/A0000000003']}
-            renderNodeLabel={data => {
-                if (data.loading) {
-                    return OrganisationUnitTreeControllable.defaultProps.renderNodeLabel(
-                        data
-                    )
+            renderNodeLabel={({ loading, node, additional }) => {
+                const { displayName } = node
+
+                if (loading) {
+                    return displayName
                 }
 
-                const { approvalStatuses } = data.additional
+                const { approvalStatuses } = additional
                 const [approvalStatus] = approvalStatuses
                 const { permissions } = approvalStatus
                 const { mayApprove } = permissions
 
-                const formatted = {
-                    ...data,
-                    label: (
-                        <span>
-                            {data.node.displayName} (mayApprove:{' '}
-                            {mayApprove.toString()})
-                        </span>
-                    ),
-                }
-
-                return OrganisationUnitTreeControllable.defaultProps.renderNodeLabel(
-                    formatted
+                return (
+                    <span>
+                        {displayName} (mayApprove: {mayApprove.toString()})
+                    </span>
                 )
             }}
         />

components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/label/label.js → components/organisation-unit-tree/src/organisation-unit-node/label/label.js

@@ -1,6 +1,6 @@
 import propTypes from 'prop-types'
 import React from 'react'
-import { orgUnitPathPropType } from '../../../prop-types.js'
+import { orgUnitPathPropType } from '../../prop-types.js'
 import { DisabledSelectionLabel } from './disabled-selection-label.js'
 import { IconizedCheckbox } from './iconized-checkbox.js'
 import { LabelContainer } from './label-container.js'

components/organisation-unit-tree/src/organisation-unit-node/organisation-unit-node.js

@@ -9,6 +9,7 @@ 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 { useOpenState } from './use-open-state.js'
 
 const loadingSpinnerStyles = resolve`
@@ -90,26 +91,43 @@ export const OrganisationUnitNode = ({
 
     const isSelected = selected.includes(path)
 
-    const label = renderNodeLabel({
+    const labelContent = renderNodeLabel({
         additional,
         disableSelection,
         hasChildren,
         hasSelectedDescendants,
         loading,
         error,
-        onChange,
         selected,
-        onToggleOpen,
         open,
         path,
         singleSelection,
         node: organisationUnit,
         label: organisationUnit.displayName,
         checked: isSelected,
-        dataTest: `${dataTest}-label`,
         highlighted: isHighlighted,
     })
 
+    const label = (
+        <Label
+            node={organisationUnit}
+            open={open}
+            loading={loading}
+            checked={isSelected}
+            onChange={onChange}
+            dataTest={`${dataTest}-label`}
+            selected={selected}
+            hasChildren={hasChildren}
+            highlighted={isHighlighted}
+            onToggleOpen={onToggleOpen}
+            disableSelection={disableSelection}
+            singleSelection={singleSelection}
+            hasSelectedDescendants={hasSelectedDescendants}
+        >
+            {labelContent}
+        </Label>
+    )
+
     /**
      * No children means no arrow, therefore we have to provide something.
      * While "loading" is true, "hasChildren" is false

components/organisation-unit-tree/src/organisation-unit-tree/default-render-node-label/default-render-node-label.js

@@ -1,37 +1 @@
-import React from 'react'
-import { Label } from './label/index.js'
-
-export const defaultRenderNodeLabel = ({
-    node,
-    dataTest = `${dataTest}-label`,
-    disableSelection,
-    hasChildren,
-    hasSelectedDescendants,
-    highlighted,
-    checked,
-    label,
-    loading,
-    onChange,
-    onToggleOpen,
-    open,
-    selected,
-    singleSelection,
-}) => (
-    <Label
-        node={node}
-        checked={checked}
-        dataTest={dataTest}
-        disableSelection={disableSelection}
-        hasChildren={hasChildren}
-        hasSelectedDescendants={hasSelectedDescendants}
-        highlighted={highlighted}
-        loading={loading}
-        onChange={onChange}
-        selected={selected}
-        onToggleOpen={onToggleOpen}
-        open={open}
-        singleSelection={singleSelection}
-    >
-        {label}
-    </Label>
-)
+export const defaultRenderNodeLabel = ({ label }) => label

components/organisation-unit-tree/src/organisation-unit-tree/organisation-unit-tree.js

@@ -174,30 +174,23 @@ 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. In order to change the displayed node while keeping
-     * the existing functionality intact, you can re-use the original prop
-     * and overwrite the label property.
+    /** Renders the actual node label content for each leaf, can be used to
+     * customize the node. The default function just returns the node's
+     * displayName
      *
      * @example
-     * renderNodeLabel={data => {
-     *   return OrganisationUnitTree.defaultProps.renderNodeLabel({
-     *     ...data,
-     *     label: (
-     *        <MyCustomComponent>
-     *            {data.node.displayName}
-     *        </MyCustomComponent>
-     *     ),
-     *   })
-     * }}
+     * renderNodeLabel={data => (
+     *    <strong>
+     *      {data.node.displayName.toUpperCase()}
+     *    </strong>
+     * )}
      *
      * @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.error]
      * @param {string[]} data.selected
      * @param {boolean} data.disableSelection
@@ -208,8 +201,9 @@ OrganisationUnitTree.propTypes = {
      * @param {boolean} data.loading
      * @param {boolean} data.open
      * @param {boolean} data.singleSelection
-     * @param {Function} data.onChange
-     * @param {Function} data.onToggleOpen
+     * @param {Object} data.additional
+     * If the request is being customized, then all responses except the org
+     * unit's response data will be included in this object
      */
     renderNodeLabel: propTypes.func,