@evoke-platform/ui-components 1.15.0 → 1.16.0

package/dist/published/components/custom/CriteriaBuilder/CriteriaBuilder.test.js

@@ -1,74 +1,196 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { expect, it } from 'vitest';
+import { beforeEach, describe, it, vi } from 'vitest';
 import CriteriaBuilder from './CriteriaBuilder';
-const mockProperties = [
-    {
-        id: 'name',
-        name: 'Name',
-        type: 'string',
-    },
-    {
-        id: 'age',
-        name: 'Age',
-        type: 'integer',
-    },
-    {
-        id: 'birthDate',
-        name: 'Birth Date',
-        type: 'date',
-    },
-    {
-        id: 'createdTime',
-        name: 'Created Time',
-        type: 'time',
-    },
-    {
-        id: 'tags',
-        name: 'Tags',
-        type: 'array',
-        enum: ['tag1', 'tag2', 'tag3'],
-    },
-    {
-        id: 'status',
-        name: 'Status',
-        type: 'string',
-        enum: ['active', 'inactive', 'pending'],
-    },
-    {
-        id: 'profilePic',
-        name: 'Profile Picture',
-        type: 'image',
-    },
-    {
-        id: 'metadata',
-        name: 'Metadata',
-        type: 'document',
-    },
-    {
-        id: 'percentCompleted',
-        name: 'Percent Completed',
-        type: 'number',
-    },
-    {
-        id: 'boolean',
-        name: 'Boolean',
-        type: 'boolean',
-    },
-    {
-        id: 'regularRelatedObject',
-        name: 'Regular Related Object',
-        type: 'object',
-        objectId: 'relatedObjectId',
-    },
-    {
-        id: 'dynamicRelatedObject',
-        name: 'Dynamic Related Object',
-        type: 'object',
-    },
-];
+describe('CriteriaBuilderWithTreeView', () => {
+    // Mock function for setCriteria
+    const setCriteriaMock = vi.fn();
+    beforeEach(() => {
+        // Reset the mock before each test
+        setCriteriaMock.mockReset();
+    });
+    it('expands related object property', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CriteriaBuilder, { treeViewOpts: {
+                object: {
+                    id: 'objectA',
+                    name: 'Object A',
+                    properties: [
+                        {
+                            id: 'relatedObjectProp',
+                            name: 'Related Object Prop',
+                            type: 'object',
+                            objectId: 'objectB',
+                            children: [
+                                {
+                                    id: 'relatedObjectProp-loading',
+                                    name: 'Loading...',
+                                    type: 'loading',
+                                },
+                            ],
+                        },
+                    ],
+                },
+                fetchObject: async (id) => {
+                    if (id === 'objectB') {
+                        // add delay to simulate network request
+                        return new Promise((resolve) => setTimeout(() => {
+                            resolve({
+                                id: 'objectB',
+                                name: 'Object B',
+                                properties: [
+                                    {
+                                        id: 'id',
+                                        name: 'ID',
+                                        type: 'string',
+                                    },
+                                    {
+                                        id: 'name',
+                                        name: 'Name',
+                                        type: 'string',
+                                    },
+                                ],
+                            });
+                        }, 5000));
+                    }
+                    return undefined;
+                },
+            }, properties: [], criteria: {}, setCriteria: setCriteriaMock }));
+        // Step 1: Click "Add Condition" button to create a new rule
+        const addConditionButton = screen.getByRole('button', { name: /^add condition$/i });
+        await user.click(addConditionButton);
+        // Step 2: Click on the property selector to open the dropdown
+        const propertySelector = screen.getByPlaceholderText(/select a property/i);
+        await user.click(propertySelector);
+        // Step 3: Click on "Related Object Prop" to expand it and fetch its children
+        const relatedObjectPropItem = screen.getByText('Related Object Prop');
+        await user.click(relatedObjectPropItem);
+        // Step 4: Verify loading indicator is shown
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        // Step 5: Wait for the related object properties to load and verify ID and Name are visible
+        await waitFor(() => {
+            expect(screen.getByText('ID')).toBeInTheDocument();
+            // eslint-disable-next-line testing-library/no-wait-for-multiple-assertions
+            expect(screen.getByText('Name')).toBeInTheDocument();
+        }, { timeout: 6000 });
+    });
+    it('fails to expand related object property', async () => {
+        const user = userEvent.setup();
+        render(React.createElement(CriteriaBuilder, { treeViewOpts: {
+                object: {
+                    id: 'objectA',
+                    name: 'Object A',
+                    properties: [
+                        {
+                            id: 'relatedObjectProp',
+                            name: 'Related Object Prop',
+                            type: 'object',
+                            objectId: 'objectB',
+                            children: [
+                                {
+                                    id: 'relatedObjectProp-loading',
+                                    name: 'Loading...',
+                                    type: 'loading',
+                                },
+                            ],
+                        },
+                    ],
+                },
+                fetchObject: async (id) => {
+                    if (id === 'objectB') {
+                        return new Promise((resolve, reject) => {
+                            setTimeout(() => {
+                                reject('Failed to fetch objectB');
+                            }, 5000);
+                        });
+                    }
+                    return undefined;
+                },
+            }, properties: [], criteria: {}, setCriteria: setCriteriaMock }));
+        // Step 1: Click "Add Condition" button to create a new rule
+        const addConditionButton = screen.getByRole('button', { name: /^add condition$/i });
+        await user.click(addConditionButton);
+        // Step 2: Click on the property selector to open the dropdown
+        const propertySelector = screen.getByPlaceholderText(/select a property/i);
+        await user.click(propertySelector);
+        // Step 3: Click on "Related Object Prop" to expand it and fetch its children
+        const relatedObjectPropItem = screen.getByText('Related Object Prop');
+        await user.click(relatedObjectPropItem);
+        // Step 4: Verify loading indicator is shown
+        expect(screen.getByText('Loading...')).toBeInTheDocument();
+        // Step 5: Wait for the related object properties to load and verify ID and Name are visible
+        await waitFor(() => {
+            expect(screen.getByText('Loading Failed')).toBeInTheDocument();
+        }, { timeout: 6000 });
+    });
+});
 describe('CriteriaBuilder', () => {
+    const mockProperties = [
+        {
+            id: 'name',
+            name: 'Name',
+            type: 'string',
+        },
+        {
+            id: 'age',
+            name: 'Age',
+            type: 'integer',
+        },
+        {
+            id: 'birthDate',
+            name: 'Birth Date',
+            type: 'date',
+        },
+        {
+            id: 'createdTime',
+            name: 'Created Time',
+            type: 'time',
+        },
+        {
+            id: 'tags',
+            name: 'Tags',
+            type: 'array',
+            enum: ['tag1', 'tag2', 'tag3'],
+        },
+        {
+            id: 'status',
+            name: 'Status',
+            type: 'string',
+            enum: ['active', 'inactive', 'pending'],
+        },
+        {
+            id: 'profilePic',
+            name: 'Profile Picture',
+            type: 'image',
+        },
+        {
+            id: 'metadata',
+            name: 'Metadata',
+            type: 'document',
+        },
+        {
+            id: 'percentCompleted',
+            name: 'Percent Completed',
+            type: 'number',
+        },
+        {
+            id: 'boolean',
+            name: 'Boolean',
+            type: 'boolean',
+        },
+        {
+            id: 'regularRelatedObject',
+            name: 'Regular Related Object',
+            type: 'object',
+            objectId: 'relatedObjectId',
+        },
+        {
+            id: 'dynamicRelatedObject',
+            name: 'Dynamic Related Object',
+            type: 'object',
+        },
+    ];
     // Mock function for setCriteria
     const setCriteriaMock = vi.fn();
     beforeEach(() => {

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.d.ts

@@ -1,12 +1,12 @@
-import { Property } from '@evoke-platform/context';
 import React from 'react';
-import { EvokeObject } from '../../../types';
+import { TreeViewObject } from './types';
 type PropertyTreeProps = {
-    fetchObject: (id: string) => Promise<EvokeObject | undefined>;
-    rootObject: EvokeObject;
-    handleTreePropertySelect: (propertyId: string) => Promise<void>;
+    fetchObject: (id: string) => Promise<TreeViewObject | undefined>;
+    rootObject: TreeViewObject;
+    setRootObject: React.Dispatch<React.SetStateAction<TreeViewObject>>;
+    handleTreePropertySelect: (propertyId: string) => void;
     value: string | undefined;
-    propertyTreeMap: Record<string, Property>;
+    propertyTreeMap: Record<string, string>;
 };
 declare const PropertyTree: (props: PropertyTreeProps) => React.JSX.Element;
 export default PropertyTree;

package/dist/published/components/custom/CriteriaBuilder/PropertyTree.js

@@ -4,38 +4,25 @@ import { Autocomplete, RichTreeView } from '../../core';
 import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { PropertyTreeItem } from './PropertyTreeItem';
-import { findTreeItemById, truncateNamePath, updateTreeNode } from './utils';
+import { convertTreeViewPropertyToTreeItem, findTreeItemById, truncateNamePath, updateTreeViewProperty } from './utils';
 const NAME_PATH_LIMIT = 35;
 const PropertyTree = (props) => {
-    const { fetchObject, handleTreePropertySelect, rootObject, value, propertyTreeMap } = props;
+    const { fetchObject, handleTreePropertySelect, rootObject, setRootObject, value, propertyTreeMap } = props;
     const [options, setOptions] = useState([]);
     const [expandedItems, setExpandedItems] = useState([]);
     const [openDropdown, setOpenDropdown] = useState(false);
     useEffect(() => {
         // Transform rootObject properties to TreeItem format
-        setOptions(rootObject.properties.map((property) => ({
-            id: property.id,
-            label: property.name,
-            value: property.id,
-            type: property.type,
-            objectId: property.objectId,
-            children: property.children
-                ? property.children.map((child) => ({
-                    id: child.id,
-                    label: child.name,
-                    value: child.id,
-                    type: child.type,
-                    objectId: child.objectId,
-                }))
-                : undefined,
-        })));
-        setExpandedItems([]);
+        setOptions(rootObject.properties.map(convertTreeViewPropertyToTreeItem));
     }, [rootObject.properties]);
     const handleExpandedItemsChange = (e, itemIds) => {
         setExpandedItems(itemIds);
     };
     const handleUpdateNodeChildren = (nodeId, children) => {
-        setOptions((prevOptions) => updateTreeNode(prevOptions, nodeId, (node) => ({ ...node, children })));
+        setRootObject((prevObject) => ({
+            ...prevObject,
+            properties: updateTreeViewProperty(prevObject.properties, nodeId, (node) => ({ ...node, children })),
+        }));
     };
     return (React.createElement(Autocomplete, { "aria-label": "Property Selector", value: value, fullWidth: true, sx: { width: '37%' }, size: "small", disableClearable: true, options: options, open: openDropdown, onBlur: (e) => {
             const targetComponents = e.relatedTarget?.getAttribute('id')?.split('-');
@@ -58,11 +45,11 @@ const PropertyTree = (props) => {
         }, onFocus: () => setOpenDropdown(true), getOptionLabel: (option) => {
             // Retrieve the full name path from the map
             const namePath = typeof option === 'string'
-                ? ((propertyTreeMap[option] ?? '')?.name ?? option)
-                : (propertyTreeMap[option.value]?.name ?? option.value);
+                ? (propertyTreeMap[option] ?? '') || option
+                : propertyTreeMap[option.value] || option.value;
             return truncateNamePath(namePath, NAME_PATH_LIMIT);
         }, renderInput: (params) => {
-            const fullDisplayName = value && propertyTreeMap[value]?.name;
+            const fullDisplayName = value && propertyTreeMap[value];
             return (React.createElement(OverflowTextField, { ...params, "aria-label": fullDisplayName, value: fullDisplayName, placeholder: "Select a property" }));
         }, ListboxComponent: (props) => {
             return (React.createElement(ClickAwayListener, { onClickAway: (e) => {
@@ -73,8 +60,8 @@ const PropertyTree = (props) => {
                 } },
                 React.createElement(Box, { ...props },
                     React.createElement(RichTreeView, { sx: { width: '100%', paddingLeft: 0 }, role: "menu", "aria-label": "Property Tree", expandedItems: expandedItems, onExpandedItemsChange: handleExpandedItemsChange, items: options, slots: {
-                            item: (itemProps) => (React.createElement(PropertyTreeItem, { ...itemProps, items: options, expanded: expandedItems, setExpanded: setExpandedItems, fetchObject: fetchObject, updateNodeChildren: handleUpdateNodeChildren, handleTreePropertySelect: async (propertyId) => {
-                                    await handleTreePropertySelect(propertyId);
+                            item: (itemProps) => (React.createElement(PropertyTreeItem, { ...itemProps, items: options, expanded: expandedItems, setExpanded: setExpandedItems, fetchObject: fetchObject, updateNodeChildren: handleUpdateNodeChildren, handleTreePropertySelect: (propertyId) => {
+                                    handleTreePropertySelect(propertyId);
                                     setOpenDropdown(false);
                                 } })),
                         } }))));

package/dist/published/components/custom/CriteriaBuilder/PropertyTreeItem.d.ts

@@ -1,14 +1,13 @@
 import { TreeItemProps } from '@mui/x-tree-view';
 import React from 'react';
-import { Obj } from '../../../types';
-import { TreeItem } from './types';
+import { TreeItem, TreeViewObject, TreeViewProperty } from './types';
 type PropertyTreeItemProps = TreeItemProps & {
     items: TreeItem[];
     expanded: string[];
     setExpanded: (expanded: string[]) => void;
-    updateNodeChildren: (nodeId: string, children: TreeItem[]) => void;
-    fetchObject: (id: string) => Promise<Obj | undefined>;
-    handleTreePropertySelect: (propertyId: string) => Promise<void>;
+    updateNodeChildren: (nodeId: string, children: TreeViewProperty[]) => void;
+    fetchObject: (id: string) => Promise<TreeViewObject | undefined>;
+    handleTreePropertySelect: (propertyId: string) => void;
 };
 export declare const PropertyTreeItem: (props: PropertyTreeItemProps) => React.JSX.Element;
 export {};

package/dist/published/components/custom/CriteriaBuilder/PropertyTreeItem.js

@@ -11,35 +11,47 @@ export const PropertyTreeItem = (props) => {
             return;
         }
         const item = findTreeItemById(items, itemId);
-        if (item?.type === 'object') {
+        if (item?.type === 'loadingFailed') {
+            e.stopPropagation();
+            return;
+        }
+        if (item?.children) {
             e.stopPropagation();
             // If the item has an associated "objectId", fetch the properties of the object and expand the item.
-            if (item.objectId && item.children?.length === 1 && item.children[0].type === 'loading') {
-                const object = item.objectId ? await fetchObject(item.objectId) : undefined;
-                if (object) {
-                    updateNodeChildren(itemId, (object.properties ?? []).map((prop) => ({
-                        id: `${itemId}.${prop.id}`,
-                        label: prop.name,
-                        value: `${itemId}.${prop.id}`,
-                        type: prop.type,
-                        objectId: prop.objectId,
-                        children: prop.type === 'object'
-                            ? [
-                                {
-                                    id: `${itemId}.${prop.id}-loading`,
-                                    label: 'Loading...',
-                                    value: `${itemId}.${prop.id}-loading`,
-                                    type: 'loading',
-                                },
-                            ]
-                            : undefined,
-                    })));
+            if (item?.type === 'object' &&
+                item.objectId &&
+                item.children?.length === 1 &&
+                item.children[0].type === 'loading') {
+                try {
+                    const object = await fetchObject(item.objectId);
+                    if (object) {
+                        updateNodeChildren(itemId, object.properties
+                            .filter((prop) => prop.type !== 'collection')
+                            .map((prop) => ({
+                            ...prop,
+                            id: `${itemId}.${prop.id}`,
+                            children: prop.children?.map((child) => ({
+                                ...child,
+                                id: `${itemId}.${prop.id}.${child.id}`,
+                            })),
+                        })));
+                    }
+                }
+                catch (error) {
+                    updateNodeChildren(itemId, [
+                        {
+                            id: `${itemId}-failed`,
+                            name: 'Loading Failed',
+                            type: 'loadingFailed',
+                        },
+                    ]);
+                    console.error('Error fetching object:', error);
                 }
             }
             setExpanded([...expanded, itemId]);
             return;
         }
-        await handleTreePropertySelect(itemId);
+        handleTreePropertySelect(itemId);
     };
     return React.createElement(RichTreeItem, { itemId: itemId, label: label, children: children, onClick: onClick });
 };

package/dist/published/components/custom/CriteriaBuilder/types.d.ts

@@ -1,17 +1,8 @@
 /// <reference types="react" />
+import { Property } from '@evoke-platform/context';
 import { BaseSelectorProps } from 'react-querybuilder';
 import { ExpandedProperty } from '../../../types';
 import { AutocompleteOption, TreeViewBaseItem } from '../../core';
-export type ObjectProperty = {
-    id: string;
-    name: string;
-    type: string;
-    enum?: string[];
-    required?: boolean;
-    searchable?: boolean;
-    objectId?: string;
-    formula?: string;
-};
 export type CustomSelectorProps = BaseSelectorProps & {
     options: AutocompleteOption[] | any[];
     fieldData?: Record<string, any>;
@@ -28,7 +19,7 @@ export type PresetValue = {
     };
     type?: string;
 };
-export type TreeViewProperty = ObjectProperty & {
+export type TreeViewProperty = Property & {
     children?: TreeViewProperty[];
 };
 export type TreeViewObject = {

package/dist/published/components/custom/CriteriaBuilder/utils.d.ts

@@ -1,42 +1,15 @@
 import { Property } from '@evoke-platform/context';
-import { Obj, ObjectProperty } from '../../../types';
-import { TreeItem } from './types';
+import { TreeItem, TreeViewProperty } from './types';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {TreeItem[]} tree - The tree structure to update.
+ * @param {TreeViewProperty[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
- * @returns {TreeItem[]} - The updated tree structure.
+ * @param {(node: TreeViewProperty) => TreeViewProperty} updater - The function to apply to the node.
+ * @returns {TreeViewProperty[]} - The updated tree structure.
  */
-export declare const updateTreeNode: (tree: TreeItem[], nodeId: string, updater: (node: TreeItem) => TreeItem) => TreeItem[];
-type FetchObjectFunction = (id: string) => Promise<Obj | undefined>;
-/**
- * Fetches the display name path for a given property ID within an object hierarchy.
- *
- * @param {string} propertyId - The property ID to find the display name for.
- * @param {Obj} rootObject - The root object to start the search from.
- * @param {FetchObjectFunction} fetchObject - Function to fetch an object by its ID.
- * @returns {Promise<string>} - A promise that resolves to the display name path.
- */
-export declare const fetchDisplayNamePath: (propertyId: string, rootObject: Obj, fetchObject: FetchObjectFunction) => Promise<string>;
-/**
- * stores full dot-notation path to each property ID in the given array of properties.
- *
- * @param {ObjectProperty[]} properties - The array of properties to update.
- * @param {string} parentPath - The parent path to attach to each property ID.
- * @returns {ObjectProperty[]} The updated array of properties with the parent path attached to each property ID.
- */
-export declare const setIdPaths: (properties: ObjectProperty[], parentPath: string) => ObjectProperty[];
-/**
- * Traverses a property path within an object hierarchy to retrieve detailed property information.
- *
- * @param {string} propertyPath - The dot-separated path of the property to traverse.
- * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
- * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
- */
-export declare const traversePropertyPath: (propertyPath: string, rootObject: Obj, fetchObject: (objectId: string) => Promise<Obj | undefined>) => Promise<ObjectProperty | null>;
+export declare const updateTreeViewProperty: (tree: TreeViewProperty[], nodeId: string, updater: (node: TreeViewProperty) => TreeViewProperty) => TreeViewProperty[];
+export declare const convertTreeViewPropertyToTreeItem: (property: TreeViewProperty) => TreeItem;
 /**
  * Truncates the name path if it exceeds the specified character limit.
  *
@@ -58,4 +31,3 @@ export declare const ALL_OPERATORS: {
  */
 export declare const getReadableQuery: (mongoQuery?: Record<string, unknown>, properties?: Property[]) => string;
 export declare const findTreeItemById: (nodes: TreeItem[], nodeId: string) => TreeItem | null;
-export {};