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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, ObjWithRoot, PanelViewEntry, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { ObjectProperty } from '../../../../types';
@@ -41,7 +41,8 @@ export declare function getDefaultPages(parameters: InputParameter[], defaultPag
     [x: string]: string;
 }>;
 export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount, instance?: Record<string, unknown>): Record<string, unknown>;
-export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
+export declare const fetchMiddleObject: (fieldDefinition: InputParameter | Property, apiServices: ApiServices) => Promise<ObjWithRoot | undefined>;
+export declare const fetchInitialMiddleObjectInstances: (apiServices: ApiServices, fieldDefinition: InputParameter | Property, instanceId: string) => Promise<ObjectInstance[]>;
 export declare const getErrorCountForSection: (section: Section | Column, errors?: FieldErrors) => number;
 export declare const propertyToParameter: (property: Property) => InputParameter;
 export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
@@ -84,7 +85,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     objectId?: string;
 }, parameters?: InputParameter[]): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
-export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[];
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -98,5 +99,6 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
  */
 export declare function plainTextToRtf(plainText: string): string;
-export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
+export declare function getFieldDefinition(entry: FormEntry | PanelViewEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
 export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;
+export declare function useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;

package/dist/published/components/custom/FormV2/components/utils.js

@@ -1,4 +1,5 @@
 import { LocalDateTime } from '@js-joda/core';
+import { useQuery } from '@tanstack/react-query';
 import { jsonLogic } from 'json-logic-js-graphql';
 import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } from 'lodash';
 import { DateTime } from 'luxon';
@@ -350,31 +351,19 @@ export function updateCriteriaInputs(criteria, data, user, instance) {
             },
         }));
 }
-export async function fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instanceId, fetchedOptions, initialMiddleObjectInstances) {
-    try {
-        if ((fetchedOptions && !fetchedOptions[`${fieldDefinition.id}MiddleObject`]) || !fetchedOptions) {
-            const fetchedMiddleObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
-                params: {
-                    filter: { fields: ['properties', 'actions', 'rootObjectId'] },
-                },
-            });
-            setFetchedOptions({ [`${fieldDefinition.id}MiddleObject`]: fetchedMiddleObject });
-        }
-        // Fetch the initial middle object instances
-        const filter = instanceId ? getMiddleObjectFilter(fieldDefinition, instanceId) : {};
-        if (!isArray(initialMiddleObjectInstances)) {
-            const fetchedInitialMiddleObjectInstances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
-                params: { filter: JSON.stringify(filter) },
-            });
-            setFetchedOptions({
-                [`${fieldDefinition.id}InitialMiddleObjectInstances`]: fetchedInitialMiddleObjectInstances,
-            });
-        }
-    }
-    catch (error) {
-        console.error('Error fetching collection data:', error);
-    }
-}
+export const fetchMiddleObject = async (fieldDefinition, apiServices) => {
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
+        params: {
+            filter: { fields: ['properties', 'actions', 'rootObjectId'] },
+        },
+    });
+};
+export const fetchInitialMiddleObjectInstances = async (apiServices, fieldDefinition, instanceId) => {
+    const filter = getMiddleObjectFilter(fieldDefinition, instanceId);
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+        params: { filter: JSON.stringify(filter) },
+    });
+};
 export const getErrorCountForSection = (section, errors) => {
     const entries = section.entries || [];
     return isArray(section.entries)
@@ -958,3 +947,14 @@ function applyMaskToObfuscatedValue(value, mask) {
     }
     return maskedValue;
 }
+export function useFormById(formId, apiServices, errorMessage) {
+    return useQuery({
+        queryKey: ['form', formId],
+        enabled: formId !== '_auto_' && !!formId,
+        staleTime: Infinity,
+        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}`)),
+        meta: {
+            errorMessage,
+        },
+    });
+}

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

@@ -1,3 +1,4 @@
+import { 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 { isEmpty, isEqual, set } 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('FormRenderer', () => {
     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');
@@ -65,12 +63,28 @@ describe('FormRenderer', () => {
         }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
         server.listen();
     });
-    afterAll(() => {
-        server.close();
+    beforeEach(() => {
+        // Create a fresh QueryClient for each test, need to pass `retry: false` to avoid retries interfering with error state tests
+        queryClient = new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false,
+                },
+            },
+        });
     });
     afterEach(() => {
         server.resetHandlers();
+        queryClient.clear();
     });
+    afterEach(() => {
+        server.resetHandlers();
+    });
+    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 related object's nested data`, async () => {
             const user = userEvent.setup();
@@ -414,7 +428,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 mode: 'existingOnly',
                             },
                         },
@@ -500,7 +514,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                             },
                         },
                     ],
@@ -586,7 +600,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 relatedObjectDisplay: 'dialogBox',
                                 mode: 'existingOnly',
                             },
@@ -654,7 +668,7 @@ describe('FormRenderer', () => {
                                 type: 'input',
                                 parameterId: 'specialtyType',
                                 display: {
-                                    label: 'Speciality Type',
+                                    label: 'Specialty Type',
                                     relatedObjectDisplay: 'dialogBox',
                                     mode: 'existingOnly',
                                 },
@@ -684,7 +698,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 createActionId: '_create',
                             },
                         },
@@ -944,7 +958,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 relatedObjectDisplay: 'dropdown',
                                 mode: 'existingOnly',
                             },
@@ -1021,7 +1035,7 @@ describe('FormRenderer', () => {
                     const user = userEvent.setup();
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     // Navigate to and open dropdown
-                    const dropdown = await screen.findByRole('combobox', { name: 'Speciality Type' });
+                    const dropdown = await screen.findByRole('combobox', { name: 'Specialty Type' });
                     await user.click(dropdown);
                     await screen.findByRole('listbox');
                     // Verify that the existing option is present
@@ -1176,7 +1190,7 @@ describe('FormRenderer', () => {
                     type: 'input',
                     parameterId: 'specialtyType',
                     display: {
-                        label: 'Speciality Type',
+                        label: 'Specialty Type',
                         createActionId: '_create',
                         relatedObjectId: 'specialtyType',
                     },
@@ -1497,7 +1511,26 @@ describe('FormRenderer', () => {
                     id: 'testInstanceId',
                     name: 'Test Instance',
                 },
-            })));
+            })), 
+            // This is called by refetchRelatedInstances() after successful POST
+            http.get('/api/data/objects/collectionObject/instances', (req) => {
+                const filter = new URL(req.request.url).searchParams.get('filter');
+                if (filter) {
+                    // Return the newly created item when refetching
+                    return HttpResponse.json([
+                        {
+                            id: 'newCollectionItemId',
+                            name: 'New Collection Item',
+                            objectId: 'collectionObject',
+                            relatedObject: {
+                                id: 'testInstanceId',
+                                name: 'Test Instance',
+                            },
+                        },
+                    ]);
+                }
+                return HttpResponse.json([]);
+            }));
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
             const addButton = await screen.findByRole('button', { name: /add/i });
             await user.click(addButton);

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,12 +59,35 @@ 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();
@@ -123,9 +144,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 +191,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 +235,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 +276,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 +326,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 +378,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 +436,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 +472,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 +503,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();
@@ -1020,7 +1014,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 () => {
@@ -1046,7 +1040,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 () => {
@@ -1089,7 +1083,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' });
@@ -1143,10 +1137,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 () => {
@@ -1243,7 +1235,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 () => {
@@ -1474,7 +1466,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
@@ -1485,7 +1477,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
@@ -1496,7 +1488,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();
@@ -1504,7 +1496,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' });

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,11 +1,12 @@
 import { useApiServices, useApp, } from '@evoke-platform/context';
 import { CancelRounded, CheckCircleRounded } from '@mui/icons-material';
+import { useQuery } from '@tanstack/react-query';
 import DOMPurify from 'dompurify';
 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';
@@ -16,7 +17,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';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
     const { fetchedOptions, setFetchedOptions, object, instance, richTextEditor: RichTextEditor } = useFormContext();
@@ -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,11 +44,35 @@ 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`]) {
@@ -146,9 +169,11 @@ function ViewOnlyEntryRenderer(props) {
                         React.createElement(Document, { id: entryId, fieldType: fieldDefinition.type, 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, 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.13.0-dev.6",
+    "version": "1.13.0-dev.7",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",
@@ -96,7 +96,7 @@
         "yalc": "^1.0.0-pre.53"
     },
     "peerDependencies": {
-        "@evoke-platform/context": "^1.7.0",
+        "@evoke-platform/context": "1.8.0-dev.4",
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     },
@@ -118,6 +118,7 @@
         "@mui/x-tree-view": "^7.29.1",
         "@react-querybuilder/dnd": "^5.4.1",
         "@react-querybuilder/material": "^6.5.0",
+        "@tanstack/react-query": "^5.90.12",
         "clean-deep": "^3.4.0",
         "commit-and-tag-version": "^12.4.1",
         "devexpress-richedit": "^23.1.5",