@evoke-platform/ui-components 1.13.0-dev.6 → 1.13.0-dev.7

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

@@ -1,7 +1,8 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { get, isEqual, omit, startCase } from 'lodash';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { get, omit, startCase } from 'lodash';
 import { DateTime } from 'luxon';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import sift from 'sift';
 import { Edit, ExpandMoreOutlined, TrashCan } from '../../../../../../icons';
 import useWidgetSize, { useFormContext } from '../../../../../../theme/hooks';
@@ -9,7 +10,7 @@ import { Accordion, AccordionDetails, AccordionSummary, Button, IconButton, Skel
 import { Box } from '../../../../../layout';
 import { getReadableQuery } from '../../../../CriteriaBuilder';
 import { retrieveCustomErrorMessage } from '../../../../Form/utils';
-import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere, } from '../../utils';
+import { convertPropertiesToParams, deleteDocuments, formatSubmission, getPrefixedUrl, transformToWhere, useFormById, } from '../../utils';
 import { ActionDialog } from './ActionDialog';
 import { DocumentViewerCell } from './DocumentViewerCell';
 const styles = {
@@ -35,7 +36,7 @@ const styles = {
 };
 const RepeatableField = (props) => {
     const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
-    const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
+    const { instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
         defaultWidth: width,
@@ -43,106 +44,71 @@ const RepeatableField = (props) => {
     const smallerThanMd = isBelow('md');
     const { instanceChanges } = useNotification();
     const apiServices = useApiServices();
-    const [reloadOnErrorTrigger, setReloadOnErrorTrigger] = useState(true);
     const [criteriaObjects, setCriteriaObjects] = useState([]);
     const [selectedInstanceId, setSelectedInstanceId] = useState();
     const [dialogType, setDialogType] = useState();
     const [openDialog, setOpenDialog] = useState(false);
-    const [users, setUsers] = useState(fetchedOptions[`${fieldDefinition.id}Users`] || []);
-    const [error, setError] = useState(false);
-    const [relatedInstances, setRelatedInstances] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
-    const [relatedObject, setRelatedObject] = useState(fetchedOptions[`${fieldDefinition.id}RelatedObject`]);
-    const [hasCreateAction, setHasCreateAction] = useState(fetchedOptions[`${fieldDefinition.id}HasCreateAction`] || false);
-    const [loading, setLoading] = useState((relatedObject && relatedInstances) || !fieldDefinition ? false : true);
-    const [tableViewLayout, setTableViewLayout] = useState(fetchedOptions[`${fieldDefinition.id}TableViewLayout`]);
-    const [createForm, setCreateForm] = useState(fetchedOptions[`${fieldDefinition.id}-createForm`]);
-    const [updateForm, setUpdateForm] = useState(fetchedOptions[`${fieldDefinition.id}-updateForm`]);
-    const [deleteForm, setDeleteForm] = useState(fetchedOptions[`${fieldDefinition.id}-deleteForm`]);
     const [snackbarError, setSnackbarError] = useState({
         showAlert: false,
         isError: false,
     });
+    const queryClient = useQueryClient();
+    const { data: relatedObject, isLoading: loadingRelatedObject } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'effective'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective`)),
+        staleTime: Infinity,
+        enabled: !!fieldDefinition.objectId,
+    });
+    const { data: tableViewLayout, isFetching: isLayoutFetching } = useQuery({
+        queryKey: ['tableViewLayout', viewLayout?.id],
+        enabled: !!viewLayout?.id && !!relatedObject,
+        staleTime: Infinity,
+        placeholderData: () => {
+            return relatedObject?.viewLayout?.table
+                ? {
+                    id: 'default',
+                    name: 'Default',
+                    objectId: relatedObject.id,
+                    ...relatedObject.viewLayout.table,
+                }
+                : undefined;
+        },
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`)),
+    });
+    const transformedCriteria = useMemo(() => (criteria ? transformToWhere(criteria) : {}), [criteria]);
+    const relatedInstancesQueryKey = [
+        instance?.id,
+        'object',
+        fieldDefinition?.objectId,
+        'instances',
+        fieldDefinition?.relatedPropertyId,
+        transformedCriteria,
+    ];
+    const { data: relatedInstances = [], refetch: refetchRelatedInstances, isLoading: loadingRelatedInstances, isError: relatedInstancesError, } = useQuery({
+        queryKey: relatedInstancesQueryKey,
+        queryFn: async () => {
+            const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
+            const filter = {
+                where: { [filterProperty]: instance?.id, ...transformedCriteria },
+                limit: 100,
+            };
+            const instances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
+                params: { filter: JSON.stringify(filter) },
+            });
+            return instances;
+        },
+        enabled: !!fieldDefinition.relatedPropertyId && !!fieldDefinition.objectId && !!instance?.id,
+        staleTime: Infinity,
+    });
     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 === '_auto_')
-            return;
-        if (formId || action?.defaultFormId) {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                setForm(evokeForm);
-                setFetchedOptions({
-                    [`${fieldDefinition.id}${action?.type === 'delete' ? '-deleteForm' : action?.type === 'create' ? '-createForm' : '-updateForm'}`]: evokeForm,
-                });
-            })
-                .catch((error) => {
-                console.error(error);
-            });
-        }
-    }
-    const fetchRelatedInstances = useCallback(async (refetch = false) => {
-        let relatedObject;
-        if (fieldDefinition.objectId) {
-            if (!fetchedOptions[`${fieldDefinition.id}RelatedObject`]) {
-                try {
-                    relatedObject = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective`));
-                    let defaultTableViewLayout;
-                    if (relatedObject.viewLayout?.table) {
-                        defaultTableViewLayout = {
-                            id: 'default',
-                            name: 'Default',
-                            objectId: relatedObject.id,
-                            ...relatedObject?.viewLayout.table,
-                        };
-                    }
-                    if (viewLayout) {
-                        apiServices
-                            .get(getPrefixedUrl(`/objects/${viewLayout.objectId}/tableLayouts/${viewLayout.id}`))
-                            .then(setTableViewLayout)
-                            .catch((err) => setTableViewLayout(defaultTableViewLayout));
-                    }
-                    else {
-                        setTableViewLayout(defaultTableViewLayout);
-                    }
-                    setRelatedObject(relatedObject);
-                }
-                catch (err) {
-                    console.error(err);
-                }
-            }
-            if (fieldDefinition.relatedPropertyId &&
-                fieldDefinition.objectId &&
-                instance?.id &&
-                (!fetchedOptions[`${fieldDefinition.id}Options`] || refetch)) {
-                const filterProperty = `${fieldDefinition.relatedPropertyId}.id`;
-                const transformedCriteria = criteria ? transformToWhere(criteria) : {};
-                const filter = {
-                    where: { [filterProperty]: instance?.id, ...transformedCriteria },
-                    limit: 100,
-                };
-                try {
-                    const timeout = setTimeout(() => {
-                        setLoading(false);
-                    }, 300);
-                    setLoading(true);
-                    const instances = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances`), {
-                        params: { filter: JSON.stringify(filter) },
-                    });
-                    clearTimeout(timeout);
-                    if (instances) {
-                        setRelatedInstances(instances);
-                    }
-                }
-                catch (error) {
-                    setError(true);
-                }
-            }
-            setLoading(false);
-        }
-        relatedObject && checkCreateAccess(relatedObject);
-    }, [fieldDefinition]);
+    const createFormId = entry.display?.createFormId || createAction?.defaultFormId;
+    const updateFormId = entry.display?.updateFormId || updateAction?.defaultFormId;
+    const deleteFormId = entry.display?.deleteFormId || deleteAction?.defaultFormId;
+    const { data: createForm } = useFormById(createFormId ?? '', apiServices);
+    const { data: updateForm } = useFormById(updateFormId ?? '', apiServices);
+    const { data: deleteForm } = useFormById(deleteFormId ?? '', apiServices);
     const fetchCriteriaObjects = useCallback(async () => {
         let objectIds = [];
         const criteriaProperties = relatedObject?.properties?.filter((property) => property.type === 'criteria' && property.objectId) ?? [];
@@ -168,41 +134,21 @@ const RepeatableField = (props) => {
         }
         setCriteriaObjects(objects);
     }, [apiServices, relatedObject, tableViewLayout]);
-    useEffect(() => {
-        if (!fetchedOptions[`${fieldDefinition.id}Users`]) {
-            (async () => {
-                try {
-                    const users = await apiServices.get(getPrefixedUrl(`/users`));
-                    setFetchedOptions({
-                        [`${fieldDefinition.id}Users`]: users,
-                    });
-                    setUsers(users);
-                }
-                catch (error) {
-                    console.error(error);
-                }
-            })();
-        }
-    }, [apiServices]);
-    useEffect(() => {
-        fetchRelatedInstances();
-    }, [fetchRelatedInstances, reloadOnErrorTrigger, instance]);
+    const { data: users } = useQuery({
+        queryKey: ['users'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/users`)),
+        staleTime: Infinity,
+        meta: {
+            errorMessage: 'Error fetching users: ',
+        },
+    });
     useEffect(() => {
         if (relatedObject)
             fetchCriteriaObjects();
     }, [fetchCriteriaObjects, relatedObject]);
-    useEffect(() => {
-        if (createAction && !createForm)
-            getForm(setCreateForm, createAction, entry.display?.createFormId);
-        if (updateAction && !updateForm)
-            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
-        if (deleteAction && !deleteForm)
-            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
-    }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
-            // pass true here so while it doesn't refetch on every tab change it does refetch on changes made
-            const callback = () => fetchRelatedInstances(true);
+            const callback = () => refetchRelatedInstances();
             instanceChanges?.subscribe(relatedObject?.rootObjectId, callback);
             return () => instanceChanges?.unsubscribe(relatedObject?.rootObjectId, callback);
         }
@@ -249,59 +195,30 @@ const RepeatableField = (props) => {
             };
         }
     };
-    const checkCreateAccess = useCallback((relatedObject) => {
-        if (fieldDefinition.objectId &&
-            canUpdateProperty &&
-            !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
-            apiServices
-                .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
+    const { data: hasCreatePermission } = useQuery({
+        queryKey: [fieldDefinition.objectId, entry.display?.createActionId, 'hasCreatePermission '],
+        queryFn: async () => {
+            const checkAccess = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
                 params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
-            })
-                .then((checkAccess) => {
-                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) {
-                        setHasCreateAction(checkAccess.result);
-                    }
-                    else {
-                        const validate = sift(criteria);
-                        setHasCreateAction(validate(instance) && checkAccess.result);
-                    }
+            });
+            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) {
+                    return checkAccess.result;
                 }
                 else {
-                    setHasCreateAction(false);
+                    const validate = sift(criteria);
+                    return validate(instance) && checkAccess.result;
                 }
-            });
-        }
-    }, [fieldDefinition, canUpdateProperty, fetchedOptions, entry.display?.createActionId, instance, apiServices]);
-    useEffect(() => {
-        // Re-check create access when instance changes to re-evaluate the criteria
-        relatedObject && checkCreateAccess(relatedObject);
-    }, [relatedObject, checkCreateAccess]);
-    useEffect(() => {
-        const updatedOptions = {};
-        if ((relatedInstances && !fetchedOptions[`${fieldDefinition.id}Options`]) ||
-            fetchedOptions[`${fieldDefinition.id}Options`].length === 0 ||
-            !isEqual(relatedInstances, fetchedOptions[`${fieldDefinition.id}Options`])) {
-            updatedOptions[`${fieldDefinition.id}Options`] = relatedInstances;
-        }
-        if (relatedObject && !fetchedOptions[`${fieldDefinition.id}RelatedObject`]) {
-            updatedOptions[`${fieldDefinition.id}RelatedObject`] = relatedObject;
-        }
-        if (tableViewLayout && !fetchedOptions[`${fieldDefinition.id}TableViewLayout`]) {
-            updatedOptions[`${fieldDefinition.id}TableViewLayout`] = tableViewLayout;
-        }
-        if ((hasCreateAction || hasCreateAction === false) && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
-            updatedOptions[`${fieldDefinition.id}HasCreateAction`] = hasCreateAction;
-        }
-        else if (!hasCreateAction && relatedObject) {
-            checkCreateAccess(relatedObject);
-        }
-        if (Object.keys(updatedOptions).length > 0) {
-            setFetchedOptions(updatedOptions);
-        }
-    }, [relatedObject, relatedInstances, hasCreateAction, tableViewLayout]);
+            }
+            else {
+                return false;
+            }
+        },
+        staleTime: Infinity,
+        enabled: !!fieldDefinition.objectId && canUpdateProperty && !!relatedObject,
+    });
     const deleteRow = (id) => {
         setDialogType('delete');
         setSelectedInstanceId(id);
@@ -317,7 +234,7 @@ const RepeatableField = (props) => {
         setSelectedInstanceId(id);
         setOpenDialog(true);
     };
-    const ErrorComponent = () => loading ? (React.createElement("div", null,
+    const ErrorComponent = () => loadingRelatedObject || loadingRelatedInstances ? (React.createElement("div", null,
         React.createElement(Typography, { sx: {
                 fontSize: '14px',
                 color: '#727c84',
@@ -333,7 +250,7 @@ const RepeatableField = (props) => {
                     backgroundColor: 'transparent',
                 },
                 'min-width': '44px',
-            }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
+            }, variant: "text", onClick: () => refetchRelatedInstances() }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
             (dialogType === 'create'
@@ -355,8 +272,11 @@ const RepeatableField = (props) => {
                     actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
-                const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
-                hasAccess && setRelatedInstances([...relatedInstances, instance]);
+                queryClient.setQueryData(relatedInstancesQueryKey, (oldData) => {
+                    if (!oldData)
+                        return [instance];
+                    return [...oldData, instance];
+                });
                 setOpenDialog(false);
                 setDialogType(undefined);
                 setSelectedInstanceId(undefined);
@@ -382,12 +302,12 @@ const RepeatableField = (props) => {
                 if (response && relatedObject && instance) {
                     deleteDocuments(input, !!response, apiServices, relatedObject, instance, action);
                 }
-                if (action?.type === 'delete') {
-                    setRelatedInstances((prevInstances) => prevInstances.filter((instance) => instance.id !== selectedInstanceId));
-                }
-                else {
-                    setRelatedInstances((prevInstances) => prevInstances.map((i) => (i.id === instance?.id ? instance : i)));
-                }
+                queryClient.setQueryData(relatedInstancesQueryKey, (oldData = []) => {
+                    if (action?.type === 'delete') {
+                        return oldData.filter((i) => i.id !== selectedInstanceId);
+                    }
+                    return oldData.map((i) => (i.id === instance?.id ? instance : i));
+                });
                 setOpenDialog(false);
                 setDialogType(undefined);
                 setSelectedInstanceId(undefined);
@@ -461,12 +381,12 @@ const RepeatableField = (props) => {
         }
         return value;
     };
-    return loading ? (React.createElement(React.Fragment, null,
+    return loadingRelatedObject || loadingRelatedInstances || isLayoutFetching ? (React.createElement(React.Fragment, null,
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null))) : (React.createElement(React.Fragment, null,
         React.createElement(Box, { sx: { padding: '10px 0' } },
-            !relatedInstances?.length ? (!error ? (React.createElement(Typography, { sx: { margin: '-10px 0', color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : smallerThanMd ? (React.createElement(React.Fragment, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(Accordion, { key: relatedInstance.id, sx: {
+            !relatedInstances?.length ? (!relatedInstancesError ? (React.createElement(Typography, { sx: { margin: '-10px 0', color: 'rgb(114 124 132)', fontSize: '14px' } }, "No items added")) : (React.createElement(ErrorComponent, null))) : smallerThanMd ? (React.createElement(React.Fragment, null, relatedInstances?.map((relatedInstance, index) => (React.createElement(Accordion, { key: relatedInstance.id, sx: {
                     border: '1px solid #dbe0e4',
                     borderTop: index === 0 ? undefined : 'none',
                     boxShadow: 'none',
@@ -556,7 +476,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, disabled: !createAction, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+            hasCreatePermission && 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/FormFieldTypes/Criteria.js

@@ -1,62 +1,46 @@
 import { useApiServices } from '@evoke-platform/context';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import React from 'react';
 import { useFormContext } from '../../../../../theme/hooks';
-import { Button, CircularProgress, Typography } from '../../../../core';
+import { Button, CircularProgress, Skeleton, Typography } from '../../../../core';
 import { Box } from '../../../../layout';
 import CriteriaBuilder from '../../../CriteriaBuilder';
 import { addressProperties, getPrefixedUrl } from '../utils';
 export default function Criteria(props) {
     const { value, canUpdateProperty, fieldDefinition, error } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, handleChange, onAutosave } = useFormContext();
-    const [loadingError, setLoadingError] = useState(false);
-    const [loading, setLoading] = useState(false);
-    const [properties, setProperties] = useState(fetchedOptions[`${fieldDefinition.id}Options`] || []);
-    const fetchProperties = useCallback(async () => {
-        if (fieldDefinition.objectId && !fetchedOptions[`${fieldDefinition.id}Options`]) {
-            setLoading(true);
-            apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`), { params: { fields: ['properties'] } }, (error, properties) => {
-                if (error) {
-                    console.error('Error fetching object properties', error);
-                    setLoadingError(true);
+    const { handleChange, onAutosave } = useFormContext();
+    const { data: properties = [], error: loadingError, refetch: fetchProperties, isFetching: loading, } = useQuery({
+        queryKey: [fieldDefinition?.objectId, 'effective properties'],
+        queryFn: async () => {
+            const properties = await apiServices.get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/effective/properties`));
+            return properties.flatMap((prop) => {
+                if (prop.type === 'object' || prop.type === 'user') {
+                    return [
+                        {
+                            id: `${prop.id}.id`,
+                            name: `${prop.name} Id`,
+                            type: 'string',
+                        },
+                        {
+                            id: `${prop.id}.name`,
+                            name: `${prop.name} Name`,
+                            type: 'string',
+                        },
+                    ];
                 }
-                if (properties) {
-                    const flattenProperties = properties.flatMap((prop) => {
-                        if (prop.type === 'object' || prop.type === 'user') {
-                            return [
-                                {
-                                    id: `${prop.id}.id`,
-                                    name: `${prop.name} Id`,
-                                    type: 'string',
-                                },
-                                {
-                                    id: `${prop.id}.name`,
-                                    name: `${prop.name} Name`,
-                                    type: 'string',
-                                },
-                            ];
-                        }
-                        else if (prop.type === 'address') {
-                            return addressProperties(prop);
-                        }
-                        return prop;
-                    });
-                    setProperties(flattenProperties);
-                    setFetchedOptions({
-                        [`${fieldDefinition.id}Options`]: flattenProperties.map((prop) => ({
-                            id: prop.id,
-                            name: prop.name,
-                        })),
-                    });
-                    setLoadingError(false);
+                if (prop.type === 'address') {
+                    return addressProperties(prop);
                 }
-                setLoading(false);
+                return prop;
             });
-        }
-    }, [fieldDefinition.objectId, apiServices]);
-    useEffect(() => {
-        fetchProperties();
-    }, [fetchProperties]);
+        },
+        staleTime: Infinity,
+        enabled: !!fieldDefinition?.objectId,
+        meta: {
+            errorMessage: 'Error fetching object properties: ',
+        },
+    });
     const handleUpdate = async (criteria) => {
         if (criteria || value) {
             const newValue = criteria ?? null;
@@ -82,9 +66,12 @@ export default function Criteria(props) {
                     padding: 0,
                     '&:hover': { backgroundColor: 'transparent' },
                     minWidth: '44px',
-                }, variant: "text", onClick: fetchProperties, disabled: loading }, "Retry"),
+                }, variant: "text", onClick: () => fetchProperties(), disabled: loading }, "Retry"),
             loading && React.createElement(CircularProgress, { size: 20, sx: { paddingLeft: '10px' } })));
     }
+    if (loading) {
+        return React.createElement(Skeleton, null);
+    }
     return !!value || canUpdateProperty ? (React.createElement(Box, { sx: { borderRadius: '8px', border: error ? '1px solid #FF0000' : '1px solid #ddd' } },
         React.createElement(CriteriaBuilder, { criteria: value ?? undefined, properties: properties, setCriteria: handleUpdate, disabled: !canUpdateProperty, hideBorder: true, presetValues: [
                 {

package/dist/published/components/custom/FormV2/components/FormFieldTypes/DocumentFiles/Document.js

@@ -1,7 +1,7 @@
 import { useApiServices, } from '@evoke-platform/context';
-import { isNil } from 'lodash';
+import { useQuery } from '@tanstack/react-query';
 import prettyBytes from 'pretty-bytes';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDropzone } from 'react-dropzone';
 import { InfoRounded, UploadCloud } from '../../../../../../icons';
 import { useFormContext } from '../../../../../../theme/hooks';
@@ -12,10 +12,9 @@ import { DocumentList } from './DocumentList';
 export const Document = (props) => {
     const { id, fieldType = 'document', canUpdateProperty, error, value, validate, hasDescription } = props;
     const apiServices = useApiServices();
-    const { fetchedOptions, setFetchedOptions, object, handleChange, onAutosave: onAutosave, instance, form, } = useFormContext();
+    const { object, handleChange, onAutosave: onAutosave, instance, form } = useFormContext();
     const [snackbarError, setSnackbarError] = useState();
     const [documents, setDocuments] = useState();
-    const [hasUpdatePermission, setHasUpdatePermission] = useState(fetchedOptions[`${id}UpdatePermission`]);
     let allowedTypesMessage = '';
     if (validate?.allowedFileExtensions?.length) {
         if (validate.allowedFileExtensions.length === 1) {
@@ -33,8 +32,9 @@ export const Document = (props) => {
     useEffect(() => {
         setDocuments(value);
     }, [value]);
-    const checkPermissions = useCallback(() => {
-        if (canUpdateProperty && !fetchedOptions[`${id}UpdatePermission`] && instance?.id) {
+    const { data: hasUpdatePermission = false, isLoading } = useQuery({
+        queryKey: ['hasDocUpdatePermission', object?.id, instance?.id],
+        queryFn: async () => {
             // Find the entry to get the configured createActionId
             const allEntries = getUnnestedEntries(form?.entries ?? []) ?? [];
             const entry = allEntries?.find((entry) => getEntryId(entry) === id);
@@ -43,35 +43,18 @@ export const Document = (props) => {
             // For 'document' type properties, check document attachment permissions
             const endpoint = fieldType === 'file'
                 ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=execute&field=${createActionId}`)
-                : getPrefixedUrl(`/objects/${object?.id}/instances/${instance.id}/documents/checkAccess?action=update`);
-            apiServices
-                .get(endpoint)
-                .then((accessCheck) => {
-                setFetchedOptions({
-                    [`${id}UpdatePermission`]: accessCheck.result,
-                });
-                setHasUpdatePermission(accessCheck.result);
-            })
-                .catch(() => {
-                setFetchedOptions({
-                    [`${id}UpdatePermission`]: false,
-                });
-                setHasUpdatePermission(false);
-            });
-        }
-    }, [
-        canUpdateProperty,
-        fetchedOptions[`${id}UpdatePermission`],
-        instance?.id,
-        object,
-        id,
-        apiServices,
-        form,
-        fieldType,
-    ]);
-    useEffect(() => {
-        checkPermissions();
-    }, [checkPermissions]);
+                : getPrefixedUrl(`/objects/${object.id}/instances/${instance.id}/documents/checkAccess?action=update`);
+            try {
+                const accessCheck = await apiServices.get(endpoint);
+                return accessCheck.result;
+            }
+            catch {
+                return false;
+            }
+        },
+        staleTime: Infinity,
+        enabled: canUpdateProperty && !!instance?.id && !!object?.id,
+    });
     const handleUpload = async (files) => {
         if (!files?.length) {
             return;
@@ -163,7 +146,7 @@ export const Document = (props) => {
                         } }, validate?.maxDocuments === 1
                         ? `Maximum size is ${formattedMaxSize}.`
                         : `The maximum size of each document is ${formattedMaxSize}.`)))))),
-        canUpdateProperty && isNil(hasUpdatePermission) ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, fieldType: fieldType, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
+        canUpdateProperty && isLoading ? (React.createElement(Skeleton, { variant: "rectangular", height: formattedMaxSize || allowedTypesMessage ? '136px' : '115px', sx: { margin: '5px 0', borderRadius: '8px' } })) : (React.createElement(DocumentList, { id: id, fieldType: fieldType, handleChange: handleChange, onAutosave: onAutosave, value: documents, setSnackbarError: (type, message) => setSnackbarError({ message, type }), canUpdateProperty: canUpdateProperty && !!hasUpdatePermission })),
         React.createElement(Snackbar, { open: !!snackbarError?.message, handleClose: () => setSnackbarError(null), message: snackbarError?.message, error: snackbarError?.type === 'error' }),
         errors.length > 0 && (React.createElement(Box, { display: 'flex', alignItems: 'center' },
             React.createElement(InfoRounded, { sx: { fontSize: '.75rem', marginRight: '3px', color: '#D3271B' } }),