@evoke-platform/ui-components 1.3.0-testing.0 → 1.4.0-dev.0

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/ActionDialog.js

@@ -36,7 +36,7 @@ const styles = {
     },
 };
 export const ActionDialog = (props) => {
-    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, relatedProperty, objectInputCommonProps, queryAddresses, user, } = props;
+    const { open, onClose, action, instanceInput, handleSubmit, apiServices, object, instanceId, objectInputCommonProps, queryAddresses, associatedObject, user, } = props;
     const [updatedObject, setUpdatedObject] = useState();
     const [hasAccess, setHasAccess] = useState(false);
     const [loading, setLoading] = useState(false);
@@ -57,18 +57,16 @@ export const ActionDialog = (props) => {
     }, [object, instanceId]);
     useEffect(() => {
         const input = (action.form?.entries && action.parameters) || action?.inputProperties
-            ? (action.form?.entries && action.parameters
+            ? action.form?.entries && action.parameters
                 ? convertFormToComponents(action.form.entries, action.parameters, object)
-                : action?.inputProperties)?.filter((inputProperty) => inputProperty?.key !== relatedProperty?.relatedPropertyId)
+                : action?.inputProperties
             : undefined;
         const updatedAction = {
             ...action,
             form: input ? { entries: convertComponentsToForm(input) } : undefined,
         };
-        const properties = object.properties?.filter((prop) => prop.id !== relatedProperty?.relatedPropertyId);
         setUpdatedObject({
             ...object,
-            properties,
             actions: concat(object.actions?.filter((a) => a.id !== action.id) ?? [], [updatedAction]),
         });
     }, [object]);
@@ -78,7 +76,7 @@ export const ActionDialog = (props) => {
             React.createElement(IconButton, { sx: styles.closeIcon, onClick: onClose },
                 React.createElement(Close, { fontSize: "small" })),
             action && hasAccess && !loading ? action?.name : ''),
-        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
+        React.createElement(DialogContent, null, hasAccess ? (React.createElement(Box, { sx: { width: '100%', marginTop: '10px' } }, (updatedObject || isDeleteAction) && (React.createElement(Form, { actionId: action.id, actionType: action.type, apiServices: objectInputCommonProps.apiServices, object: !isDeleteAction ? updatedObject : object, instance: instanceInput, onSave: async (data, setSubmitting) => handleSubmit(action.type, data, instanceId, setSubmitting), objectInputCommonProps: objectInputCommonProps, closeModal: onClose, queryAddresses: queryAddresses, user: user, submitButtonLabel: isDeleteAction ? 'Delete' : undefined, associatedObject: associatedObject })))) : (React.createElement(React.Fragment, null, loading ? (React.createElement(React.Fragment, null,
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }),
             React.createElement(Skeleton, { height: '30px', animation: 'wave' }))) : (React.createElement(ErrorComponent, { code: 'AccessDenied', message: 'You do not have permission to perform this action.', styles: { boxShadow: 'none' } })))))));

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableField.js

@@ -402,10 +402,12 @@ const RepeatableField = (props) => {
                                 React.createElement(Tooltip, { title: "Delete" },
                                     React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))),
             hasCreateAction && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow }, "Add"))),
-        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? relatedInstances.find((i) => i.id === selectedRow) ?? {} : {}, handleSubmit: save, 
+        relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, apiServices: apiServices, onClose: () => setOpenDialog(false), instanceInput: dialogType === 'update' ? (relatedInstances.find((i) => i.id === selectedRow) ?? {}) : {}, handleSubmit: save, 
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             objectInputCommonProps: { apiServices }, action: relatedObject?.actions?.find((a) => a.id ===
-                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, relatedProperty: property, queryAddresses: queryAddresses, user: user })),
+                (dialogType === 'create' ? '_create' : dialogType === 'update' ? '_update' : '_delete')), instanceId: selectedRow, queryAddresses: queryAddresses, user: user, associatedObject: instance.id && property.relatedPropertyId
+                ? { instanceId: instance.id, propertyId: property.relatedPropertyId }
+                : undefined })),
         React.createElement(Snackbar, { open: snackbarError.showAlert, handleClose: () => setSnackbarError({ isError: snackbarError.isError, showAlert: false }), message: snackbarError.message, error: snackbarError.isError })));
 };
 export default RepeatableField;

package/dist/published/components/custom/Form/FormComponents/RepeatableFieldComponent/RepeatableFieldComponent.js

@@ -1,11 +1,10 @@
 import { ApiBaseUrlProvider, NotificationProvider, } from '@evoke-platform/context';
 import { ReactComponent } from '@formio/react';
-import dot from 'dot-object';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEmpty, isObject } from 'lodash';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { FormComponentWrapper } from '../../Common';
-import { getAllCriteriaInputs, updateCriteriaInputs } from '../../utils';
+import { getCriteriaInputs, populateInstanceWithNestedData, updateCriteriaInputs } from '../../utils';
 import { DropdownRepeatableField } from './ManyToMany/DropdownRepeatableField';
 import RepeatableField from './RepeatableField';
 const apiBaseUrl = process.env.REACT_APP_API_ROOT || `${window.location.origin}/api`;
@@ -23,24 +22,43 @@ export class RepeatableFieldComponent extends ReactComponent {
     }
     init() {
         if (this.criteria) {
-            const inputProps = getAllCriteriaInputs(this.criteria);
-            const data = dot.dot(this.root._data);
+            const inputProps = getCriteriaInputs(this.criteria);
+            this.updatedCriteria = updateCriteriaInputs(this.updatedCriteria, this.root._data, this.component.user);
             for (const inputProp of inputProps) {
-                // Parse data to update criteria when form is loaded.
-                updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
                 // Parse data to update criteria when form field is updated
                 // Need to parse all fields again.
                 const compKeyFragments = inputProp.split('.');
                 let compKey = compKeyFragments[0];
-                if (['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
+                const property = this.component.properties.find((c) => c.id === compKey);
+                if (property?.type === 'address' &&
+                    ['line1', 'line2', 'city', 'state', 'zipCode'].includes(compKeyFragments[1])) {
                     compKey = inputProp;
                 }
-                this.on(`changed-${compKey}`, () => {
-                    const data = dot.dot(this.root._data);
-                    this.updatedCriteria = cloneDeep(this.criteria) ?? {};
-                    for (const inputProp of inputProps) {
-                        updateCriteriaInputs(this.updatedCriteria, inputProp, data[inputProp], true);
+                this.on(`changed-${compKey}`, async (value) => {
+                    const data = this.root._data;
+                    if (property?.type === 'object' && isObject(value) && 'id' in value && 'objectId' in value) {
+                        const paths = this.component.allCriteriaInputs
+                            .filter((input) => input.split('.')[0] === compKey)
+                            .map((p) => p.split('.').slice(1).join('.'));
+                        let instance = value;
+                        if (!isEmpty(paths)) {
+                            instance = await populateInstanceWithNestedData(value['id'], value['objectId'], paths, this.component.apiServices);
+                        }
+                        data[compKey] = instance;
                     }
+                    else {
+                        if (compKey.includes('.')) {
+                            const keyFragments = compKey.split('.');
+                            if (!data[keyFragments[0]]) {
+                                data[keyFragments[0]] = {};
+                            }
+                            data[keyFragments[0]][keyFragments[1]] = value;
+                        }
+                        else {
+                            data[compKey] = value;
+                        }
+                    }
+                    this.updatedCriteria = updateCriteriaInputs(this.criteria ?? {}, data, this.component.user);
                     this.attachReact(this.element);
                 });
             }

package/dist/published/components/custom/Form/tests/Form.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/published/components/custom/Form/tests/Form.test.js

@@ -0,0 +1,158 @@
+import { ApiServices } from '@evoke-platform/context';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import axios from 'axios';
+import { isEqual } from 'lodash';
+import { http, HttpResponse } from 'msw';
+import { setupServer } from 'msw/node';
+import React from 'react';
+import { it } from 'vitest';
+import Form from '../Common/Form';
+import { licenseObject, npLicense, npSpecialtyType1, npSpecialtyType2, rnLicense, rnSpecialtyType1, rnSpecialtyType2, specialtyObject, specialtyTypeObject, } from './test-data';
+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());
+    });
+};
+describe('Form component', () => {
+    let server;
+    let apiServices;
+    beforeAll(() => {
+        server = setupServer(http.get('/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/data/objects/license/effective', () => HttpResponse.json(licenseObject)), http.get('/data/objects/license/instances', () => {
+            return HttpResponse.json([rnLicense, npLicense]);
+        }), http.get('/data/objects/specialtyType/instances', (req) => {
+            const filter = new URL(req.request.url).searchParams.get('filter');
+            if (filter) {
+                const whereFilter = JSON.parse(filter).where;
+                // The two objects in the array of conditions in the "where" filter represent the potential filters that can be applied when retrieving "specialty" instances.
+                // The first object is for the the validation criteria, but it is empty if the "license" field, which is referenced in the validation criteria, hasn't been filled out yet.
+                // The second object is for the search criteria which the user enters in the "specialty" field, but it is empty if no search text has been entered.
+                if (isEqual(whereFilter, { and: [{}, {}] }))
+                    return HttpResponse.json([
+                        rnSpecialtyType1,
+                        rnSpecialtyType2,
+                        npSpecialtyType1,
+                        npSpecialtyType2,
+                    ]);
+                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'rnLicenseType' }, {}] }))
+                    return HttpResponse.json([rnSpecialtyType1, rnSpecialtyType2]);
+                else if (isEqual(whereFilter, { and: [{ 'licenseType.id': 'npLicenseType' }, {}] }))
+                    return HttpResponse.json([npSpecialtyType1, npSpecialtyType2]);
+            }
+        }));
+        server.listen();
+    });
+    beforeEach(() => {
+        apiServices = new ApiServices(axios.create());
+    });
+    afterAll(() => {
+        server.close();
+    });
+    afterEach(() => {
+        server.resetHandlers();
+        removePoppers();
+    });
+    describe('validation criteria', () => {
+        it(`filters related object field with validation criteria that references a related object's nested data`, async () => {
+            const user = userEvent.setup();
+            server.use(http.get('/data/objects/license/instances/rnLicense', (req) => {
+                const expand = new URL(req.request.url).searchParams.get('expand');
+                if (expand === 'licenseType.id') {
+                    return HttpResponse.json(rnLicense);
+                }
+            }));
+            render(React.createElement(Form, { actionId: '_create', actionType: 'create', object: specialtyObject, apiServices: apiServices }));
+            const license = await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown is rendering all options
+            let specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
+            await user.click(specialtyType);
+            let openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await within(openAutocomplete).findByRole('option', { name: 'NP Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'NP Specialty Type #2' });
+            // Close the specialty type dropdown
+            removePoppers();
+            // Select a license from the dropdown
+            await user.click(license);
+            const rnLicenseOption = await screen.findByRole('option', { name: 'RN License' });
+            await user.click(rnLicenseOption);
+            // Validate that specialty type dropdown is only rendering specialty types that are associated with the selected license.
+            specialtyType = await screen.findByRole('combobox', { name: 'Specialty Type' });
+            await user.click(specialtyType);
+            openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #1' })).to.be.null);
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
+        });
+        it(`filters related object field with validation criteria that references a defaulted related object's nested data`, async () => {
+            const user = userEvent.setup();
+            server.use(http.get('/data/objects/license/instances/rnLicense', (req) => {
+                const expand = new URL(req.request.url).searchParams.get('expand');
+                if (expand === 'licenseType.id') {
+                    return HttpResponse.json(rnLicense);
+                }
+            }));
+            render(React.createElement(Form, { actionId: '_create', actionType: 'create', object: specialtyObject, apiServices: apiServices, associatedObject: { propertyId: 'license', instanceId: 'rnLicense' } }));
+            // Validate that the license field is hidden
+            await waitFor(() => expect(screen.queryByRole('combobox', { name: 'License' })).to.be.null);
+            // 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 user.click(specialtyType);
+            const openAutocomplete = await screen.findByRole('listbox');
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #1' });
+            await within(openAutocomplete).findByRole('option', { name: 'RN Specialty Type #2' });
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #1' })).to.be.null);
+            await waitFor(() => expect(within(openAutocomplete).queryByRole('option', { name: 'NP Specialty Type #2' })).to.be.null);
+        });
+    });
+    describe('visibility configuration', () => {
+        it('shows fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using JsonLogic', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'jsonLogicDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+        it('shows fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance',
+                } }));
+            // Validate that specialty type dropdown renders
+            await screen.findByRole('combobox', { name: 'Specialty Type' });
+        });
+        it('hides fields based on instance data using simple conditions', async () => {
+            server.use(http.get('/data/objects/license/instances/rnLicense', () => HttpResponse.json(rnLicense)));
+            render(React.createElement(Form, { actionId: 'simpleConditionDisplayTest', actionType: 'update', object: specialtyObject, apiServices: apiServices, instance: {
+                    id: '123',
+                    objectId: 'specialty',
+                    name: 'Test Specialty Object Instance -- hidden',
+                } }));
+            // Validate that license dropdown renders
+            await screen.findByRole('combobox', { name: 'License' });
+            // Validate that specialty type dropdown does not render
+            expect(screen.queryByRole('combobox', { name: 'Specialty Type' })).to.be.null;
+        });
+    });
+});

package/dist/published/components/custom/Form/tests/test-data.d.ts

@@ -0,0 +1,13 @@
+import { Obj, ObjectInstance } from '@evoke-platform/context';
+export declare const licenseObject: Obj;
+export declare const licenseTypeObject: Obj;
+export declare const specialtyObject: Obj;
+export declare const specialtyTypeObject: Obj;
+export declare const rnLicense: ObjectInstance;
+export declare const npLicense: ObjectInstance;
+export declare const rnLicenseType: ObjectInstance;
+export declare const npLicesneType: ObjectInstance;
+export declare const rnSpecialtyType1: ObjectInstance;
+export declare const rnSpecialtyType2: ObjectInstance;
+export declare const npSpecialtyType1: ObjectInstance;
+export declare const npSpecialtyType2: ObjectInstance;