@evoke-platform/ui-components 1.13.0 → 1.15.0

package/dist/published/components/custom/FormV2/tests/FormRendererContainer.test.js

@@ -1,3 +1,4 @@
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEqual } from 'lodash';
@@ -14,12 +15,9 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const WithProviders = ({ children }) => {
-    return React.createElement(MemoryRouter, null, children);
-};
-const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
 describe('FormRendererContainer', () => {
     let server;
+    let queryClient;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
             const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
@@ -45,7 +43,7 @@ describe('FormRendererContainer', () => {
                 // The two objects in the array of conditions in the "where" filter represent the potential filters that can be applied when retrieving "specialty" instances.
                 // The first object is for the the validation criteria, but it is empty if the "license" field, which is referenced in the validation criteria, hasn't been filled out yet.
                 // The second object is for the search criteria which the user enters in the "specialty" field, but it is empty if no search text has been entered.
-                if (isEqual(whereFilter, { and: [{}, {}] }))
+                if (isEqual(whereFilter, {}))
                     return HttpResponse.json([
                         rnSpecialtyType1,
                         rnSpecialtyType2,
@@ -61,17 +59,42 @@ describe('FormRendererContainer', () => {
         }));
         server.listen();
     });
+    beforeEach(() => {
+        // Create a fresh QueryClient for each test, need to pass `retry: false` to avoid retries interfering with error state tests
+        queryClient = new QueryClient({
+            queryCache: new QueryCache({
+                onError: (error, query) => {
+                    const message = query.meta?.errorMessage ?? 'Something went wrong:';
+                    console.error(message, error);
+                },
+            }),
+            defaultOptions: {
+                queries: {
+                    retry: false,
+                },
+            },
+        });
+    });
     afterAll(() => {
         server.close();
+        queryClient.clear();
     });
     afterEach(() => {
         server.resetHandlers();
+        queryClient.clear();
     });
+    const WithProviders = ({ children }) => {
+        return (React.createElement(QueryClientProvider, { client: queryClient },
+            React.createElement(MemoryRouter, null, children)));
+    };
+    const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
             const user = userEvent.setup();
             server.use(http.get('/api/data/objects/license/instances/rnLicense', () => {
                 return HttpResponse.json(rnLicense);
+            }), http.get('/api/data/objects/specialtyType/instances', () => {
+                return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
             }), http.get('/api/data/forms/specialtyForm', () => {
                 return HttpResponse.json(createSpecialtyForm);
             }));
@@ -123,9 +146,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             const nameField = await screen.findByRole('textbox', { name: 'Name' });
             // Clear the existing value and type new value
             await user.clear(nameField);
@@ -173,9 +193,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             const nameField = await screen.findByRole('textbox', { name: 'Name' });
             await user.type(nameField, 'Test Specialty');
             await user.tab();
@@ -220,9 +237,6 @@ describe('FormRendererContainer', () => {
                 return HttpResponse.json({ error: 'Save failed' }, { status: 500 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             const nameField = await screen.findByRole('textbox', { name: 'Name' });
             await user.type(nameField, 'Test Specialty');
             await user.tab();
@@ -264,9 +278,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             const nameField = await screen.findByRole('textbox', { name: 'Name' });
             // Click into the field and blur it without changing value
             await user.click(nameField);
@@ -317,9 +328,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             // Find the city field
             const cityField = await screen.findByRole('textbox', { name: 'City' });
             // Clear and type new value
@@ -372,9 +380,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             // Find the city field
             const cityField = await screen.findByRole('textbox', { name: 'City' });
             // Click into field and blur without changing
@@ -433,9 +438,6 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'license', formId: 'licenseForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-license' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
             // Find the line1 field (it's a searchbox because of address autocomplete)
             const line1Field = await screen.findByRole('searchbox', { name: 'Address Line 1' });
             // Type to trigger autocomplete
@@ -472,9 +474,7 @@ describe('FormRendererContainer', () => {
                 });
             }));
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
+            await screen.findByRole('button', { name: 'Submit' });
             // When autosaveActionId is present the discard button should be hidden
             expect(screen.queryByRole('button', { name: /discard/i })).not.toBeInTheDocument();
         });
@@ -505,11 +505,7 @@ describe('FormRendererContainer', () => {
             }));
             const user = userEvent.setup();
             render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_update', instanceId: 'test-instance' }));
-            await waitFor(() => {
-                expect(screen.queryByText('Loading...')).not.toBeInTheDocument();
-            });
-            // Change a field value
-            const nameInput = screen.getByRole('textbox', { name: /name/i });
+            const nameInput = await screen.findByRole('textbox', { name: /name/i });
             await user.clear(nameInput);
             await user.type(nameInput, 'Test Specialty');
             await user.tab();
@@ -1104,7 +1100,7 @@ describe('FormRendererContainer', () => {
             properties: [],
         };
         server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
-        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, actionId: '_create' }));
         await screen.findByRole('button', { name: 'Submit' });
     });
     it('should display a button to discard changes', async () => {
@@ -1130,7 +1126,7 @@ describe('FormRendererContainer', () => {
             properties: [],
         };
         server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
-        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, actionId: '_create' }));
         await screen.findByRole('button', { name: 'Discard Changes' });
     });
     it('should reset the form when discarding changes', async () => {
@@ -1173,7 +1169,7 @@ describe('FormRendererContainer', () => {
         };
         server.use(http.get(`/api/data/objects/${simpleObject.id}/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
         const user = userEvent.setup();
-        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, dataType: "objectInstances" }));
+        render(React.createElement(FormRendererContainer, { objectId: simpleObject.id, formId: form.id, actionId: '_create' }));
         const firstNameInput = await screen.findByRole('textbox', { name: 'First Name' });
         await user.type(firstNameInput, 'John');
         const discardButton = await screen.findByRole('button', { name: 'Discard Changes' });
@@ -1227,10 +1223,8 @@ describe('FormRendererContainer', () => {
         };
         server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)), http.get('/api/data/objects/simpleObject/instances/123', () => HttpResponse.json({
             message: 'Not Found',
-        }, { status: 404 })), http.get('/api/data/objects/simpleObject/instances/123/object', () => HttpResponse.json({
-            message: 'Not Found',
-        }, { status: 404 })));
-        render(React.createElement(FormRendererContainer, { formId: form.id, actionId: "_update", objectId: "simpleObject", instanceId: '123', dataType: "objectInstances" }));
+        }, { status: 404 })), http.get('/api/data/objects/simpleObject/instances/123/object', () => HttpResponse.json(simpleObject)));
+        render(React.createElement(FormRendererContainer, { formId: form.id, actionId: "_update", objectId: "simpleObject", instanceId: '123' }));
         await screen.findByText('The requested content could not be found.');
     });
     it('should show an unauthorized error if the instance access is unauthorized', async () => {
@@ -1327,7 +1321,7 @@ describe('FormRendererContainer', () => {
                 properties: [],
             };
             server.use(http.get(`/api/data/objects/simpleObject/effective`, () => HttpResponse.json(simpleObject)), http.get(`/api/data/forms/simpleForm`, () => HttpResponse.json(form)));
-            render(React.createElement(FormRendererContainer, { formId: form.id, objectId: "simpleObject", dataType: "objectInstances" }));
+            render(React.createElement(FormRendererContainer, { formId: form.id, objectId: "simpleObject", actionId: "_create" }));
             await screen.findByText('Simple Form');
         });
         it('should show a not found error when the form cannot be found', async () => {
@@ -1558,7 +1552,7 @@ describe('FormRendererContainer', () => {
         });
         it('should display validation errors after trying to submit the form', async () => {
             const user = userEvent.setup();
-            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, actionId: "_create" }));
             const submitButton = await screen.findByRole('button', { name: 'Submit' });
             await user.click(submitButton);
             // List items are named by author, but they don't
@@ -1569,7 +1563,7 @@ describe('FormRendererContainer', () => {
         });
         it('should clear validation errors after they have been resolved', async () => {
             const user = userEvent.setup();
-            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, actionId: "_create" }));
             const submitButton = await screen.findByRole('button', { name: 'Submit' });
             await user.click(submitButton);
             // Make sure error elements appear
@@ -1580,7 +1574,7 @@ describe('FormRendererContainer', () => {
         });
         it('should scroll to validation errors after submission', async () => {
             const user = userEvent.setup();
-            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, actionId: "_create" }));
             const submitButton = await screen.findByRole('button', { name: 'Submit' });
             await user.click(submitButton);
             expect(scrollIntoViewMock).toHaveBeenCalled();
@@ -1588,7 +1582,7 @@ describe('FormRendererContainer', () => {
         it('should not scroll to validation errors after submission if there are none', async () => {
             const user = userEvent.setup();
             server.use(http.post(`/api/data/objects/${validationTestObject.id}/instances/actions`, () => HttpResponse.json({}, { status: 200 })));
-            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            render(React.createElement(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, actionId: "_create" }));
             const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
             await user.type(requiredField, 'Some content here...');
             const submitButton = await screen.findByRole('button', { name: 'Submit' });
@@ -1611,8 +1605,7 @@ describe('FormRendererContainer', () => {
         // Wait for the delete confirmation message to appear
         const confirmation = await screen.findByText(/you are about to delete/i);
         expect(confirmation).toBeInTheDocument();
-        // Validate that the message includes the instance name
-        expect(confirmation).toHaveTextContent(/Persons Name/);
+        await screen.findByText(/Persons Name/);
         // Ensure the "Delete" button is rendered
         await screen.findByRole('button', { name: /delete/i });
     });

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { EntryRendererProps } from '../FormV2/components/types';
-declare function ViewOnlyEntryRenderer(props: EntryRendererProps): any;
+declare function ViewOnlyEntryRenderer(props: EntryRendererProps): React.JSX.Element | null;
 export default ViewOnlyEntryRenderer;

package/dist/published/components/custom/ViewDetailsV2/InstanceEntryRenderer.js

@@ -1,10 +1,11 @@
 import { useApiServices, useApp, } from '@evoke-platform/context';
 import { CancelRounded, CheckCircleRounded } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import { isEmpty, isNil } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useEffect, useMemo, useState } from 'react';
 import { useFormContext } from '../../../theme/hooks';
-import { Link, Typography } from '../../core';
+import { Link, Skeleton, Typography } from '../../core';
 import { Box, Grid } from '../../layout';
 import AccordionSections from '../FormV2/components/AccordionSections';
 import FieldWrapper from '../FormV2/components/FieldWrapper';
@@ -15,7 +16,7 @@ import Criteria from '../FormV2/components/FormFieldTypes/Criteria';
 import { Document } from '../FormV2/components/FormFieldTypes/DocumentFiles/Document';
 import { Image } from '../FormV2/components/FormFieldTypes/Image';
 import PropertyProtection from '../FormV2/components/PropertyProtection';
-import { entryIsVisible, fetchCollectionData, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
+import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getDefaultPages, isAddressProperty, } from '../FormV2/components/utils';
 import HtmlView from '../FormV2/components/HtmlView';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
@@ -26,8 +27,6 @@ function ViewOnlyEntryRenderer(props) {
     const [navigationSlug, setNavigationSlug] = useState(fetchedOptions[`${entryId}NavigationSlug`]);
     const [currentDisplayValue, setCurrentDisplayValue] = useState(instance?.[entryId]);
     const [protectionMode, setProtectionMode] = useState('mask');
-    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
-    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const display = 'display' in entry ? entry.display : undefined;
     const fieldDefinition = useMemo(() => {
         const def = entry.type === 'readonlyField'
@@ -45,24 +44,60 @@ function ViewOnlyEntryRenderer(props) {
     }, [entry, object]);
     const isProtectedProperty = fieldDefinition?.protection?.maskChar;
     const protectionComponent = isProtectedProperty && !isNil(currentDisplayValue) ? (React.createElement(PropertyProtection, { parameter: fieldDefinition, protection: fieldDefinition?.protection, mask: fieldDefinition?.mask, value: currentDisplayValue, canEdit: false, setCurrentDisplayValue: setCurrentDisplayValue, mode: protectionMode, setMode: setProtectionMode })) : null;
-    useEffect(() => {
-        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
-            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
-        }
-    }, [fieldDefinition, initialMiddleObjectInstances, setFetchedOptions, instance, fetchedOptions, apiServices]);
+    const { data: middleObject } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'MiddleObject'],
+        queryFn: () => fetchMiddleObject(fieldDefinition, apiServices),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object: ',
+        },
+    });
+    const { data: initialMiddleObjectInstances = [], isLoading: isLoadingInstances } = useQuery({
+        queryKey: [
+            fieldDefinition?.objectId,
+            instance?.id,
+            fieldDefinition?.relatedPropertyId,
+            'InitialMiddleObjectInstances',
+        ],
+        queryFn: () => fetchInitialMiddleObjectInstances(apiServices, fieldDefinition, instance?.id),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            instance?.id &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId &&
+            fieldDefinition?.relatedPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object instances: ',
+        },
+    });
     useEffect(() => {
         (async () => {
             if (object?.properties && !fetchedOptions[`${entryId}NavigationSlug`]) {
-                const pages = await getDefaultPages(object.properties, defaultPages, findDefaultPageSlugFor);
-                if (fieldDefinition?.objectId && pages[fieldDefinition.objectId]) {
-                    setNavigationSlug(pages[fieldDefinition.objectId]);
-                    setFetchedOptions({
-                        [`${entryId}NavigationSlug`]: pages[fieldDefinition.objectId],
-                    });
+                const property = object.properties.find((prop) => prop.id === entryId);
+                if (!property || property.type !== 'object') {
+                    return;
+                }
+                if (!property.objectId) {
+                    property.objectId = instance?.[entryId] && (instance?.[entryId]).objectId;
+                }
+                try {
+                    const pages = await getDefaultPages([property], defaultPages, findDefaultPageSlugFor);
+                    if (property?.objectId && pages[property.objectId]) {
+                        setNavigationSlug(pages[property.objectId]);
+                        setFetchedOptions({
+                            [`${entryId}NavigationSlug`]: pages[property.objectId],
+                        });
+                    }
+                }
+                catch (error) {
+                    console.error('Error fetching default pages:', error);
                 }
             }
         })();
-    }, [object, defaultPages, findDefaultPageSlugFor, fieldDefinition]);
+    }, [object, defaultPages, findDefaultPageSlugFor, instance, entryId, fetchedOptions]);
     // If the entry is hidden, clear its value and any nested values, and skip rendering
     if (!entryIsVisible(entry, instance)) {
         return null;
@@ -132,9 +167,11 @@ function ViewOnlyEntryRenderer(props) {
                         React.createElement(Document, { id: entryId, error: false, value: fieldValue, canUpdateProperty: false })));
                 }
                 else if (fieldDefinition.type === 'collection') {
-                    return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
-                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
-                                initialMiddleObjectInstances, id: entryId, middleObject: middleObject, fieldDefinition: fieldDefinition, readOnly: true })))) : (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                    if (fieldDefinition.manyToManyPropertyId && !isEmpty(middleObject)) {
+                        return isLoadingInstances ? (React.createElement(Skeleton, null)) : (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
+                            React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: initialMiddleObjectInstances, id: entryId, middleObject: middleObject, fieldDefinition: fieldDefinition, readOnly: true })));
+                    }
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: 'collection', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, viewOnly: true },
                         React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: false, entry: entry, viewLayout: display?.viewLayout })));
                 }
                 else if (fieldDefinition.type === 'criteria') {

package/dist/published/components/custom/ViewDetailsV2/ViewDetailsV2Container.js

@@ -6,10 +6,15 @@ import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
 import { FormContext } from '../FormV2';
+import ConditionalQueryClientProvider from '../FormV2/components/ConditionalQueryClientProvider';
 import Header from '../FormV2/components/Header';
 import { assignIdsToSectionsAndRichText, getPrefixedUrl } from '../FormV2/components/utils';
 import ViewOnlyEntryRenderer from './InstanceEntryRenderer';
 function ViewDetailsV2Container(props) {
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(ViewDetailsV2ContainerInner, { ...props })));
+}
+function ViewDetailsV2ContainerInner(props) {
     const { instanceId, panelLayoutId, objectId, title, richTextEditor, renderHeader, renderBody } = props;
     const apiServices = useApiServices();
     const [sanitizedObject, setSanitizedObject] = useState();
@@ -67,8 +72,8 @@ function ViewDetailsV2Container(props) {
         if (panelLayoutId || sanitizedObject?.defaultPanelLayoutId) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${objectId}/panelLayouts/${panelLayoutId || sanitizedObject?.defaultPanelLayoutId}`))
-                .then((evokeForm) => {
-                setPanelLayout(evokeForm);
+                .then((panel) => {
+                setPanelLayout(panel);
             })
                 .catch((error) => {
                 onError(error);

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

@@ -16,3 +16,5 @@ export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
 export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';
 export type { ViewDetailsV2ContainerProps } from './ViewDetailsV2';
+export * from './util';
+export type { MongoDBQueryValue } from './types';

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

@@ -13,3 +13,4 @@ export { ResponsiveOverflow } from './ResponsiveOverflow';
 export { RichTextViewer } from './RichTextViewer';
 export { UserAvatar } from './UserAvatar';
 export { ViewDetailsV2Container, ViewOnlyEntryRenderer } from './ViewDetailsV2';
+export * from './util';

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

@@ -0,0 +1,15 @@
+export type MongoDBQueryValue = null | string | boolean | {
+    $not?: {
+        $regex?: string;
+    };
+    $regex?: string;
+    $expr?: boolean;
+    $eq?: unknown;
+    $ne?: unknown;
+    $lt?: unknown;
+    $lte?: unknown;
+    $gt?: unknown;
+    $gte?: unknown;
+    $in?: unknown[];
+    $nin?: unknown[];
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -1 +1,11 @@
+import { DefaultRuleGroupType } from 'react-querybuilder';
 export declare function difference(object?: any, base?: any): any;
+/**
+ * Parses a MongoDB query into a DefaultRuleGroupType or a single RuleType.
+ * This function recursively processes the MongoDB query and transforms it into
+ * a structured format that can be used in the CriteriaBuilder.
+ *
+ * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
+ * @returns {DefaultRuleGroupType} - Correctly formatted rule or rules for the query builder.
+ */
+export declare function parseMongoDB(mongoQuery: Record<string, unknown>): DefaultRuleGroupType;

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

@@ -1,4 +1,4 @@
-import { isEqual, isObject, transform } from 'lodash';
+import { isArray, isEmpty, isEqual, isObject, transform } from 'lodash';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function difference(object, base) {
     if (!object) {
@@ -14,3 +14,163 @@ export function difference(object, base) {
         }
     });
 }
+/**
+ * Parses a MongoDB query into a DefaultRuleGroupType or a single RuleType.
+ * This function recursively processes the MongoDB query and transforms it into
+ * a structured format that can be used in the CriteriaBuilder.
+ *
+ * @param {Record<string, unknown>} mongoQuery - The MongoDB query to be parsed.
+ * @returns {DefaultRuleGroupType} - Correctly formatted rule or rules for the query builder.
+ */
+export function parseMongoDB(mongoQuery) {
+    /**
+     * Parses a single rule from the MongoDB query.
+     *
+     * @param {string} key - The field name for the rule.
+     * @param {MongoDBQueryValue} value - The value associated with the key to parse.
+     * @returns {DefaultRuleType | undefined} - A DefaultRuleType if the value is valid, otherwise undefined.
+     */
+    const parseRule = (key, value) => {
+        if (key === '$expr') {
+            return undefined;
+        }
+        else if (value === null) {
+            return {
+                field: key,
+                operator: 'null',
+                value: null,
+            };
+        }
+        else if (typeof value === 'string' ||
+            typeof value === 'number' ||
+            typeof value === 'boolean' ||
+            '$eq' in value) {
+            return {
+                field: key,
+                operator: '=',
+                value: typeof value === 'object' && '$eq' in value ? value.$eq : value,
+            };
+        }
+        else if (value.$not && typeof value.$not.$regex === 'string') {
+            return {
+                field: key,
+                operator: 'doesNotContain',
+                value: value.$not.$regex,
+            };
+        }
+        else if (typeof value.$regex === 'string') {
+            let operator = 'contains';
+            let regexValue = value.$regex;
+            if (regexValue.startsWith('^')) {
+                operator = 'beginsWith';
+                regexValue = regexValue.slice(1);
+            }
+            else if (regexValue.endsWith('$')) {
+                operator = 'endsWith';
+                regexValue = regexValue.slice(0, -1);
+            }
+            if (regexValue) {
+                // remove escape characters for display
+                regexValue = regexValue.replace(/\\(.)/g, '$1');
+            }
+            return {
+                field: key,
+                operator: operator,
+                value: regexValue,
+            };
+        }
+        else if ('$ne' in value) {
+            return {
+                field: key,
+                operator: value.$ne === null ? 'notNull' : '!=',
+                value: value.$ne,
+            };
+        }
+        else if ('$lt' in value) {
+            return {
+                field: key,
+                operator: '<',
+                value: value.$lt,
+            };
+        }
+        else if ('$lte' in value) {
+            return {
+                field: key,
+                operator: '<=',
+                value: value.$lte,
+            };
+        }
+        else if ('$gt' in value) {
+            return {
+                field: key,
+                operator: '>',
+                value: value.$gt,
+            };
+        }
+        else if ('$gte' in value) {
+            return {
+                field: key,
+                operator: '>=',
+                value: value.$gte,
+            };
+        }
+        else if ('$in' in value) {
+            return {
+                field: key,
+                operator: 'in',
+                value: value.$in ?? [],
+            };
+        }
+        else if ('$nin' in value) {
+            return {
+                field: key,
+                operator: 'notIn',
+                value: value.$nin ?? [],
+            };
+        }
+        else {
+            return undefined;
+        }
+    };
+    /**
+     * Recursively parses a MongoDB query into a RuleGroupType or RuleType.
+     *
+     * @param {Record<string, unknown>} query - The MongoDB query object to be parsed.
+     * @returns {DefaultRuleGroupType | DefaultRuleType} - A RuleGroupType with combinator and rules, or a single RuleType.
+     */
+    const parseGroup = (query) => {
+        if ('$and' in query && isArray(query.$and)) {
+            return {
+                combinator: 'and',
+                rules: query.$and.map(parseGroup).filter((rule) => rule !== undefined),
+            };
+        }
+        else if ('$or' in query && isArray(query.$or)) {
+            return {
+                combinator: 'or',
+                rules: query.$or.map(parseGroup).filter((rule) => rule !== undefined),
+            };
+        }
+        else if (isEmpty(query)) {
+            return { combinator: 'and', rules: [] };
+        }
+        else {
+            const rules = Object.entries(query)
+                .map(([key, value]) => parseRule(key, value))
+                .filter((rule) => rule !== null);
+            return rules[0];
+        }
+    };
+    const result = parseGroup(mongoQuery);
+    // Check if the result is a RuleGroupType (i.e., has a combinator)
+    if (result && 'combinator' in result) {
+        return result;
+    }
+    else {
+        // If there are no condition groups configured so it's not a RuleGroupType, wrap it in a default 'and' combinator
+        return {
+            combinator: 'and',
+            rules: result ? [result] : [],
+        };
+    }
+}

package/dist/published/index.d.ts

@@ -6,8 +6,8 @@ export type { SxProps } from '@mui/system';
 export { CalendarPicker, DateTimePicker, MonthPicker, PickersDay, StaticDateTimePicker, StaticTimePicker, TimePicker, YearPicker, } from '@mui/x-date-pickers';
 export * from './colors';
 export * from './components/core';
-export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormContext, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RecursiveEntryRenderer, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, ViewDetailsV2Container, ViewOnlyEntryRenderer, } from './components/custom';
-export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps, ViewDetailsV2ContainerProps, } from './components/custom';
+export { BuilderGrid, CriteriaBuilder, DataGrid, ErrorComponent, Form, FormContext, FormField, FormRenderer, FormRendererContainer, getReadableQuery, HistoryLog, MenuBar, MultiSelect, RecursiveEntryRenderer, RepeatableField, ResponsiveOverflow, RichTextViewer, UserAvatar, ViewDetailsV2Container, ViewOnlyEntryRenderer, parseMongoDB, difference, } from './components/custom';
+export type { BodyProps, FooterProps, FormRef, GridSortModel, HeaderProps, MongoDBQueryValue, ViewDetailsV2ContainerProps, } from './components/custom';
 export { NumericFormat } from './components/custom/FormField/InputFieldComponent';
 export { Box, Container, Grid, Stack } from './components/layout';
 export * from './theme';