@evoke-platform/ui-components 1.10.0-dev.7 → 1.10.0-dev.9

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

@@ -1,6 +1,6 @@
 import { useObject } from '@evoke-platform/context';
 import { isEmpty, isEqual, omit } from 'lodash';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
@@ -12,7 +12,7 @@ import { assignIdsToSectionsAndRichText, convertDocToParameters, convertProperti
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, fieldHeight, richTextEditor, form, instance, onChange, associatedObject, renderHeader, renderBody, renderFooter, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -32,6 +32,7 @@ const FormRendererInternal = (props) => {
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
     const objectStore = useObject(objectId);
+    const validationErrorsRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
             ...prev,
@@ -134,9 +135,17 @@ const FormRendererInternal = (props) => {
             unregister(fieldId);
         }
     };
+    const onSubmitError = (errors) => {
+        if (onSubmitErrorOverride) {
+            onSubmitErrorOverride(errors);
+        }
+        else if (validationErrorsRef.current) {
+            validationErrorsRef.current.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+        }
+    };
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
-        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError?.(errors))();
+        await handleSubmit((data) => onSubmit && onSubmit(action?.type === 'delete' ? {} : data), (errors) => onSubmitError(errors))();
     }
     const headerProps = {
         title,
@@ -148,6 +157,7 @@ const FormRendererInternal = (props) => {
         shouldShowValidationErrors: isSubmitted,
         form,
         action,
+        validationErrorsRef: validationErrorsRef,
     };
     const footerProps = {
         onSubmit: unregisterHiddenFieldsAndSubmit,

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

@@ -59,6 +59,10 @@ function FormRendererContainer(props) {
                     const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
                     if (action && (instanceId || action.type === 'create')) {
                         setAction(action);
+                        // Clear error if action is found after being missing
+                        // TODO: This entire effect should take place after form is fetched to avoid an error flickering
+                        // That is, this effect should be merged with the one below that fetches the form
+                        setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
                     }
                     else {
                         setError('Action could not be found');
@@ -99,7 +103,8 @@ function FormRendererContainer(props) {
             apiServices
                 .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
                 .then((evokeForm) => {
-                if (evokeForm?.actionId === actionId) {
+                // If an actionId is provided, ensure it matches the form's actionId
+                if (!actionId || evokeForm?.actionId === actionId) {
                     const form = evokeForm;
                     setForm(form);
                 }

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.js

@@ -564,7 +564,7 @@ const RepeatableField = (props) => {
                             entry.display?.deleteActionId && (React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))))),
-            hasCreateAction && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+            hasCreateAction && entry.display?.createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, disabled: !createAction, onClick: addRow, "aria-label": 'Add' }, "Add"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
                     ? entry.display?.createActionId

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

@@ -6,6 +6,7 @@ import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
     shouldShowValidationErrors: boolean;
+    validationErrorsRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;

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

@@ -6,7 +6,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationErrorsRef, form, sx } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -25,12 +25,15 @@ const Header = (props) => {
             borderBottom: !form.id ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
+            '.evoke-form-renderer-header': {
+                flex: 1,
+            },
         } },
         title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(Title, { ...props }))),
         hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(AccordionActions, { ...props }))),
-        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+        React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {

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

@@ -1,6 +1,7 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
@@ -97,9 +98,24 @@ export function RecursiveEntryRenderer(props) {
                 React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'collection') {
-            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            if (fieldDefinition?.manyToManyPropertyId) {
+                if (middleObject && !isEmpty(middleObject)) {
+                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
+                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description }))));
+                }
+                else {
+                    // when in the builder preview, the middle object won't be fetched so instead show an empty field
+                    const singleSelectProperty = structuredClone(fieldDefinition);
+                    singleSelectProperty.type = 'choices';
+                    return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(FormField, { id: entryId, property: singleSelectProperty, defaultValue: fieldValue || getValues(entryId), selectOptions: [], size: fieldHeight })));
+                }
+            }
+            else {
+                return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            }
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {

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) => {
@@ -657,7 +657,12 @@ describe('Form component', () => {
                     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',
@@ -694,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',
@@ -706,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',
                             },
@@ -722,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' });
@@ -814,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', () => {
@@ -1050,7 +1133,12 @@ describe('Form component', () => {
             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',
@@ -1120,6 +1208,7 @@ describe('Form component', () => {
                         parameterId: 'name',
                         display: {
                             label: 'Name',
+                            required: true,
                         },
                     },
                     {
@@ -1133,9 +1222,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');
@@ -1194,7 +1289,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();
@@ -1203,7 +1298,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();
         });
@@ -1222,12 +1317,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');
+        });
     });
 });

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

@@ -1,5 +1,5 @@
 import * as matchers from '@testing-library/jest-dom/matchers';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEqual } from 'lodash';
 import { http, HttpResponse } from 'msw';
@@ -16,14 +16,11 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const removePoppers = () => {
-    const portalSelectors = ['.MuiAutocomplete-popper'];
-    portalSelectors.forEach((selector) => {
-        // eslint-disable-next-line testing-library/no-node-access
-        document.querySelectorAll(selector).forEach((el) => el.remove());
-    });
+const WithProviders = ({ children }) => {
+    return React.createElement(MemoryRouter, null, children);
 };
-describe('Form component', () => {
+const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
+describe('FormRendererContainer', () => {
     let server;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
@@ -71,7 +68,6 @@ describe('Form component', () => {
     });
     afterEach(() => {
         server.resetHandlers();
-        removePoppers();
     });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
@@ -81,13 +77,11 @@ describe('Form component', () => {
             }), http.get('/api/data/forms/specialtyForm', () => {
                 return HttpResponse.json(createSpecialtyForm);
             }));
-            render(React.createElement(MemoryRouter, null,
-                React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } })));
+            render(React.createElement(FormRendererContainer, { objectId: 'specialty', formId: 'specialtyForm', dataType: 'objectInstances', actionId: '_create', associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
             // Validate that the license field is hidden
             await waitFor(() => expect(screen.queryByRole('combobox', { name: 'License' })).not.toBeInTheDocument());
             // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
             const specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
-            await new Promise((r) => setTimeout(r, 5000));
             await user.click(specialtyType);
             const openAutocomplete = await screen.findByRole('listbox');
             await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
@@ -100,4 +94,200 @@ describe('Form component', () => {
             });
         });
     });
+    it('should display a submit button', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            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" }));
+        await screen.findByRole('button', { name: 'Submit' });
+    });
+    it('should display a button to discard changes', async () => {
+        const form = {
+            id: 'simpleForm',
+            name: 'Simple Form',
+            entries: [],
+            actionId: '_create',
+            objectId: 'simpleObject',
+        };
+        const simpleObject = {
+            id: 'simpleObject',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [],
+                    outputEvent: 'created',
+                },
+            ],
+            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" }));
+        await screen.findByRole('button', { name: 'Discard Changes' });
+    });
+    it('should reset the form when discarding changes', async () => {
+        const form = {
+            id: 'simpleForm2',
+            name: 'Simple Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'firstName',
+                        type: 'string',
+                    },
+                    display: {
+                        label: 'First Name',
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'simpleObject2',
+        };
+        const simpleObject = {
+            id: 'simpleObject2',
+            name: 'Simple Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'firstName',
+                    name: 'First Name',
+                    type: 'string',
+                },
+            ],
+        };
+        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" }));
+        const firstNameInput = await screen.findByRole('textbox', { name: 'First Name' });
+        await user.type(firstNameInput, 'John');
+        const discardButton = await screen.findByRole('button', { name: 'Discard Changes' });
+        await user.click(discardButton);
+        await waitFor(() => expect(firstNameInput).toHaveValue(''));
+    });
+    describe('when submitting a form with validation', () => {
+        const form = {
+            id: 'validationTestForm',
+            name: 'Validation Test Form',
+            entries: [
+                {
+                    type: 'input',
+                    parameterId: 'requiredField',
+                    display: {
+                        label: 'Required Field',
+                        required: true,
+                    },
+                },
+            ],
+            actionId: '_create',
+            objectId: 'validationTestObject',
+        };
+        let scrollIntoViewMock;
+        let originalScrollIntoView;
+        beforeEach(() => {
+            scrollIntoViewMock = vitest.fn();
+            originalScrollIntoView = Element.prototype.scrollIntoView;
+            Element.prototype.scrollIntoView = scrollIntoViewMock;
+        });
+        afterEach(() => {
+            Element.prototype.scrollIntoView = originalScrollIntoView;
+        });
+        const validationTestObject = {
+            id: 'validationTestObject',
+            name: 'Validation Test Object',
+            actions: [
+                {
+                    id: '_create',
+                    name: 'Create',
+                    type: 'create',
+                    parameters: [
+                        {
+                            id: 'requiredField',
+                            name: 'Required Field',
+                            type: 'string',
+                            required: true,
+                        },
+                    ],
+                    outputEvent: 'created',
+                },
+            ],
+            properties: [
+                {
+                    id: 'requiredField',
+                    name: 'Required Field',
+                    type: 'string',
+                },
+            ],
+        };
+        beforeEach(() => {
+            server.use(http.get(`/api/data/objects/${validationTestObject.id}/effective`, () => HttpResponse.json(validationTestObject)), http.get(`/api/data/forms/${form.id}`, () => HttpResponse.json(form)));
+        });
+        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" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // List items are named by author, but they don't
+            // need to be given an accessible name here because their text content is clear enough.
+            // As such, we use getByRole and ensure it has the correct text
+            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(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            // 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(FormRendererContainer, { objectId: validationTestObject.id, formId: form.id, dataType: "objectInstances" }));
+            const submitButton = await screen.findByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).toHaveBeenCalled();
+        });
+        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" }));
+            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' });
+            await user.click(submitButton);
+            expect(scrollIntoViewMock).not.toHaveBeenCalled();
+        });
+    });
 });

package/package.json

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