@evoke-platform/ui-components 1.10.0-dev.33 → 1.10.0-dev.35

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

@@ -363,7 +363,7 @@ describe('FormRenderer', () => {
             });
         });
     });
-    describe('when passed a related object entry', () => {
+    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 || [])));
         };
@@ -1127,6 +1127,132 @@ 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 || [])));
+        };
+        const form = {
+            id: 'relatedObjectTestForm',
+            name: 'Related Object Test Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'specialtyType',
+                    display: {
+                        label: 'Speciality Type',
+                        createActionId: '_create',
+                        relatedObjectId: 'specialtyType',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'relatedObjectTestForm',
+        };
+        beforeEach(async () => {
+            const relatedObjectTestFormObject = {
+                id: 'relatedObjectTestForm',
+                name: 'Related Object Test Form',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        parameters: [
+                            {
+                                id: 'specialtyType',
+                                name: 'Related Object',
+                                type: 'object',
+                            },
+                        ],
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [
+                    {
+                        id: 'specialtyType',
+                        name: 'Related Object',
+                        type: 'object',
+                    },
+                ],
+            };
+            setupTestMocks(relatedObjectTestFormObject, form);
+            const specialtyTypeForm = {
+                id: 'specialtyTypeForm',
+                name: 'Specialty Type Form',
+                entries: [
+                    {
+                        type: 'content',
+                        html: '<div>Specialty Type Form Content</div>',
+                    },
+                    {
+                        type: 'input',
+                        parameterId: 'requiredField',
+                        display: {
+                            label: 'Required Field',
+                            required: true,
+                        },
+                    },
+                ],
+                actionId: '_create',
+                objectId: 'specialtyType',
+                display: {
+                    submitLabel: 'Create Specialty Type',
+                },
+            };
+            const specialtyTypeObject = {
+                id: 'specialtyType',
+                name: 'Specialty Type',
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        parameters: [
+                            {
+                                id: 'requiredField',
+                                name: 'Required Field',
+                                type: 'string',
+                                required: true,
+                            },
+                        ],
+                        outputEvent: 'created',
+                        defaultFormId: 'specialtyTypeForm',
+                    },
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        parameters: [],
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            setupTestMocks(specialtyTypeObject, specialtyTypeForm);
+        });
+        it('displays form if user switches to creating a new record', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            await screen.findByRole('radiogroup', { name: 'Relation Type' });
+            const existingRecordButton = await screen.findByRole('radio', { name: /existing/i });
+            expect(existingRecordButton).toBeChecked();
+            const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+            await user.click(newRecordButton);
+            await screen.findByText('Specialty Type Form Content');
+        });
+        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', () => {
+                return HttpResponse.json({ error: 'Not found' }, { status: 404 });
+            }));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            const newRecordButton = await screen.findByRole('radio', { name: /new/i });
+            await user.click(newRecordButton);
+            await screen.findByText(/not found/i);
+        });
+    });
     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({

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

@@ -15,6 +15,7 @@ import RepeatableField from '../FormV2/components/FormFieldTypes/CollectionFiles
 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';
 function ViewOnlyEntryRenderer(props) {
     const { entry } = props;
@@ -23,6 +24,8 @@ function ViewOnlyEntryRenderer(props) {
     const apiServices = useApiServices();
     const { defaultPages, findDefaultPageSlugFor } = useApp();
     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;
@@ -40,6 +43,8 @@ function ViewOnlyEntryRenderer(props) {
         }
         return def;
     }, [entry, object]);
+    const isProtectedProperty = fieldDefinition?.protection?.maskChar;
+    const protectionComponent = isProtectedProperty ? (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);
@@ -72,7 +77,7 @@ function ViewOnlyEntryRenderer(props) {
             return (React.createElement(AddressFields, { entry: entry, viewOnly: true, entryId: entryId, fieldDefinition: fieldDefinition }));
         }
         else {
-            let fieldValue = instance?.[entryId] || '';
+            let fieldValue = currentDisplayValue ?? (instance?.[entryId] || '');
             switch (fieldDefinition?.type) {
                 case 'object':
                     if (navigationSlug && fieldDefinition?.objectId) {
@@ -93,7 +98,10 @@ function ViewOnlyEntryRenderer(props) {
                     fieldValue = fieldValue && fieldValue.name;
                     break;
                 case 'date':
-                    fieldValue = fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
+                    fieldValue =
+                        isProtectedProperty && protectionMode === 'mask'
+                            ? fieldValue
+                            : fieldValue && DateTime.fromISO(fieldValue).toFormat('MM/dd/yyyy');
                     break;
                 case 'date-time':
                     fieldValue =
@@ -136,7 +144,9 @@ function ViewOnlyEntryRenderer(props) {
                         React.createElement(Criteria, { value: fieldValue, fieldDefinition: fieldDefinition, canUpdateProperty: false })));
                 }
                 else {
-                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition?.type || 'string', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true }, fieldDefinition?.type === 'boolean' && fieldValue ? (React.createElement(CheckCircleRounded, { "aria-label": "Checked", color: "success" })) : fieldDefinition?.type === 'boolean' ? (React.createElement(CancelRounded, { "aria-label": "Unchecked", color: "error" })) : (React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue))));
+                    return (React.createElement(FieldWrapper, { inputId: entryId, inputType: fieldDefinition?.type || 'string', label: display?.label || fieldDefinition?.name || 'default', value: fieldValue, required: display?.required || false, prefix: display?.prefix, suffix: display?.suffix, viewOnly: true }, fieldDefinition?.type === 'boolean' && fieldValue ? (React.createElement(CheckCircleRounded, { "aria-label": "Checked", color: "success" })) : fieldDefinition?.type === 'boolean' ? (React.createElement(CancelRounded, { "aria-label": "Unchecked", color: "error" })) : (React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
+                        React.createElement(Typography, { variant: "body1", key: entryId, sx: { height: '24px' } }, fieldValue),
+                        fieldDefinition?.protection?.maskChar && protectionComponent))));
                 }
             }
         }

package/dist/published/stories/CriteriaBuilder.stories.js

@@ -57,6 +57,12 @@ const defaultProperties = [
         required: false,
         objectId: 'application',
     },
+    {
+        id: 'dynamicObject',
+        name: 'Dynamic Object',
+        type: 'object',
+        required: false,
+    },
     {
         id: 'applicantName',
         name: 'Application Info',

package/dist/published/types.d.ts

@@ -1,3 +1,4 @@
+import { PropertyProtection } from '@evoke-platform/context';
 export type EvokeObject = {
     id: string;
     name: string;
@@ -13,6 +14,8 @@ export type ObjectProperty = {
     searchable?: boolean;
     objectId?: string;
     formula?: string;
+    mask?: string;
+    protection?: PropertyProtection;
 };
 export type Obj = {
     id: string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.33",
+    "version": "1.10.0-dev.35",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",