@evoke-platform/ui-components 1.10.0-dev.3 → 1.10.0-dev.30

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

@@ -10,7 +10,7 @@ export declare function isAddressProperty(key: string): boolean;
 /**
  * Determine if a form entry is visible or not.
  */
-export declare const entryIsVisible: (entry: FormEntry, formValues: FieldValues, instance?: FieldValues) => boolean;
+export declare const entryIsVisible: (entry: FormEntry, instance?: FieldValues, formValues?: FieldValues) => boolean;
 /**
  * Recursively retrieves all parameter IDs from a given entry of type Sections or Columns.
  *
@@ -86,8 +86,8 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     message?: string;
     isError: boolean;
 }>>): Promise<FieldValues>;
-export declare function filterEmptySections(entry: Sections | Columns, formData: FieldValues, instance?: FieldValues): Sections | Columns | null;
-export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object?: Obj, parameters?: InputParameter[]): FormEntry[];
+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[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -101,4 +101,4 @@ 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[], isDocument?: boolean): InputParameter | Property | undefined;
+export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[], isDocument?: boolean): InputParameter | Property | undefined;

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

@@ -68,7 +68,7 @@ export function isAddressProperty(key) {
 /**
  * Determine if a form entry is visible or not.
  */
-export const entryIsVisible = (entry, formValues, instance) => {
+export const entryIsVisible = (entry, instance, formValues) => {
     const display = 'display' in entry ? entry.display : undefined;
     const { visibility } = display ?? ('visibility' in entry ? entry : {});
     if (isObject(visibility) && 'conditions' in visibility && isArray(visibility.conditions)) {
@@ -482,11 +482,6 @@ export function convertDocToEntries(document) {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                { label: 'Public', value: 'Public' },
-                { label: 'Private', value: 'Private' },
-                { label: 'Portal', value: 'Portal' },
-            ],
         });
     }
     entries.push({
@@ -507,8 +502,8 @@ export function formatDataToDoc(data) {
         uploadedDate: data.uploadedDate,
         versionId: data.versionId,
         metadata: {
-            type: data.type,
-            view_permission: data.view_permission,
+            type: data.type ?? '',
+            view_permission: data.view_permission ?? '',
         },
     };
 }
@@ -567,6 +562,7 @@ export const uploadDocuments = async (files, metadata, apiServices, instanceId,
     const allDocuments = [];
     const formData = new FormData();
     for (const [index, file] of files.entries()) {
+        // Only upload File instances; SavedDocumentReference objects are already uploaded
         if ('size' in file) {
             formData.append(`files[${index}]`, file);
         }
@@ -628,6 +624,7 @@ export const deleteDocuments = async (submittedFields, requestSuccess, apiServic
 export async function formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError) {
     for (const [key, value] of Object.entries(submission)) {
         if (isArray(value)) {
+            // Only upload if array contains File instances (not SavedDocumentReference)
             const fileInArray = value.some((item) => item instanceof File);
             if (fileInArray && instanceId && apiServices && objectId) {
                 try {
@@ -672,21 +669,21 @@ export async function formatSubmission(submission, apiServices, objectId, instan
     }
     return submission;
 }
-export function filterEmptySections(entry, formData, instance) {
+export function filterEmptySections(entry, instance, formData) {
     if (entry.type === 'sections' && isArray(entry.sections)) {
         const visibleSections = entry.sections.filter((section) => {
             if (!section.entries || section.entries.length === 0)
                 return false;
             for (const sectionEntry of section.entries) {
                 if (sectionEntry.type === 'sections' || sectionEntry.type === 'columns') {
-                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, formData, instance)) {
+                    if (sectionEntry.visibility && !entryIsVisible(sectionEntry, instance, formData)) {
                         return false;
                     }
-                    else if (filterEmptySections(sectionEntry, formData, instance)) {
+                    else if (filterEmptySections(sectionEntry, instance, formData)) {
                         return true;
                     }
                 }
-                else if (entryIsVisible(sectionEntry, formData, instance)) {
+                else if (entryIsVisible(sectionEntry, instance, formData)) {
                     return true;
                 }
             }
@@ -706,13 +703,13 @@ export function filterEmptySections(entry, formData, instance) {
             let hasVisibleEntry = false;
             for (const columnEntry of column.entries) {
                 if (columnEntry.type === 'sections' || columnEntry.type === 'columns') {
-                    if (filterEmptySections(columnEntry, formData, instance)) {
+                    if (filterEmptySections(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
                 }
                 else {
-                    if (entryIsVisible(columnEntry, formData, instance)) {
+                    if (entryIsVisible(columnEntry, instance, formData)) {
                         hasVisibleEntry = true;
                         break;
                     }
@@ -813,8 +810,8 @@ export function getFieldDefinition(entry, object, parameters, isDocument) {
         def = isDocument
             ? docProperties.find((prop) => prop.id === entry.propertyId)
             : 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;

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

@@ -20,7 +20,7 @@ const WithProviders = ({ children }) => {
     return React.createElement(MemoryRouter, null, children);
 };
 const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
-describe('Form component', () => {
+describe('FormRenderer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -59,9 +59,9 @@ describe('Form component', () => {
                         npSpecialtyType1,
                         npSpecialtyType2,
                     ]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'rnLicenseType' }))
                     return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
-                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
+                else if (isEqual(whereFilter, { 'licenseType.id': 'npLicenseType' }))
                     return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
             }
         }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
@@ -650,13 +650,19 @@ describe('Form component', () => {
                             parameterId: 'specialtyType',
                             display: {
                                 label: 'Speciality Type',
+                                createActionId: '_create',
                             },
                         },
                     ],
                     actionId: '_update',
                     objectId: 'relatedObjectTestForm',
                 };
+                let scrollIntoViewMock;
+                let originalScrollIntoView;
                 beforeEach(async () => {
+                    scrollIntoViewMock = vitest.fn();
+                    originalScrollIntoView = Element.prototype.scrollIntoView;
+                    Element.prototype.scrollIntoView = scrollIntoViewMock;
                     const relatedObjectTestFormObject = {
                         id: 'relatedObjectTestForm',
                         name: 'Related Object Test Form',
@@ -693,9 +699,20 @@ describe('Form component', () => {
                                 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',
@@ -705,7 +722,14 @@ describe('Form component', () => {
                                 id: '_create',
                                 name: 'Create',
                                 type: 'create',
-                                parameters: [],
+                                parameters: [
+                                    {
+                                        id: 'requiredField',
+                                        name: 'Required Field',
+                                        type: 'string',
+                                        required: true,
+                                    },
+                                ],
                                 outputEvent: 'created',
                                 defaultFormId: 'specialtyTypeForm',
                             },
@@ -721,6 +745,9 @@ describe('Form component', () => {
                     };
                     setupTestMocks(specialtyTypeObject, specialtyTypeForm);
                 });
+                afterEach(() => {
+                    Element.prototype.scrollIntoView = originalScrollIntoView;
+                });
                 it('displays an add button for related object fields', async () => {
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     await screen.findByRole('button', { name: 'Add' });
@@ -813,6 +840,63 @@ describe('Form component', () => {
                     await user.click(newRecordButton);
                     await screen.findByText(/not found/i);
                 });
+                it('should show validation errors in record creation mode', async () => {
+                    const user = userEvent.setup();
+                    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);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    const errorMessage = await screen.findByRole('listitem');
+                    expect(errorMessage).toHaveTextContent('Required Field is required');
+                });
+                it('should clear validation errors after they have been resolved', async () => {
+                    const user = userEvent.setup();
+                    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);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = screen.getByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+                });
+                it('should scroll to validation errors after submission', async () => {
+                    const user = userEvent.setup();
+                    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);
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).toHaveBeenCalled();
+                });
+                it('should not scroll to validation errors if there are none', async () => async () => {
+                    const user = userEvent.setup();
+                    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);
+                    // Make sure error elements appear
+                    screen.getByRole('listitem');
+                    const requiredField = await screen.findByRole('textbox', { name: /Required Field */i });
+                    await user.type(requiredField, 'Some content here...');
+                    const createSpecialtyTypeButton = await screen.findByRole('button', {
+                        name: /create specialty type/i,
+                    });
+                    await user.click(createSpecialtyTypeButton);
+                    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+                });
             });
         });
         describe('when in dropdown view', () => {
@@ -922,6 +1006,7 @@ describe('Form component', () => {
                             display: {
                                 label: 'Speciality Type',
                                 relatedObjectDisplay: 'dropdown',
+                                createActionId: '_create',
                             },
                         },
                     ],
@@ -1041,13 +1126,19 @@ describe('Form component', () => {
                     },
                     display: {
                         label: 'Collection',
+                        createActionId: '_create',
                     },
                 },
             ],
             actionId: '_update',
             objectId: 'testObjectForCollections',
         };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
         beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
             const collectionFormObject = {
                 id: 'testObjectForCollections',
                 name: 'Object for one-to-many collections tests',
@@ -1105,6 +1196,7 @@ describe('Form component', () => {
                                 objectId: 'testObjectForCollections',
                             },
                         ],
+                        defaultFormId: 'collectionObjectForm',
                     },
                 ],
             };
@@ -1117,6 +1209,7 @@ describe('Form component', () => {
                         parameterId: 'name',
                         display: {
                             label: 'Name',
+                            required: true,
                         },
                     },
                     {
@@ -1130,9 +1223,15 @@ describe('Form component', () => {
                 ],
                 actionId: '_create',
                 objectId: 'collectionObject',
+                display: {
+                    submitLabel: 'Create Collection Item',
+                },
             };
             setupTestMocks(collectionObject, collectionObjectForm);
         });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
         it('should render collection field', async () => {
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
             await screen.findByText('Collection');
@@ -1191,7 +1290,7 @@ describe('Form component', () => {
             const user = userEvent.setup();
             render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
             await user.click(await screen.findByRole('button', { name: 'Add' }));
-            await screen.findByRole('button', { name: 'Submit' });
+            await screen.findByRole('button', { name: 'Create Collection Item' });
         });
         it('should hide related object field in collection item form', async () => {
             const user = userEvent.setup();
@@ -1200,7 +1299,7 @@ describe('Form component', () => {
             await user.click(addButton);
             await screen.findByRole('dialog');
             // Make sure other form entry is present
-            await screen.findByRole('textbox', { name: 'Name' });
+            await screen.findByRole('textbox', { name: 'Name *' });
             const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
             expect(relatedObjectField).not.toBeInTheDocument();
         });
@@ -1219,12 +1318,136 @@ describe('Form component', () => {
             const addButton = await screen.findByRole('button', { name: /add/i });
             await user.click(addButton);
             await screen.findByRole('dialog');
-            const nameField = screen.getByRole('textbox', { name: 'Name' });
+            const nameField = screen.getByRole('textbox', { name: 'Name *' });
             await user.type(nameField, 'New Collection Item');
-            const submitButton = screen.getByRole('button', { name: 'Submit' });
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
             await user.click(submitButton);
             await screen.findByRole('columnheader', { name: 'Name' });
             screen.getByRole('cell', { name: 'New Collection Item' });
         });
+        it('should show validation errors', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            const errorMessage = await screen.findByRole('listitem');
+            expect(errorMessage).toHaveTextContent('Name is required');
+        });
+        it('should hide validation errors after they have been resolved', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            // Make sure error elements appear
+            screen.getByRole('listitem');
+            const requiredField = screen.getByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            expect(screen.queryByRole('listitem')).not.toBeInTheDocument();
+        });
+        it('should scroll to validation errors on submit', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        it('should not scroll to validation errors if there are none', async () => async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = await screen.findByRole('button', { name: /add/i });
+            await user.click(addButton);
+            await screen.findByRole('dialog');
+            const requiredField = await screen.findByRole('textbox', { name: /Name */i });
+            await user.type(requiredField, 'Some content here...');
+            const submitButton = screen.getByRole('button', { name: 'Create Collection Item' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
+    describe('when passed a text field entry', () => {
+        it('should render text field', async () => {
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByRole('textbox', { name: 'Text Field' });
+        });
+        it('should allow text input in text field', async () => {
+            const user = userEvent.setup();
+            const form = {
+                id: 'textFieldTestForm',
+                name: 'Text Field Test Form',
+                entries: [
+                    {
+                        type: 'inputField',
+                        input: {
+                            id: 'textField',
+                            type: 'string',
+                        },
+                        display: {
+                            label: 'Text Field',
+                        },
+                    },
+                ],
+                actionId: '_update',
+                objectId: 'textFieldTestObject',
+            };
+            const textFieldTestObject = {
+                id: 'textFieldTestObject',
+                name: 'Text Field Test Object',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [],
+            };
+            server.use(http.get(`/api/data/objects/${textFieldTestObject.id}/effective`, () => HttpResponse.json(textFieldTestObject)));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const textField = await screen.findByRole('textbox', { name: 'Text Field' });
+            await user.type(textField, 'Test Input');
+            expect(textField).toHaveValue('Test Input');
+        });
     });
 });