@evoke-platform/ui-components 1.14.0 → 1.15.0

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

@@ -1,9 +1,9 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
-import { TextField, Typography } from '../../../core';
+import { Skeleton, TextField, Typography } from '../../../core';
 import { Box } from '../../../layout';
 import FormField from '../../FormField';
 import AccordionSections from './AccordionSections';
@@ -17,8 +17,9 @@ import { Image } from './FormFieldTypes/Image';
 import ObjectPropertyInput from './FormFieldTypes/relatedObjectFiles/ObjectPropertyInput';
 import UserProperty from './FormFieldTypes/UserProperty';
 import FormSections from './FormSections';
-import { entryIsVisible, fetchCollectionData, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
+import { entryIsVisible, fetchInitialMiddleObjectInstances, fetchMiddleObject, filterEmptySections, getEntryId, getFieldDefinition, isAddressProperty, isOptionEqualToValue, updateCriteriaInputs, } from './utils';
 import HtmlView from './HtmlView';
+import { useQuery } from '@tanstack/react-query';
 function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors, validation) {
     return {
         inputId: entryId,
@@ -38,7 +39,7 @@ function getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, displ
 }
 export function RecursiveEntryRenderer(props) {
     const { entry } = props;
-    const { fetchedOptions, setFetchedOptions, object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
+    const { object, getValues, errors, instance, richTextEditor: RichTextEditor, parameters, handleChange, onAutosave, fieldHeight, triggerFieldReset, associatedObject, width, } = useFormContext();
     const { isBelow, breakpoints } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -50,19 +51,55 @@ export function RecursiveEntryRenderer(props) {
     const entryId = getEntryId(entry) || 'defaultId';
     const display = 'display' in entry ? entry.display : undefined;
     const fieldValue = entry.type === 'readonlyField' ? instance?.[entryId] : getValues ? getValues(entryId) : undefined;
-    const initialMiddleObjectInstances = fetchedOptions[`${entryId}InitialMiddleObjectInstances`];
-    const middleObject = fetchedOptions[`${entryId}MiddleObject`];
     const fieldDefinition = useMemo(() => {
         if (!object)
             return undefined;
         return getFieldDefinition(entry, object, parameters);
     }, [entry, parameters, object]);
     const validation = fieldDefinition?.validation || {};
-    useEffect(() => {
-        if (fieldDefinition?.type === 'collection' && fieldDefinition?.manyToManyPropertyId && instance) {
-            fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instance.id, fetchedOptions, initialMiddleObjectInstances);
-        }
-    }, [fieldDefinition, instance]);
+    const { data: middleObject } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'MiddleObject'],
+        queryFn: () => fetchMiddleObject(fieldDefinition, apiServices),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object: ',
+        },
+    });
+    const { data: initialMiddleObjectInstances = [], isLoading: isLoadingInstances } = useQuery({
+        queryKey: [
+            fieldDefinition?.objectId,
+            instance?.id,
+            fieldDefinition?.relatedPropertyId,
+            'InitialMiddleObjectInstances',
+        ],
+        queryFn: () => fetchInitialMiddleObjectInstances(apiServices, fieldDefinition, instance?.id),
+        staleTime: Infinity,
+        enabled: !!(fieldDefinition?.objectId &&
+            instance?.id &&
+            fieldDefinition?.type === 'collection' &&
+            fieldDefinition?.manyToManyPropertyId &&
+            fieldDefinition?.relatedPropertyId),
+        meta: {
+            errorMessage: 'Failed to fetch middle object instances: ',
+        },
+    });
+    const memorizedCriteria = useMemo(() => {
+        return 'criteria' in validation && validation.criteria && getValues
+            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
+            : undefined;
+    }, [validation, getValues && getValues(), userAccount, instance]);
+    const memorizedDefaultValueCriteria = useMemo(() => {
+        return display?.defaultValue &&
+            typeof display.defaultValue === 'object' &&
+            'criteria' in display.defaultValue &&
+            display.defaultValue.criteria &&
+            getValues
+            ? updateCriteriaInputs(display.defaultValue.criteria, getValues(), userAccount, instance)
+            : undefined;
+    }, [display, getValues && getValues(), userAccount, instance]);
     if (associatedObject?.propertyId === entryId)
         return null;
     // If the entry is hidden, clear its value and any nested values, and skip rendering
@@ -83,15 +120,15 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'object') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: 'criteria' in validation && validation.criteria
-                        ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                        : undefined, sortBy: typeof display?.defaultValue === 'object' && 'sortBy' in display.defaultValue
-                        ? display?.defaultValue.sortBy
-                        : undefined, orderBy: typeof display?.defaultValue === 'object' && 'orderBy' in display.defaultValue
-                        ? 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, createActionId: display?.createActionId })));
+                React.createElement(ObjectPropertyInput, { relatedObjectId: !fieldDefinition.objectId ? display?.relatedObjectId : fieldDefinition.objectId, fieldDefinition: fieldDefinition, id: entryId, mode: display?.mode || 'default', error: !!errors?.[entryId], displayOption: display?.relatedObjectDisplay || 'dialogBox', initialValue: fieldValue, readOnly: entry.type === 'readonlyField', filter: memorizedCriteria, sortBy: display?.defaultValue &&
+                        typeof display.defaultValue === 'object' &&
+                        'sortBy' in display.defaultValue
+                        ? display.defaultValue.sortBy
+                        : undefined, orderBy: display?.defaultValue &&
+                        typeof display.defaultValue === 'object' &&
+                        'orderBy' in display.defaultValue
+                        ? display.defaultValue.orderBy
+                        : undefined, defaultValueCriteria: memorizedDefaultValueCriteria, 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) },
@@ -99,12 +136,9 @@ export function RecursiveEntryRenderer(props) {
         }
         else if (fieldDefinition.type === 'collection') {
             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: 'criteria' in validation && validation.criteria
-                                ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                                : undefined, hasDescription: !!display?.description }))));
+                if (!isEmpty(middleObject)) {
+                    return isLoadingInstances ? (React.createElement(Skeleton, null)) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: memorizedCriteria, hasDescription: !!display?.description })));
                 }
                 else {
                     // when in the builder preview, the middle object won't be fetched so instead show an empty field
@@ -116,9 +150,7 @@ export function RecursiveEntryRenderer(props) {
             }
             else {
                 return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: 'criteria' in validation && validation.criteria
-                            ? updateCriteriaInputs(validation.criteria, getValues(), userAccount, instance)
-                            : undefined, viewLayout: display?.viewLayout, entry: entry })));
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: memorizedCriteria, viewLayout: display?.viewLayout, entry: entry })));
             }
         }
         else if (fieldDefinition.type === 'richText') {

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount } from '@evoke-platform/context';
+import { Action, ApiServices, Column, Columns, EvokeForm, FormEntry, InputField, InputParameter, InputParameterReference, Obj, ObjectInstance, Property, Section, Sections, UserAccount, ObjWithRoot, PanelViewEntry } from '@evoke-platform/context';
 import { LocalDateTime } from '@js-joda/core';
 import { FieldErrors, FieldValues } from 'react-hook-form';
 import { ObjectProperty } from '../../../../types';
@@ -41,7 +41,8 @@ export declare function getDefaultPages(parameters: InputParameter[], defaultPag
     [x: string]: string;
 }>;
 export declare function updateCriteriaInputs(criteria: Record<string, unknown>, data: Record<string, unknown>, user?: UserAccount, instance?: Record<string, unknown>): Record<string, unknown>;
-export declare function fetchCollectionData(apiServices: ApiServices, fieldDefinition: InputParameter | Property, setFetchedOptions: (newData: FieldValues) => void, instanceId?: string, fetchedOptions?: Record<string, unknown>, initialMiddleObjectInstances?: ObjectInstance[]): Promise<void>;
+export declare const fetchMiddleObject: (fieldDefinition: InputParameter | Property, apiServices: ApiServices) => Promise<ObjWithRoot | undefined>;
+export declare const fetchInitialMiddleObjectInstances: (apiServices: ApiServices, fieldDefinition: InputParameter | Property, instanceId: string) => Promise<ObjectInstance[]>;
 export declare const getErrorCountForSection: (section: Section | Column, errors?: FieldErrors) => number;
 export declare const propertyToParameter: (property: Property) => InputParameter;
 export declare const propertyValidationToParameterValidation: (property: Property) => InputParameter['validation'];
@@ -86,7 +87,7 @@ export declare function formatSubmission(submission: FieldValues, apiServices?:
     propertyId: string;
 }, parameters?: InputParameter[]): Promise<FieldValues>;
 export declare function filterEmptySections(entry: Sections | Columns, instance?: FieldValues, formData?: FieldValues): Sections | Columns | null;
-export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[];
+export declare function assignIdsToSectionsAndRichText(entries: FormEntry[] | PanelViewEntry[], object: Obj, parameters?: InputParameter[]): FormEntry[] | PanelViewEntry[];
 /**
  * Converts a plain text string to RTF format suitable for a RichTextEditor.
  *
@@ -100,5 +101,23 @@ export declare function assignIdsToSectionsAndRichText(entries: FormEntry[], obj
  * This ensures that any plain text input will be safely represented in RTF without losing formatting or characters.
  */
 export declare function plainTextToRtf(plainText: string): string;
-export declare function getFieldDefinition(entry: FormEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
+export declare function getFieldDefinition(entry: FormEntry | PanelViewEntry, object: Obj, parameters?: InputParameter[]): InputParameter | Property | undefined;
 export declare function obfuscateValue(value: unknown, property?: Partial<Property> | Partial<ObjectProperty>): unknown;
+export declare function useFormById(formId: string, apiServices: ApiServices, errorMessage?: string): import("@tanstack/react-query/build/legacy/types").UseQueryResult<EvokeForm, Error>;
+/**
+ * Extract all values from a criteria/filter object.
+ * Handles MongoDB-style query filters with operators like $eq, $in, $and, $or, etc.
+ *
+ * @param criteria - Filter object with examples:
+ * 1. { "propertyId": { "$eq": "value" } }
+ * 2. { "propertyId": { "$in": ["value1", "value2"] } }
+ * 3. { "propertyId": "value"}
+ * 4. { "$and": [ { "propertyId1": { "$eq": "value1" } }, { "propertyId2": { "$eq": "value2" } } ] }
+ * 5. { "$or": [ { "propertyId1": { "$eq": "value1" } }, { "propertyId2": { "$eq": "value2" } } ] }
+ * 6. Nested combinations of the above
+ *
+ * @returns Array of all values found in the criteria object
+ */
+export declare const extractPresetValuesFromCriteria: (criteria: Record<string, unknown>) => string[];
+export declare const extractAllCriteria: (flattenFormEntries: FormEntry[], parameters: InputParameter[]) => Record<string, unknown>[];
+export declare const extractPresetValuesFromDynamicDefaultValues: (flattenFormEntries: FormEntry[]) => string[];

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

@@ -4,7 +4,9 @@ import { get, isArray, isEmpty, isObject, omit, pick, startCase, transform } fro
 import { DateTime } from 'luxon';
 import { nanoid } from 'nanoid';
 import Handlebars from 'no-eval-handlebars';
-import { defaultRuleProcessorMongoDB, formatQuery, parseMongoDB } from 'react-querybuilder';
+import { defaultRuleProcessorMongoDB, formatQuery } from 'react-querybuilder';
+import { parseMongoDB } from '../../util';
+import { useQuery } from '@tanstack/react-query';
 export const scrollIntoViewWithOffset = (el, offset, container) => {
     const elementRect = el.getBoundingClientRect();
     const containerRect = container ? container.getBoundingClientRect() : document.body.getBoundingClientRect();
@@ -332,31 +334,19 @@ export function updateCriteriaInputs(criteria, data, user, instance) {
             },
         }));
 }
-export async function fetchCollectionData(apiServices, fieldDefinition, setFetchedOptions, instanceId, fetchedOptions, initialMiddleObjectInstances) {
-    try {
-        if ((fetchedOptions && !fetchedOptions[`${fieldDefinition.id}MiddleObject`]) || !fetchedOptions) {
-            const fetchedMiddleObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
-                params: {
-                    filter: { fields: ['properties', 'actions', 'rootObjectId'] },
-                },
-            });
-            setFetchedOptions({ [`${fieldDefinition.id}MiddleObject`]: fetchedMiddleObject });
-        }
-        // Fetch the initial middle object instances
-        const filter = instanceId ? getMiddleObjectFilter(fieldDefinition, instanceId) : {};
-        if (!isArray(initialMiddleObjectInstances)) {
-            const fetchedInitialMiddleObjectInstances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
-                params: { filter: JSON.stringify(filter) },
-            });
-            setFetchedOptions({
-                [`${fieldDefinition.id}InitialMiddleObjectInstances`]: fetchedInitialMiddleObjectInstances,
-            });
-        }
-    }
-    catch (error) {
-        console.error('Error fetching collection data:', error);
-    }
-}
+export const fetchMiddleObject = async (fieldDefinition, apiServices) => {
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective?sanitizedVersion=true`), {
+        params: {
+            filter: { fields: ['properties', 'actions', 'rootObjectId'] },
+        },
+    });
+};
+export const fetchInitialMiddleObjectInstances = async (apiServices, fieldDefinition, instanceId) => {
+    const filter = getMiddleObjectFilter(fieldDefinition, instanceId);
+    return await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+        params: { filter: JSON.stringify(filter) },
+    });
+};
 export const getErrorCountForSection = (section, errors) => {
     const entries = section.entries || [];
     return isArray(section.entries)
@@ -881,3 +871,123 @@ function applyMaskToObfuscatedValue(value, mask) {
     }
     return maskedValue;
 }
+export function useFormById(formId, apiServices, errorMessage) {
+    return useQuery({
+        queryKey: ['form', formId],
+        enabled: formId !== '_auto_' && !!formId,
+        staleTime: Infinity,
+        queryFn: () => apiServices.get(getPrefixedUrl(`/forms/${formId}`)),
+        meta: {
+            errorMessage,
+        },
+    });
+}
+/**
+ * Extract all values from a criteria/filter object.
+ * Handles MongoDB-style query filters with operators like $eq, $in, $and, $or, etc.
+ *
+ * @param criteria - Filter object with examples:
+ * 1. { "propertyId": { "$eq": "value" } }
+ * 2. { "propertyId": { "$in": ["value1", "value2"] } }
+ * 3. { "propertyId": "value"}
+ * 4. { "$and": [ { "propertyId1": { "$eq": "value1" } }, { "propertyId2": { "$eq": "value2" } } ] }
+ * 5. { "$or": [ { "propertyId1": { "$eq": "value1" } }, { "propertyId2": { "$eq": "value2" } } ] }
+ * 6. Nested combinations of the above
+ *
+ * @returns Array of all values found in the criteria object
+ */
+export const extractPresetValuesFromCriteria = (criteria) => {
+    const values = [];
+    if (!isObject(criteria) || isArray(criteria)) {
+        return values;
+    }
+    for (const [key, value] of Object.entries(criteria)) {
+        if (key === '$and' || key === '$or') {
+            // Handle logical operators with array of conditions
+            if (isArray(value)) {
+                for (const item of value) {
+                    if (isObject(item)) {
+                        values.push(...extractPresetValuesFromCriteria(item));
+                    }
+                }
+            }
+        }
+        else if (key.startsWith('$')) {
+            // Handle query operators like $eq, $in, $ne, etc.
+            if (isArray(value)) {
+                // For operators like $in that contain arrays
+                values.push(...value.filter((v) => typeof v === 'string' && v.startsWith('{{{') && v.endsWith('}}}')));
+            }
+            else {
+                // For operators like $eq that contain single values
+                if (typeof value === 'string' && value.startsWith('{{{') && value.endsWith('}}}'))
+                    values.push(value);
+            }
+        }
+        else if (isObject(value)) {
+            values.push(...extractPresetValuesFromCriteria(value));
+        }
+        else {
+            // Direct property value
+            if (typeof value === 'string' && value.startsWith('{{{') && value.endsWith('}}}'))
+                values.push(value);
+        }
+    }
+    return values;
+};
+export const extractAllCriteria = (flattenFormEntries, parameters) => {
+    const allCriterias = [];
+    for (const entry of flattenFormEntries) {
+        if (entry.type === 'input' && entry.parameterId) {
+            const param = parameters?.find((param) => param.id === entry.parameterId &&
+                param.type === 'object' &&
+                param.objectId &&
+                !isEmpty(param.validation?.criteria));
+            if (param) {
+                allCriterias.push(param.validation.criteria);
+            }
+            const defaultValue = entry.display?.defaultValue;
+            if (isObject(defaultValue) && 'criteria' in defaultValue) {
+                const defaultValueCriteria = defaultValue.criteria;
+                if (!isEmpty(defaultValueCriteria)) {
+                    allCriterias.push(defaultValueCriteria);
+                }
+            }
+        }
+        else if (entry.type === 'inputField' && ['collection', 'object'].includes(entry.input?.type || '')) {
+            const validationCriteria = entry.input?.validation?.criteria;
+            if (!isEmpty(validationCriteria)) {
+                allCriterias.push(validationCriteria);
+            }
+            const defaultValue = entry.display?.defaultValue;
+            if (isObject(defaultValue) && 'criteria' in defaultValue) {
+                const defaultValueCriteria = defaultValue.criteria;
+                if (!isEmpty(defaultValueCriteria)) {
+                    allCriterias.push(defaultValueCriteria);
+                }
+            }
+        }
+    }
+    return allCriterias;
+};
+export const extractPresetValuesFromDynamicDefaultValues = (flattenFormEntries) => {
+    const allPresetValues = [];
+    for (const entry of flattenFormEntries) {
+        if (entry.type === 'input' || entry.type === 'inputField') {
+            const defaultValue = entry.display?.defaultValue;
+            if (defaultValue) {
+                if (typeof defaultValue === 'string' && defaultValue.startsWith('{{') && defaultValue.endsWith('}}')) {
+                    allPresetValues.push(defaultValue);
+                }
+                else if (Array.isArray(defaultValue)) {
+                    for (const val of defaultValue) {
+                        if (typeof val === 'string' && val.startsWith('{{') && val.endsWith('}}')) {
+                            allPresetValues.push(val);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return allPresetValues;
+};

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

@@ -1,3 +1,4 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as baseRender, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { isEmpty, isEqual, set } from 'lodash';
@@ -14,12 +15,9 @@ global.ResizeObserver = class ResizeObserver {
     unobserve() { }
     disconnect() { }
 };
-const WithProviders = ({ children }) => {
-    return React.createElement(MemoryRouter, null, children);
-};
-const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
 describe('FormRenderer', () => {
     let server;
+    let queryClient;
     beforeAll(() => {
         server = setupServer(http.get('/api/data/objects/specialtyType/effective', () => HttpResponse.json(specialtyTypeObject)), http.get('/api/data/objects/specialtyType/effective', (req) => {
             const sanitizedVersion = new URL(req.request.url).searchParams.get('sanitizedVersion');
@@ -65,12 +63,28 @@ describe('FormRenderer', () => {
         }), http.get('/api/accessManagement/users', () => HttpResponse.json(users)));
         server.listen();
     });
-    afterAll(() => {
-        server.close();
+    beforeEach(() => {
+        // Create a fresh QueryClient for each test, need to pass `retry: false` to avoid retries interfering with error state tests
+        queryClient = new QueryClient({
+            defaultOptions: {
+                queries: {
+                    retry: false,
+                },
+            },
+        });
+    });
+    afterEach(() => {
+        server.resetHandlers();
+        queryClient.clear();
     });
     afterEach(() => {
         server.resetHandlers();
     });
+    const WithProviders = ({ children }) => {
+        return (React.createElement(QueryClientProvider, { client: queryClient },
+            React.createElement(MemoryRouter, null, children)));
+    };
+    const render = (ui, options) => baseRender(ui, { wrapper: WithProviders, ...options });
     describe('validation criteria', () => {
         it(`filters related object field with validation criteria that references a related object's nested data`, async () => {
             const user = userEvent.setup();
@@ -414,7 +428,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 mode: 'existingOnly',
                             },
                         },
@@ -500,7 +514,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                             },
                         },
                     ],
@@ -586,7 +600,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 relatedObjectDisplay: 'dialogBox',
                                 mode: 'existingOnly',
                             },
@@ -654,7 +668,7 @@ describe('FormRenderer', () => {
                                 type: 'input',
                                 parameterId: 'specialtyType',
                                 display: {
-                                    label: 'Speciality Type',
+                                    label: 'Specialty Type',
                                     relatedObjectDisplay: 'dialogBox',
                                     mode: 'existingOnly',
                                 },
@@ -684,7 +698,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 createActionId: '_create',
                             },
                         },
@@ -944,7 +958,7 @@ describe('FormRenderer', () => {
                             type: 'input',
                             parameterId: 'specialtyType',
                             display: {
-                                label: 'Speciality Type',
+                                label: 'Specialty Type',
                                 relatedObjectDisplay: 'dropdown',
                                 mode: 'existingOnly',
                             },
@@ -1021,7 +1035,7 @@ describe('FormRenderer', () => {
                     const user = userEvent.setup();
                     render(React.createElement(FormRenderer, { form: form, onChange: () => { } }));
                     // Navigate to and open dropdown
-                    const dropdown = await screen.findByRole('combobox', { name: 'Speciality Type' });
+                    const dropdown = await screen.findByRole('combobox', { name: 'Specialty Type' });
                     await user.click(dropdown);
                     await screen.findByRole('listbox');
                     // Verify that the existing option is present
@@ -1176,7 +1190,7 @@ describe('FormRenderer', () => {
                     type: 'input',
                     parameterId: 'specialtyType',
                     display: {
-                        label: 'Speciality Type',
+                        label: 'Specialty Type',
                         createActionId: '_create',
                         relatedObjectId: 'specialtyType',
                     },