@evoke-platform/ui-components 1.10.0-testing.2 → 1.10.0-testing.4

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

@@ -87,7 +87,7 @@ export const ActionDialog = (props) => {
                     borderBottom: action.type === 'delete' ? undefined : '1px solid #e9ecef',
                 } },
                 action && hasAccess && !loading ? action?.name : '',
-                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
+                React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose, "aria-label": "Close" },
                     React.createElement(Close, { fontSize: "small" })),
                 formHeaderProps.hasAccordions && React.createElement(AccordionActions, { ...formHeaderProps })));
         }, renderBody: (bodyProps) => (React.createElement(DialogContent, { sx: {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/RepeatableField.d.ts

@@ -6,9 +6,6 @@ export type ObjectPropertyInputProps = {
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;
     entry: InputField | InputParameterReference | ReadonlyField;
-    createActionId?: string;
-    updateActionId?: string;
-    deleteActionId?: string;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;

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

@@ -34,7 +34,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
     const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
@@ -62,9 +62,9 @@ const RepeatableField = (props) => {
         showAlert: false,
         isError: false,
     });
-    const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
-    const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
-    const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
+    const createAction = relatedObject?.actions?.find((item) => item.id === entry.display?.createActionId);
+    const updateAction = relatedObject?.actions?.find((item) => item.id === entry.display?.updateActionId);
+    const deleteAction = relatedObject?.actions?.find((item) => item.id === entry.display?.deleteActionId);
     function getForm(setForm, action, formId) {
         if (formId || action?.defaultFormId) {
             apiServices
@@ -209,11 +209,11 @@ const RepeatableField = (props) => {
     }, [fetchCriteriaObjects, relatedObject]);
     useEffect(() => {
         if (createAction && !createForm)
-            getForm(setCreateForm, createAction); // TODO: pass entry.display?.createForm as a third argument
+            getForm(setCreateForm, createAction, entry.display?.createFormId);
         if (updateAction && !updateForm)
-            getForm(setUpdateForm, updateAction); // TODO: pass entry.display?.updateForm as a third argument
+            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
         if (deleteAction && !deleteForm)
-            getForm(setDeleteForm, deleteAction); // TODO: pass entry.display?.deleteForm as a third argument
+            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
     }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
@@ -269,10 +269,10 @@ const RepeatableField = (props) => {
         if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
-                params: { action: 'execute', field: '_create', scope: 'data' },
+                params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
             })
                 .then((checkAccess) => {
-                const action = relatedObject.actions?.find((item) => item.id === '_create');
+                const action = relatedObject.actions?.find((item) => item.id === entry.display?.createActionId);
                 if (action && fieldDefinition.relatedPropertyId) {
                     const { relatedObjectProperty, criteria } = retrieveCriteria(fieldDefinition.relatedPropertyId, action, relatedObject);
                     if (!criteria || JSON.stringify(criteria).includes('{{{input.') || !relatedObjectProperty) {
@@ -346,17 +346,21 @@ const RepeatableField = (props) => {
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
-            (dialogType === 'create' ? createActionId : dialogType === 'update' ? updateActionId : deleteActionId));
+            (dialogType === 'create'
+                ? entry.display?.createActionId
+                : dialogType === 'update'
+                    ? entry.display?.updateActionId
+                    : entry.display?.deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
         input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
-        if (action?.type === 'create' && createActionId) {
+        if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
                 const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: createActionId,
+                    actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
                 const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
@@ -519,12 +523,12 @@ const RepeatableField = (props) => {
                                 users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' &&
                                 ' (Inactive)')))))),
                     canUpdateProperty && (React.createElement(Box, { sx: { mt: 2, display: 'flex', gap: 1 } },
-                        React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
+                        entry.display?.updateActionId && (React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Edit" },
-                                React.createElement(Edit, null))),
-                        React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Edit, null)))),
+                        entry.display?.deleteActionId && (React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Delete" },
-                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
+                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))) : (React.createElement(TableContainer, { sx: {
                     borderRadius: '6px',
                     border: '1px solid #919EAB3D',
                     boxShadow: 'none',
@@ -544,7 +548,7 @@ const RepeatableField = (props) => {
                                             cursor: 'pointer',
                                         },
                                     }
-                                    : {}, onClick: updateActionId &&
+                                    : {}, onClick: entry.display?.updateActionId &&
                                     canUpdateProperty &&
                                     prop.id === 'name'
                                     ? () => editRow(relatedInstance.id)
@@ -554,19 +558,19 @@ const RepeatableField = (props) => {
                                     users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
-                            updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                            entry.display?.updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Edit" },
                                     React.createElement(Edit, null)))),
-                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                            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 && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+                                    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"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
-                    ? createActionId
+                    ? entry.display?.createActionId
                     : dialogType === 'update'
-                        ? updateActionId
-                        : deleteActionId)), relatedFormId: dialogType === 'create'
+                        ? entry.display?.updateActionId
+                        : entry.display?.deleteActionId)), relatedFormId: dialogType === 'create'
                 ? createForm?.id
                 : dialogType === 'update'
                     ? updateForm?.id

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

@@ -90,9 +90,7 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.defaultValue.orderBy
                         : undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
                         ? display?.defaultValue?.criteria
-                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, 
-                    // formId={display?.createFormId}  // TODO: this should be added as part of the builder update
-                    createActionId: '_create' })));
+                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, formId: display?.createFormId, createActionId: display?.createActionId })));
         }
         else if (fieldDefinition.type === 'user') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
@@ -101,7 +99,7 @@ export function RecursiveEntryRenderer(props) {
         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, createActionId: '_create', updateActionId: '_update', deleteActionId: '_delete' })));
+                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

@@ -650,6 +650,7 @@ describe('Form component', () => {
                             parameterId: 'specialtyType',
                             display: {
                                 label: 'Speciality Type',
+                                createActionId: '_create',
                             },
                         },
                     ],
@@ -922,6 +923,7 @@ describe('Form component', () => {
                             display: {
                                 label: 'Speciality Type',
                                 relatedObjectDisplay: 'dropdown',
+                                createActionId: '_create',
                             },
                         },
                     ],
@@ -1021,4 +1023,210 @@ describe('Form component', () => {
             });
         });
     });
+    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({
+                result: true,
+            })));
+        };
+        const form = {
+            id: 'collectionTestForm',
+            name: 'Collection Test Form',
+            entries: [
+                {
+                    type: 'inputField',
+                    input: {
+                        id: 'collection',
+                        type: 'collection',
+                        objectId: 'collectionObject',
+                        relatedPropertyId: 'relatedObject',
+                    },
+                    display: {
+                        label: 'Collection',
+                    },
+                },
+            ],
+            actionId: '_update',
+            objectId: 'testObjectForCollections',
+        };
+        beforeEach(() => {
+            const collectionFormObject = {
+                id: 'testObjectForCollections',
+                name: 'Object for one-to-many collections tests',
+                actions: [
+                    {
+                        id: '_update',
+                        name: 'Update',
+                        type: 'update',
+                        outputEvent: 'updated',
+                    },
+                ],
+                properties: [
+                    {
+                        id: 'collection',
+                        name: 'Collection',
+                        type: 'collection',
+                        objectId: 'collectionObject',
+                        relatedPropertyId: 'relatedObject',
+                    },
+                ],
+            };
+            setupTestMocks(collectionFormObject, form);
+            const collectionObject = {
+                id: 'collectionObject',
+                name: 'Collection Object',
+                properties: [
+                    {
+                        name: 'Name',
+                        id: 'name',
+                        type: 'string',
+                    },
+                    {
+                        name: 'Related Object',
+                        id: 'relatedObject',
+                        type: 'object',
+                        objectId: 'testObjectForCollections',
+                    },
+                ],
+                actions: [
+                    {
+                        id: '_create',
+                        name: 'Create',
+                        type: 'create',
+                        outputEvent: 'created',
+                        parameters: [
+                            {
+                                id: 'name',
+                                name: 'Name',
+                                type: 'string',
+                            },
+                            {
+                                id: 'relatedObject',
+                                name: 'Related Object',
+                                type: 'object',
+                                objectId: 'testObjectForCollections',
+                            },
+                        ],
+                    },
+                ],
+            };
+            const collectionObjectForm = {
+                id: 'collectionObjectForm',
+                name: 'Collection Object Form',
+                entries: [
+                    {
+                        type: 'input',
+                        parameterId: 'name',
+                        display: {
+                            label: 'Name',
+                        },
+                    },
+                    {
+                        type: 'input',
+                        parameterId: 'relatedObject',
+                        display: {
+                            label: 'Related Object',
+                            relatedObjectDisplay: 'dropdown',
+                        },
+                    },
+                ],
+                actionId: '_create',
+                objectId: 'collectionObject',
+            };
+            setupTestMocks(collectionObject, collectionObjectForm);
+        });
+        it('should render collection field', async () => {
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByText('Collection');
+        });
+        it('should not render an add button if user does not have permission to create collection items', async () => {
+            server.use(http.get('/api/data/objects/collectionObject/instances/checkAccess', () => HttpResponse.json({
+                result: false,
+            })));
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            const addButton = screen.queryByRole('button', { name: /add/i });
+            expect(addButton).not.toBeInTheDocument();
+        });
+        it('should render an add button for the collection when user has permission to create collection items', async () => {
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await screen.findByRole('button', { name: /add/i });
+        });
+        it('should open a dialog when clicking the add button', 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');
+        });
+        it('should render a close button in the collection dialog', 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('button', { name: 'Close' });
+        });
+        it('should allow closing the collection dialog using the close button', 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);
+            const dialog = await screen.findByRole('dialog');
+            const closeButton = await screen.findByRole('button', { name: 'Close' });
+            await user.click(closeButton);
+            await waitFor(() => expect(dialog).not.toBeInTheDocument());
+        });
+        it('shows a cancel button in the collection dialog', async () => {
+            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: 'Cancel' });
+        });
+        it('closes dialog in the collection dialog clicking cancel', async () => {
+            const user = userEvent.setup();
+            render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
+            await user.click(await screen.findByRole('button', { name: 'Add' }));
+            const dialog = await screen.findByRole('dialog');
+            await user.click(await screen.findByRole('button', { name: 'Cancel' }));
+            await waitFor(() => expect(dialog).not.toBeInTheDocument());
+        });
+        it('displays a submit button in the collection dialog', async () => {
+            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' });
+        });
+        it('should hide related object field in collection item form', 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');
+            // Make sure other form entry is present
+            await screen.findByRole('textbox', { name: 'Name' });
+            const relatedObjectField = screen.queryByRole('textbox', { name: 'Related Object' });
+            expect(relatedObjectField).not.toBeInTheDocument();
+        });
+        it('should add newly created collection item to the collection list upon submission', async () => {
+            const user = userEvent.setup();
+            server.use(http.post('/api/data/objects/collectionObject/instances/actions', () => HttpResponse.json({
+                id: 'newCollectionItemId',
+                name: 'New Collection Item',
+                objectId: 'collectionObject',
+                relatedObject: {
+                    id: 'testInstanceId',
+                    name: 'Test Instance',
+                },
+            })));
+            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 nameField = screen.getByRole('textbox', { name: 'Name' });
+            await user.type(nameField, 'New Collection Item');
+            const submitButton = screen.getByRole('button', { name: 'Submit' });
+            await user.click(submitButton);
+            await screen.findByRole('columnheader', { name: 'Name' });
+            screen.getByRole('cell', { name: 'New Collection Item' });
+        });
+    });
 });

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -116,6 +116,8 @@ export const UpdateAccessibilityFormOne = {
             display: {
                 label: 'License',
                 relatedObjectDisplay: 'dropdown',
+                createActionId: '_create',
+                createFormId: 'specialtyForm',
             },
         },
     ],

package/dist/published/stories/FormRendererData.js

@@ -571,6 +571,8 @@ export const mockEvokeForm = {
             parameterId: 'collection',
             display: {
                 label: 'Collection',
+                createActionId: '_create',
+                createFormId: 'customerCreateForm',
             },
         },
         {

package/package.json

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