@evoke-platform/ui-components 1.13.0-dev.4 → 1.13.0-dev.6

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

@@ -1,10 +1,10 @@
+import { Property } from '@evoke-platform/context';
 import React from 'react';
 import 'react-querybuilder/dist/query-builder.css';
-import { EvokeObject } from '../../../types';
-import { ObjectProperty, Operator, PresetValue, TreeViewObject } from './types';
+import { Operator, PresetValue, TreeViewObject } from './types';
 import { ValueEditorProps } from './ValueEditor';
 export type CriteriaInputProps = {
-    properties: ObjectProperty[];
+    properties: Property[];
     setCriteria: (criteria?: Record<string, unknown> | undefined) => void;
     criteria?: Record<string, unknown>;
     originalCriteria?: Record<string, unknown>;
@@ -23,7 +23,7 @@ export type CriteriaInputProps = {
     hideBorder?: boolean;
     presetGroupLabel?: string;
     treeViewOpts?: {
-        fetchObject?: (objectId: string) => Promise<EvokeObject | undefined>;
+        fetchObject?: (objectId: string) => Promise<TreeViewObject | undefined>;
         object: TreeViewObject;
     };
     /**

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

@@ -11,7 +11,7 @@ import { Box } from '../../layout';
 import { OverflowTextField } from '../OverflowTextField';
 import { difference } from '../util';
 import PropertyTree from './PropertyTree';
-import { ALL_OPERATORS, parseMongoDB, traversePropertyPath } from './utils';
+import { ALL_OPERATORS, parseMongoDB } from './utils';
 import ValueEditor from './ValueEditor';
 const styles = {
     buttons: {
@@ -103,6 +103,7 @@ const customSelector = (props) => {
     const isTreeViewEnabled = context.treeViewOpts && title === 'Fields';
     const fetchObject = context.treeViewOpts?.fetchObject;
     const object = context.treeViewOpts?.object;
+    const setObject = context.treeViewOpts?.setObject;
     let readOnly = context.disabled;
     if (!readOnly && context.disabledCriteria) {
         readOnly =
@@ -173,14 +174,7 @@ const customSelector = (props) => {
             val = options.find((option) => option.name === val)?.name;
             break;
     }
-    const handleTreePropertySelect = async (propertyId) => {
-        const propertyInfo = await traversePropertyPath(propertyId, object, fetchObject);
-        context.setPropertyTreeMap((prev) => {
-            return { ...prev, [propertyId]: propertyInfo };
-        });
-        handleOnChange(propertyId);
-    };
-    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleTreePropertySelect })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
+    return (React.createElement(React.Fragment, null, isTreeViewEnabled ? (React.createElement(PropertyTree, { value: val ?? value, rootObject: object, setRootObject: setObject, fetchObject: fetchObject, propertyTreeMap: context.propertyTreeMap ?? {}, handleTreePropertySelect: handleOnChange })) : (React.createElement(Autocomplete, { options: opts, value: val ?? null, getOptionLabel: (option) => {
             if (typeof option === 'string') {
                 return opts.find((o) => option === o.name)?.label || option;
             }
@@ -275,77 +269,159 @@ const getAllRuleIds = (rules) => {
     });
     return ids;
 };
-const CriteriaBuilder = (props) => {
-    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
-    const [propertyTreeMap, setPropertyTreeMap] = useState();
-    const processRules = (rules) => {
-        return rules.map((rule) => {
-            if ('rules' in rule) {
-                return {
-                    ...rule,
-                    rules: processRules(rule.rules),
-                };
-            }
-            else {
-                const propertyType = properties.find((property) => property.id === rule.field)?.type;
-                let adjustedValue = rule.value;
-                if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
-                    adjustedValue = null;
-                }
-                return {
-                    ...rule,
-                    operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
-                    value: adjustedValue,
-                };
+const processRules = (rules, properties) => {
+    return rules.map((rule) => {
+        if ('rules' in rule) {
+            return {
+                ...rule,
+                rules: processRules(rule.rules, properties),
+            };
+        }
+        else {
+            const propertyType = properties.find((property) => property.id === rule.field)?.type;
+            let adjustedValue = rule.value;
+            if ((rule.operator === 'null' || rule.operator === 'notNull') && rule.value) {
+                adjustedValue = null;
             }
-        });
+            return {
+                ...rule,
+                operator: propertyType === 'array' && rule.operator === '=' ? 'in' : rule.operator,
+                value: adjustedValue,
+            };
+        }
+    });
+};
+const insertChangesOnly = (prev, newObject) => {
+    const mergedProperties = newObject.properties.map((newProp) => {
+        const prevProp = prev.properties.find((prop) => prop.id === newProp.id);
+        if (prevProp) {
+            return {
+                ...newProp,
+                children: newProp.children &&
+                    newProp.children[0].type === 'loading' &&
+                    prevProp.children
+                    ? prevProp.children
+                    : newProp.children && prevProp.children
+                        ? insertChangesOnly({ id: prevProp.id, name: prevProp.name, properties: prevProp.children }, { id: newProp.id, name: newProp.name, properties: newProp.children }).properties
+                        : newProp.children,
+            };
+        }
+        else {
+            return newProp;
+        }
+    });
+    return {
+        ...newObject,
+        properties: mergedProperties,
     };
+};
+const CriteriaBuilder = (props) => {
+    const { properties, criteria, setCriteria, originalCriteria, enablePresetValues, presetValues, operators, disabled, disabledCriteria, hideBorder, presetGroupLabel, customValueEditor, treeViewOpts, disableRegexEscapeChars, } = props;
+    const [propertyTreeMap, setPropertyTreeMap] = useState({});
+    const [treeViewObject, setTreeViewObject] = useState();
     useEffect(() => {
-        if ((criteria || originalCriteria) &&
-            !isEmpty(treeViewOpts) &&
-            treeViewOpts.object &&
-            treeViewOpts.fetchObject) {
-            const { object, fetchObject } = treeViewOpts;
-            // this retrieves the properties from a treeview for each property in the query
-            // they are then used in the custom query builder components to determine the input type etc
-            const updatePropertyTreeMap = async () => {
-                const newQuery = parseMongoDB(criteria || originalCriteria || {});
+        let obj;
+        if (treeViewOpts?.object) {
+            obj = {
+                ...treeViewOpts.object,
+                properties: treeViewOpts.object.properties
+                    .filter((prop) => prop.type !== 'collection')
+                    .map((prop) => ({
+                    ...prop,
+                    children: prop.children
+                        ?.filter((child) => child.type !== 'collection')
+                        .map((child) => ({
+                        ...child,
+                        id: `${prop.id}.${child.id}`,
+                    })),
+                })),
+            };
+        }
+        if ((criteria || originalCriteria) && obj && treeViewOpts?.fetchObject) {
+            const updateTreeViewObject = async (criteria, treeViewObject, fetchObject) => {
+                const newQuery = parseMongoDB(criteria);
                 const ids = getAllRuleIds(newQuery.rules);
-                let newPropertyTreeMap = {};
-                const newPropertyTreeMapPromises = [];
-                for (const id of ids) {
-                    if (!propertyTreeMap?.[id]) {
-                        newPropertyTreeMapPromises.push(traversePropertyPath(id, object, fetchObject)
-                            .then((property) => {
-                            if (property) {
-                                return {
-                                    [id]: property,
-                                };
+                const newTreeViewObject = { ...treeViewObject };
+                const traversePath = async (path, properties, fetchObject) => {
+                    const prop = properties?.find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
+                    if (prop?.type === 'object' && prop.objectId && prop.children) {
+                        if (prop.children.length === 1 &&
+                            prop.children[0]?.type === 'loading') {
+                            try {
+                                const fetchedObject = await fetchObject(prop.objectId);
+                                prop.children = fetchedObject?.properties
+                                    ?.filter((item) => item.type !== 'collection')
+                                    .map((item) => {
+                                    return {
+                                        ...item,
+                                        id: `${prop.id}.${item.id}`,
+                                        children: item.children?.map((child) => ({
+                                            ...child,
+                                            id: `${prop.id}.${item.id}.${child.id}`,
+                                        })),
+                                    };
+                                });
+                                fetchedObject && (await traversePath(path, fetchedObject.properties, fetchObject));
                             }
-                            return {};
-                        })
-                            .catch((err) => {
-                            console.error(err);
-                            return {};
-                        }));
+                            catch (error) {
+                                prop.children = [
+                                    {
+                                        id: `${prop.id}-failed`,
+                                        name: 'Loading Failed',
+                                        type: 'loadingFailed',
+                                    },
+                                ];
+                                console.error('Error fetching object for criteria builder:', error);
+                            }
+                        }
+                        else {
+                            await traversePath(path, prop.children, fetchObject);
+                        }
                     }
+                };
+                for (const id of ids) {
+                    await traversePath(id, newTreeViewObject.properties, fetchObject);
                 }
-                newPropertyTreeMap = (await Promise.all(newPropertyTreeMapPromises)).reduce((acc, currentProperty) => ({ ...acc, ...currentProperty }), {});
-                setPropertyTreeMap((prevPropertyTreeMap) => ({
-                    ...prevPropertyTreeMap,
-                    ...newPropertyTreeMap,
-                }));
+                setTreeViewObject((prevTreeViewObject) => prevTreeViewObject ? insertChangesOnly(prevTreeViewObject, newTreeViewObject) : newTreeViewObject);
             };
-            updatePropertyTreeMap().catch((err) => console.error(err));
+            updateTreeViewObject(criteria || originalCriteria || {}, obj, treeViewOpts.fetchObject);
+        }
+    }, [treeViewOpts, criteria, originalCriteria]);
+    useEffect(() => {
+        if (!treeViewObject)
+            return;
+        const getNamePath = (path, object) => {
+            const helper = (path, object) => {
+                let namePath = '';
+                const prop = (object.properties ?? []).find((prop) => path.startsWith(`${prop.id}.`) || path === prop.id);
+                if (prop) {
+                    if (prop.children) {
+                        const result = helper(path, { id: prop.id, name: prop.name, properties: prop.children });
+                        namePath = result ? prop.name + ' / ' + result : '';
+                    }
+                    else {
+                        namePath = prop.name;
+                    }
+                }
+                return namePath;
+            };
+            return helper(path, object) || path;
+        };
+        const newQuery = parseMongoDB(criteria || originalCriteria || {});
+        const ids = getAllRuleIds(newQuery.rules);
+        const result = {};
+        for (const id of ids) {
+            result[id] = getNamePath(id, treeViewObject);
         }
-    }, [criteria, originalCriteria, treeViewOpts]);
+        setPropertyTreeMap(result);
+    }, [criteria, originalCriteria, treeViewObject]);
     const initializeQuery = () => {
         const criteriaToParse = criteria || originalCriteria;
         const updatedQuery = criteriaToParse ? parseMongoDB(criteriaToParse || {}) : undefined;
         return updatedQuery
             ? {
                 ...updatedQuery,
-                rules: processRules(updatedQuery.rules),
+                rules: processRules(updatedQuery.rules, properties),
             }
             : { combinator: 'and', rules: [] };
     };
@@ -371,7 +447,7 @@ const CriteriaBuilder = (props) => {
     const handleQueryChange = (q) => {
         const processedQuery = {
             ...q,
-            rules: processRules(q.rules),
+            rules: processRules(q.rules, properties),
         };
         setQuery(processedQuery);
         const newCriteria = JSON.parse(formatQuery(processedQuery, {
@@ -525,17 +601,14 @@ const CriteriaBuilder = (props) => {
                         presetGroupLabel,
                         disabled,
                         disabledCriteria,
-                        treeViewOpts: treeViewOpts
+                        treeViewOpts: treeViewObject && treeViewOpts
                             ? {
                                 ...treeViewOpts,
-                                object: {
-                                    ...treeViewOpts?.object,
-                                    properties: treeViewOpts?.object.properties.filter(({ type }) => type !== 'collection'),
-                                },
+                                object: treeViewObject,
+                                setObject: setTreeViewObject,
                             }
                             : undefined,
                         propertyTreeMap,
-                        setPropertyTreeMap,
                     }, controlClassnames: {
                         ruleGroup: 'container',
                     }, operators: operators

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;