fix: inform parent treenode if there are no child loaded

Author: gjulivan

packages/pluggableWidgets/tree-node-web/src/TreeNode.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, useEffect, useState } from "react";
 import { ObjectItem, ValueStatus } from "mendix";
+import { ReactElement, useEffect, useState } from "react";
 import { TreeNodeContainerProps } from "../typings/TreeNodeProps";
-import { TreeNode as TreeNodeComponent, TreeNodeItem } from "./components/TreeNode";
+import { InfoTreeNodeItem, TreeNode as TreeNodeComponent, TreeNodeItem } from "./components/TreeNode";
 
 function mapDataSourceItemToTreeNodeItem(item: ObjectItem, props: TreeNodeContainerProps): TreeNodeItem {
     return {
@@ -15,8 +15,7 @@ function mapDataSourceItemToTreeNodeItem(item: ObjectItem, props: TreeNodeContai
 
 export function TreeNode(props: TreeNodeContainerProps): ReactElement {
     const { datasource } = props;
-
-    const [treeNodeItems, setTreeNodeItems] = useState<TreeNodeItem[] | null>([]);
+    const [treeNodeItems, setTreeNodeItems] = useState<TreeNodeItem[] | InfoTreeNodeItem | null>([]);
 
     useEffect(() => {
         // only get the items when datasource is actually available
@@ -25,7 +24,9 @@ export function TreeNode(props: TreeNodeContainerProps): ReactElement {
             if (datasource.items && datasource.items.length) {
                 setTreeNodeItems(datasource.items.map(item => mapDataSourceItemToTreeNodeItem(item, props)));
             } else {
-                setTreeNodeItems([]);
+                setTreeNodeItems({
+                    Message: "No data available"
+                });
             }
         }
     }, [datasource.status, datasource.items]);

packages/pluggableWidgets/tree-node-web/src/components/TreeNode.tsx

@@ -16,10 +16,14 @@ export interface TreeNodeItem extends ObjectItem {
     isUserDefinedLeafNode: boolean;
 }
 
+export interface InfoTreeNodeItem {
+    Message: string;
+}
+
 export interface TreeNodeProps extends Pick<TreeNodeContainerProps, "tabIndex"> {
     class: string;
     style?: CSSProperties;
-    items: TreeNodeItem[] | null;
+    items: TreeNodeItem[] | InfoTreeNodeItem | null;
     startExpanded: TreeNodeBranchProps["startExpanded"];
     showCustomIcon: boolean;
     iconPlacement: TreeNodeBranchProps["iconPlacement"];
@@ -62,11 +66,11 @@ export function TreeNode({
         return treeNodeElement?.parentElement?.className.includes(treeNodeBranchUtils.bodyClassName) ?? false;
     }, [treeNodeElement]);
 
-    useInformParentContextOfChildNodes(items?.length ?? 0, isInsideAnotherTreeNode);
+    useInformParentContextOfChildNodes(Array.isArray(items) ? items.length : 0, isInsideAnotherTreeNode);
 
     const changeTreeNodeBranchHeaderFocus = useTreeNodeFocusChangeHandler();
 
-    if (items === null || items.length === 0) {
+    if (items === null || (Array.isArray(items) && items.length === 0)) {
         return null;
     }
 
@@ -78,25 +82,26 @@ export function TreeNode({
             data-focusindex={tabIndex || 0}
             role={level === 0 ? "tree" : "group"}
         >
-            {items.map(item => {
-                const { id, headerContent, bodyContent, isUserDefinedLeafNode } = item;
-                return (
-                    <TreeNodeBranch
-                        key={id}
-                        id={id}
-                        headerContent={headerContent}
-                        isUserDefinedLeafNode={isUserDefinedLeafNode}
-                        startExpanded={startExpanded}
-                        iconPlacement={iconPlacement}
-                        renderHeaderIcon={renderHeaderIconCallback}
-                        changeFocus={changeTreeNodeBranchHeaderFocus}
-                        animateTreeNodeContent={animateTreeNodeContent}
-                        openNodeOn={openNodeOn}
-                    >
-                        {bodyContent}
-                    </TreeNodeBranch>
-                );
-            })}
+            {Array.isArray(items) &&
+                items.map(item => {
+                    const { id, headerContent, bodyContent, isUserDefinedLeafNode } = item;
+                    return (
+                        <TreeNodeBranch
+                            key={id}
+                            id={id}
+                            headerContent={headerContent}
+                            isUserDefinedLeafNode={isUserDefinedLeafNode}
+                            startExpanded={startExpanded}
+                            iconPlacement={iconPlacement}
+                            renderHeaderIcon={renderHeaderIconCallback}
+                            changeFocus={changeTreeNodeBranchHeaderFocus}
+                            animateTreeNodeContent={animateTreeNodeContent}
+                            openNodeOn={openNodeOn}
+                        >
+                            {bodyContent}
+                        </TreeNodeBranch>
+                    );
+                })}
         </ul>
     );
 }

packages/pluggableWidgets/tree-node-web/src/components/hooks/lazyLoading.ts

@@ -10,7 +10,7 @@ export const useTreeNodeLazyLoading = (
     hasNestedTreeNode: () => boolean;
 } => {
     const hasNestedTreeNode = useCallback(
-        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? false,
+        () => treeNodeBranchBody.current?.lastElementChild?.className.includes("widget-tree-node") ?? true,
         []
     );