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

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/tests/FormRenderer.test.js

@@ -1021,4 +1021,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/package.json

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