@evoke-platform/ui-components 1.16.0 → 1.18.0

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

@@ -1,10 +1,9 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
-import { WarningRounded } from '@mui/icons-material';
+import { Grid } from '@mui/material';
 import { isEmpty } from 'lodash';
 import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
-import { Skeleton, TextField, Typography } from '../../../core';
-import { Box } from '../../../layout';
+import { Skeleton, TextField } from '../../../core';
 import FormField from '../../FormField';
 import AccordionSections from './AccordionSections';
 import FieldWrapper from './FieldWrapper';
@@ -21,6 +20,8 @@ import FormSections from './FormSections';
 import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 import HtmlView from './HtmlView';
 import { useQuery } from '@tanstack/react-query';
+import FormletRenderer from './FormletRenderer';
+import MisconfiguredErrorMessage from './MisconfiguredErrorMessage';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -53,8 +54,6 @@ export function RecursiveEntryRenderer(props) {
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
     const fieldDefinition = useMemo(() => {
-        if (!object)
-            return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
@@ -154,11 +153,15 @@ export function RecursiveEntryRenderer(props) {
             }
         }
         else if (fieldDefinition.type === 'richText') {
-            return (React.createElement(FieldWrapper, { key: `${entryId}-${fieldValue}`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (React.createElement(RichTextEditor
+            return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, RichTextEditor ? (React.createElement(RichTextEditor
             // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
             , { 
                 // RichTexts get a uniqueId when the form is loaded to prevent issues with multiple rich text fields on one form
-                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange?.(entryId, value), format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
+                id: entry.uniqueId, value: fieldValue, handleUpdate: (value) => handleChange?.(entryId, value), onBlur: () => {
+                    onAutosave?.(entryId)?.catch((error) => {
+                        console.error('Autosave failed:', error);
+                    });
+                }, format: "rtf", disabled: entry.type === 'readonlyField', rows: display?.rowCount, hasError: !!errors?.[entryId] })) : (React.createElement(FormField, { id: entryId, property: fieldDefinition, defaultValue: fieldValue, onChange: handleChange, onBlur: () => {
                     onAutosave?.(entryId)?.catch((error) => {
                         console.error('Autosave failed:', error);
                     });
@@ -218,16 +221,14 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.booleanDisplay
                         : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue, protection: objectProperty?.protection })));
         }
+        // Forms from the FormV2 widget will get the effective form and will not need this
+        // but it's possible for a form passed into the FormRenderer to include a formlet type
+    }
+    else if (entry.type === 'formlet') {
+        return React.createElement(FormletRenderer, { entry: entry });
     }
     else if (entry.type === 'columns') {
-        return (React.createElement(Box, { sx: {
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: '30px',
-                flexDirection: isXs ? 'column' : 'row',
-            } }, entry.columns.map((column, colIndex) => (
-        // calculating the width like this rather than flex={column.width} to prevent collections from being too wide
-        React.createElement(Box, { key: colIndex, sx: { width: isXs ? '100%' : `calc(${(column.width / 12) * 100}% - 15px)` } }, column.entries?.map((columnEntry, entryIndex) => {
+        return (React.createElement(Grid, { container: true, columnSpacing: 4 }, entry.columns.map((column, colIndex) => (React.createElement(Grid, { key: colIndex, item: true, xs: isXs ? 12 : column.width }, column.entries?.map((columnEntry, entryIndex) => {
             return (React.createElement(RecursiveEntryRenderer, { key: entryIndex + (columnEntry?.parameterId ?? ''), entry: columnEntry }));
         }))))));
     }
@@ -236,15 +237,7 @@ export function RecursiveEntryRenderer(props) {
         return filteredEntry ? (isSmallerThanMd ? (React.createElement(AccordionSections, { entry: filteredEntry })) : (React.createElement(FormSections, { entry: filteredEntry }))) : null;
     }
     else if (!fieldDefinition) {
-        return (React.createElement(Box, { sx: {
-                display: 'flex',
-                backgroundColor: '#ffc1073b',
-                borderRadius: '8px',
-                padding: '16.5px 14px',
-                marginTop: '6px',
-            } },
-            React.createElement(WarningRounded, { sx: { paddingRight: '8px' }, color: "warning" }),
-            React.createElement(Typography, { variant: "body2", color: "textSecondary" }, "This field was not configured correctly")));
+        return React.createElement(MisconfiguredErrorMessage, null);
     }
     return null;
 }

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

@@ -39,7 +39,8 @@ export type FileInstance = {
 export type SimpleEditorProps = {
     id: string;
     value: string;
-    handleUpdate?: (value: string) => void;
+    handleUpdate?: (value: string) => void | Promise<void>;
+    onBlur?: () => void;
     format: 'rtf' | 'plain' | 'openxml';
     disabled?: boolean;
     rows?: number;

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

@@ -20,6 +20,10 @@ export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues,
  */
 export declare const getNestedParameterIds: (entry: Sections | Columns) => string[];
 export declare const getEntryId: (entry: FormEntry) => string | undefined;
+/**
+ * Returns editable field IDs that are currently visible on the form.
+ */
+export declare const getVisibleEditableFieldIds: (entries: FormEntry[], instance?: FieldValues, formValues?: FieldValues) => string[];
 export declare function getPrefixedUrl(url: string): string;
 export declare const isOptionEqualToValue: (option: AutocompleteOption | string, value: unknown) => boolean;
 export declare function addressProperties(addressProperty: Property): Property[];
@@ -85,7 +89,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[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
+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.
  *
@@ -99,7 +103,7 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | Pa
  * 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 | PanelViewEntry, 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 handleFileUpload(apiServices: ApiServices, submission: FieldValues, actionId: string, objectId?: string, instanceId?: string, linkTo?: {
     instanceId: string;
@@ -123,3 +127,4 @@ export declare function useFormById(formId: string, apiServices: ApiServices, er
 export declare const extractPresetValuesFromCriteria: (criteria: Record<string, unknown>) => string[];
 export declare const extractAllCriteria: (flattenFormEntries: FormEntry[], parameters: InputParameter[]) => Record<string, unknown>[];
 export declare const extractPresetValuesFromDynamicDefaultValues: (flattenFormEntries: FormEntry[]) => string[];
+export declare function convertToReadOnly(entry: FormEntry): FormEntry;

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

@@ -127,6 +127,48 @@ const getEntryType = (entry, parameters) => {
         return parameter?.type;
     }
 };
+/**
+ * Returns editable field IDs that are currently visible on the form.
+ */
+export const getVisibleEditableFieldIds = (entries, instance, formValues) => {
+    const fieldIds = new Set();
+    const collectVisibleIds = (entriesToCheck) => {
+        entriesToCheck.forEach((entry) => {
+            if (!entryIsVisible(entry, instance, formValues)) {
+                return;
+            }
+            if (entry.type === 'sections') {
+                entry.sections.forEach((section) => {
+                    if (section.entries) {
+                        collectVisibleIds(section.entries);
+                    }
+                });
+                return;
+            }
+            if (entry.type === 'columns') {
+                entry.columns.forEach((column) => {
+                    if (column.entries) {
+                        collectVisibleIds(column.entries);
+                    }
+                });
+                return;
+            }
+            if (entry.type !== 'input' && entry.type !== 'inputField') {
+                return;
+            }
+            // Collection entries are handled by their own flow and are not part of autosave payloads.
+            if (entry.type === 'inputField' && entry.input.type === 'collection') {
+                return;
+            }
+            const fieldId = getEntryId(entry);
+            if (fieldId) {
+                fieldIds.add(fieldId);
+            }
+        });
+    };
+    collectVisibleIds(entries ?? []);
+    return Array.from(fieldIds);
+};
 export function getPrefixedUrl(url) {
     const wcsMatchers = ['/apps', '/pages', '/widgets'];
     const dataMatchers = [
@@ -135,8 +177,9 @@ export function getPrefixedUrl(url) {
         '/documents',
         '/payments',
         '/forms',
-        '/locations',
         '/files',
+        '/formlets',
+        '/locations',
     ];
     const signalrMatchers = ['/hubs'];
     const accessManagementMatchers = ['/users'];
@@ -856,8 +899,8 @@ export function getFieldDefinition(entry, object, parameters) {
     }
     else if (entry.type === 'readonlyField') {
         def = isAddressProperty(entry.propertyId)
-            ? object.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
-            : object.properties?.find((prop) => prop.id === entry.propertyId);
+            ? object?.properties?.find((prop) => prop.id === entry.propertyId.split('.')[0])
+            : object?.properties?.find((prop) => prop.id === entry.propertyId);
     }
     else if (entry.type === 'inputField') {
         def = entry.input;
@@ -962,7 +1005,7 @@ export function useFormById(formId, apiServices, errorMessage) {
         queryKey: ['form', formId],
         enabled: formId !== '_auto_' && !!formId,
         staleTime: Infinity,
-        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}`)),
+        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}/effective`)),
         meta: {
             errorMessage,
         },
@@ -1077,3 +1120,40 @@ export const extractPresetValuesFromDynamicDefaultValues = (flattenFormEntries)
     }
     return allPresetValues;
 };
+export function convertToReadOnly(entry) {
+    if (entry.type === 'columns') {
+        const columns = entry.columns.map((column) => ({
+            ...column,
+            entries: column.entries?.map((entry) => convertToReadOnly(entry)),
+        }));
+        return {
+            ...entry,
+            columns: columns,
+        };
+    }
+    else if (entry.type === 'sections') {
+        const sections = entry.sections.map((section) => ({
+            ...section,
+            entries: section.entries?.map((entry) => convertToReadOnly(entry)),
+        }));
+        return {
+            ...entry,
+            sections: sections,
+        };
+    }
+    else if (entry.type === 'input') {
+        return {
+            type: 'readonlyField',
+            propertyId: entry.parameterId,
+            display: entry.display,
+        };
+    }
+    else if (entry.type === 'inputField') {
+        return {
+            type: 'readonlyField',
+            propertyId: entry.input.id,
+            display: entry.display,
+        };
+    }
+    return entry;
+}

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

@@ -8,6 +8,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { expect, it } from 'vitest';
 import FormRenderer from '../FormRenderer';
+import { convertToReadOnly } from '../components/utils';
 import { accessibility508Object, createSpecialtyForm, jsonLogicDisplayTestSpecialtyForm, licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, simpleConditionDisplayTestSpecialtyForm, specialtyObject, specialtyTypeObject, UpdateAccessibilityFormOne, UpdateAccessibilityFormTwo, users, } from './test-data';
 // Mock ResizeObserver
 global.ResizeObserver = class ResizeObserver {
@@ -34,6 +35,11 @@ describe('FormRenderer', () => {
             if (sanitizedVersion === 'true') {
                 return HttpResponse.json(specialtyObject);
             }
+        }), http.get('/api/data/objects/formletTestObject/effective', (req) => {
+            const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
+            if (sanitizedVersion === 'true') {
+                return HttpResponse.json({});
+            }
         }), http.get('/api/data/objects/accessibility508Object/effective', (req) => {
             const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
             if (sanitizedVersion === 'true') {
@@ -416,7 +422,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a regular related object entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
         };
         describe('when in table view', () => {
             describe('when mode is existing records only', () => {
@@ -880,7 +886,7 @@ describe('FormRenderer', () => {
                 });
                 it('displays a not found error in record creation mode if a form could not be found', async () => {
                     const user = userEvent.setup();
-                    server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+                    server.use(http.get('/api/data/forms/specialtyTypeForm/effective', () => {
                         return HttpResponse.json({ error: 'Not found' }, { status: 404 });
                     }));
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1180,7 +1186,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a dynamic related object entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])));
         };
         const form = {
             id: 'relatedObjectTestForm',
@@ -1294,7 +1300,7 @@ describe('FormRenderer', () => {
         });
         it('displays a not found error in record creation mode if a form could not be found', async () => {
             const user = userEvent.setup();
-            server.use(http.get('/api/data/forms/specialtyTypeForm', () => {
+            server.use(http.get('/api/data/forms/specialtyTypeForm/effective', () => {
                 return HttpResponse.json({ error: 'Not found' }, { status: 404 });
             }));
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1306,7 +1312,7 @@ describe('FormRenderer', () => {
     });
     describe('when passed a one-to-many collection entry', () => {
         const setupTestMocks = (object, form, instances) => {
-            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({
+            server.use(http.get(`/api/data/objects/${object.id}/effective`, () => HttpResponse.json(object)), http.get(`/api/data/forms/${form.id}/effective`, () => HttpResponse.json(form)), http.get(`/api/data/forms?filter={"where":{"actionId":"${form.actionId}","objectId":"${object.id}"}}`, () => HttpResponse.json([form])), http.get(`/api/data/objects/${object.id}/instances`, () => HttpResponse.json(instances || [])), http.get(`/api/data/objects/${object.id}/instances/checkAccess`, () => HttpResponse.json({
                 result: true,
             })));
         };
@@ -1325,12 +1331,16 @@ describe('FormRenderer', () => {
                     display: {
                         label: 'Collection',
                         createActionId: '_create',
+                        updateActionId: '_update',
                     },
                 },
             ],
             actionId: '_update',
             objectId: 'testObjectForCollections',
         };
+        let collectionObject;
+        let collectionObjectForm;
+        let collectionObjectUpdateForm;
         let scrollIntoViewMock;
         let originalScrollIntoView;
         beforeEach(() => {
@@ -1359,7 +1369,7 @@ describe('FormRenderer', () => {
                 ],
             };
             setupTestMocks(collectionFormObject, form);
-            const collectionObject = {
+            collectionObject = {
                 id: 'collectionObject',
                 name: 'Collection Object',
                 properties: [
@@ -1396,9 +1406,23 @@ describe('FormRenderer', () => {
                         ],
                         defaultFormId: 'collectionObjectForm',
                     },
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                        parameters: [
+                            {
+                                id: 'name',
+                                name: 'Name',
+                                type: 'string',
+                            },
+                        ],
+                        defaultFormId: 'collectionObjectUpdateForm',
+                    },
                 ],
             };
-            const collectionObjectForm = {
+            collectionObjectForm = {
                 id: 'collectionObjectForm',
                 name: 'Collection Object Form',
                 entries: [
@@ -1426,6 +1450,26 @@ describe('FormRenderer', () => {
                 },
             };
             setupTestMocks(collectionObject, collectionObjectForm);
+            collectionObjectUpdateForm = {
+                id: 'collectionObjectUpdateForm',
+                name: 'Collection Object Update Form',
+                entries: [
+                    {
+                        type: 'input',
+                        parameterId: 'name',
+                        display: {
+                            label: 'Name',
+                            required: true,
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'collectionObject',
+                display: {
+                    submitLabel: 'Update Collection Item',
+                },
+            };
+            setupTestMocks(collectionObject, collectionObjectUpdateForm);
         });
         afterEach(() => {
             Element.prototype.scrollIntoView = originalScrollIntoView;
@@ -1523,6 +1567,48 @@ describe('FormRenderer', () => {
             await screen.findByRole('columnheader', { name: 'Name' });
             screen.getByRole('cell', { name: 'New Collection Item' });
         });
+        it('should not send instance metadata fields when updating a collection item', async () => {
+            const user = userEvent.setup();
+            const updateRequestSpy = vitest.fn();
+            const parentInstance = {
+                id: 'testInstanceId',
+                name: 'Test Instance',
+                objectId: 'testObjectForCollections',
+            };
+            const existingCollectionItem = {
+                id: 'existingCollectionItemId',
+                version: 1,
+                objectId: 'collectionObject',
+                name: 'Existing Collection Item',
+                relatedObject: {
+                    id: parentInstance.id,
+                    name: parentInstance.name,
+                },
+            };
+            server.use(http.get('/api/data/objects/collectionObject/instances', () => HttpResponse.json([existingCollectionItem])), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId', () => HttpResponse.json(existingCollectionItem)), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId/object', () => HttpResponse.json(collectionObject)), http.get('/api/data/objects/collectionObject/instances/existingCollectionItemId/checkAccess', () => HttpResponse.json({ result: true })), http.post('/api/data/objects/collectionObject/instances/existingCollectionItemId/actions', async ({ request }) => {
+                const body = (await request.json());
+                updateRequestSpy(body);
+                return HttpResponse.json({
+                    ...existingCollectionItem,
+                    name: body.input.name ?? existingCollectionItem.name,
+                });
+            }));
+            render(React.createElement(FormRenderer, { form: form, instance: parentInstance, onChange: () => { } }));
+            await screen.findByRole('cell', { name: 'Existing Collection Item' });
+            await user.click(await screen.findByLabelText('edit-collection-instance-0'));
+            await screen.findByRole('dialog');
+            const nameField = await screen.findByRole('textbox', { name: /Name */i });
+            await user.clear(nameField);
+            await user.type(nameField, 'Updated Collection Item');
+            await user.click(screen.getByRole('button', { name: 'Update Collection Item' }));
+            await waitFor(() => expect(updateRequestSpy).toHaveBeenCalled());
+            const body = updateRequestSpy.mock.calls[0][0];
+            expect(body.actionId).toBe('_update');
+            expect(body.input).toMatchObject({ name: 'Updated Collection Item' });
+            expect(body.input).not.toHaveProperty('id');
+            expect(body.input).not.toHaveProperty('objectId');
+            expect(body.input).not.toHaveProperty('version');
+        });
         it('should show validation errors', async () => {
             const user = userEvent.setup();
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
@@ -1648,4 +1734,139 @@ describe('FormRenderer', () => {
             expect(textField).toHaveValue('Test Input');
         });
     });
+    describe('when passed a formlet entry', () => {
+        const formlet = {
+            id: 'formletId',
+            name: 'Test Formlet',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        type: 'date',
+                        id: 'dateId2',
+                    },
+                    display: {
+                        label: 'Date 2',
+                        required: false,
+                    },
+                },
+            ],
+        };
+        beforeEach(() => {
+            server.use(http.get('/api/data/formlets/formletId', () => HttpResponse.json(formlet)));
+        });
+        it('should render formlet entry fields', async () => {
+            const form = {
+                id: 'formWithFormlet',
+                name: 'Form With Formlet',
+                entries: [
+                    {
+                        type: 'formlet',
+                        formletId: 'formletId',
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'formletTestObject',
+            };
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByLabelText('Date 2');
+        });
+    });
+    describe('convertToReadOnly', () => {
+        it('converts input entries to readonlyField entries', () => {
+            const inputEntry = {
+                type: 'input',
+                parameterId: 'name',
+                display: {
+                    label: 'Name',
+                    required: true,
+                },
+            };
+            const result = convertToReadOnly(inputEntry);
+            const display = inputEntry.display;
+            expect(result).toEqual({
+                type: 'readonlyField',
+                propertyId: 'name',
+                display,
+            });
+        });
+        it('converts inputField entries to readonlyField entries', () => {
+            const inputFieldEntry = {
+                type: 'inputField',
+                input: {
+                    id: 'description',
+                    type: 'string',
+                },
+                display: {
+                    label: 'Description',
+                },
+            };
+            const result = convertToReadOnly(inputFieldEntry);
+            const display = inputFieldEntry.display;
+            expect(result).toEqual({
+                type: 'readonlyField',
+                propertyId: 'description',
+                display,
+            });
+        });
+        it('recursively converts nested section and column entries', () => {
+            const nestedEntry = {
+                type: 'sections',
+                sections: [
+                    {
+                        entries: [
+                            {
+                                type: 'input',
+                                parameterId: 'firstName',
+                                display: {
+                                    label: 'First Name',
+                                },
+                            },
+                            {
+                                type: 'columns',
+                                columns: [
+                                    {
+                                        entries: [
+                                            {
+                                                type: 'inputField',
+                                                input: {
+                                                    id: 'lastName',
+                                                    type: 'string',
+                                                },
+                                                display: {
+                                                    label: 'Last Name',
+                                                },
+                                            },
+                                        ],
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result = convertToReadOnly(nestedEntry);
+            expect(result.sections[0].entries?.[0]).toMatchObject({
+                type: 'readonlyField',
+                propertyId: 'firstName',
+            });
+            expect(result.sections[0].entries?.[1]).toMatchObject({
+                type: 'columns',
+            });
+            const nestedColumnEntry = (result.sections[0].entries?.[1])
+                .columns[0].entries?.[0];
+            expect(nestedColumnEntry).toMatchObject({
+                type: 'readonlyField',
+                propertyId: 'lastName',
+            });
+        });
+        it('returns unsupported entry types unchanged', () => {
+            const contentEntry = {
+                type: 'content',
+                html: '<div>Read only content</div>',
+            };
+            const result = convertToReadOnly(contentEntry);
+            expect(result).toBe(contentEntry);
+        });
+    });
 });