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

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/Document.js

@@ -43,7 +43,7 @@ export const Document = (props) => {
             // For 'file' type properties, check permissions on the sys__file object
             // For 'document' type properties, check document attachment permissions
             const endpoint = property.type === 'file'
-                ? getPrefixedUrl(`/objects/sys__file/instances/${instance.id}/checkAccess?action=update`)
+                ? getPrefixedUrl('/objects/sys__file/instances/checkAccess?action=execute&field=_create')
                 : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=update`);
             apiServices
                 .get(endpoint)

package/dist/published/components/custom/Form/FormComponents/DocumentComponent/DocumentList.js

@@ -64,12 +64,15 @@ export const DocumentList = (props) => {
     }, []);
     const checkPermissions = () => {
         if (instance?.[property.id]?.length) {
-            // For 'file' type properties, check permissions on the sys__file object
+            // For 'file' type properties, check regular object instance permissions
             // For 'document' type properties, check document attachment permissions
             const endpoint = property.type === 'file'
-                ? getPrefixedUrl(`/objects/sys__file/instances/${instance.id}/checkAccess?action=view`)
+                ? getPrefixedUrl(`/objects/sys__file/instances/checkAccess?action=read&field=content`)
                 : getPrefixedUrl(`/objects/${objectId}/instances/${instance.id}/documents/checkAccess?action=view`);
-            apiServices.get(endpoint).then((accessCheck) => setHasViewPermission(accessCheck.result));
+            apiServices
+                .get(endpoint)
+                .then((accessCheck) => setHasViewPermission(accessCheck.result))
+                .catch(() => setHasViewPermission(false));
         }
     };
     const isFile = (doc) => doc instanceof File;

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

@@ -27,7 +27,7 @@ export type FormRendererProps = BaseProps & {
     renderBody?: (props: BodyProps) => React.ReactNode;
     renderFooter?: (props: FooterProps) => React.ReactNode;
 };
-export declare const FormRenderer: React.FC<FormRendererProps> & {
+export declare const FormRenderer: ((props: FormRendererProps) => React.JSX.Element) & {
     Header: React.FC<HeaderProps>;
     Body: React.FC<BodyProps>;
     Footer: React.FC<FooterProps>;

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

@@ -1,14 +1,16 @@
-import { useObject } from '@evoke-platform/context';
+import { useApiServices, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import { isEmpty, isEqual, omit } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useWidgetSize } from '../../../theme';
 import { Box } from '../../layout';
 import { Body } from './components/Body';
+import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { Footer, FooterActions } from './components/Footer';
 import { FormContext } from './components/FormContext';
 import Header, { AccordionActions, Title } from './components/Header';
-import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, isAddressProperty, obfuscateValue, } from './components/utils';
+import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisible, getEntryId, getNestedParameterIds, getPrefixedUrl, isAddressProperty, obfuscateValue, } from './components/utils';
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
@@ -23,15 +25,14 @@ const FormRendererInternal = (props) => {
         defaultWidth: 1200,
     });
     const isSmallerThanMd = isBelow('md');
+    const apiServices = useApiServices();
     const [expandedSections, setExpandedSections] = useState([]);
     const [fetchedOptions, setFetchedOptions] = useState({});
     const [expandAll, setExpandAll] = useState();
     const [action, setAction] = useState();
-    const [object, setObject] = useState();
     const [triggerFieldReset, setTriggerFieldReset] = useState(false);
     const [isInitializing, setIsInitializing] = useState(true);
     const [parameters, setParameters] = useState();
-    const objectStore = useObject(objectId);
     const validationContainerRef = useRef(null);
     const updateFetchedOptions = (newData) => {
         setFetchedOptions((prev) => ({
@@ -45,32 +46,26 @@ const FormRendererInternal = (props) => {
     function handleCollapseAll() {
         setExpandAll(false);
     }
+    const { data: object } = useQuery({
+        queryKey: [objectId, 'sanitized'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/objects/${objectId}/effective`), {
+            params: { sanitizedVersion: true },
+        }),
+        staleTime: Infinity,
+        enabled: !!objectId,
+    });
     const updatedEntries = useMemo(() => {
         return object ? assignIdsToSectionsAndRichText(entries, object, parameters) : [];
     }, [entries, object, parameters]);
     useEffect(() => {
-        (async () => {
-            try {
-                const object = await objectStore.get({ sanitized: true });
-                const action = object?.actions?.find((a) => a.id === actionId);
-                setObject(object);
-                setAction(action);
-                if (action?.parameters) {
-                    setParameters(action.parameters);
-                }
-                else if (object) {
-                    // if forms actionId is synced with object properties
-                    setParameters(convertPropertiesToParams(object));
-                }
-            }
-            catch (error) {
-                console.error('Failed to fetch object, action or parameters:', error);
-            }
-            finally {
-                setIsInitializing(false);
-            }
-        })();
-    }, [objectStore, actionId]);
+        if (!object || !actionId)
+            return;
+        const action = object.actions?.find((a) => a.id === actionId);
+        setAction(action);
+        // if forms action is synced with object properties then convertPropertiesToParams
+        setParameters(action?.parameters ?? convertPropertiesToParams(object));
+        setIsInitializing(false);
+    }, [object, actionId]);
     useEffect(() => {
         const currentValues = getValues();
         if (value) {
@@ -243,7 +238,10 @@ const FormRendererInternal = (props) => {
                     } })),
                 action && onSubmit && (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };
-export const FormRenderer = Object.assign(FormRendererInternal, {
+export const FormRenderer = Object.assign(function FormRenderer(props) {
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(FormRendererInternal, { ...props })));
+}, {
     Header,
     Body,
     Footer,

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

@@ -1,21 +1,27 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
+import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { cloneDeep, get, isArray, isEmpty, isEqual, omit, pick, set } from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
 import { Box } from '../../layout';
 import ErrorComponent from '../ErrorComponent';
+import ConditionalQueryClientProvider from './components/ConditionalQueryClientProvider';
 import { evalDefaultVals, processValueUpdate } from './components/DefaultValues';
 import Header from './components/Header';
-import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
+// Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
 function FormRendererContainer(props) {
-    const { instanceId, pageNavigation, dataType, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
+    return (React.createElement(ConditionalQueryClientProvider, null,
+        React.createElement(FormRendererContainerInner, { ...props })));
+}
+// Inner component that assumes QueryClient context is available
+function FormRendererContainerInner(props) {
+    const { instanceId, pageNavigation, display, formId, objectId, actionId, richTextEditor, onSubmit, onDiscardChanges: onDiscardChangesOverride, associatedObject, renderContainer, onSubmitError, sx, renderHeader, renderBody, renderFooter, } = props;
     const apiServices = useApiServices();
     const navigateTo = useNavigate();
     const { id: appId } = useApp();
-    const [sanitizedObject, setSanitizedObject] = useState();
-    const [navigationSlug, setNavigationSlug] = useState();
     const [parameters, setParameters] = useState();
     const [instance, setInstance] = useState();
     const formDataRef = useRef();
@@ -53,72 +59,68 @@ function FormRendererContainer(props) {
         setSnackbarError({ ...snackbarError, isError: true });
         setError(code ?? err);
     };
+    const { data: sanitizedObject, error: sanitizedObjectError } = useQuery({
+        queryKey: [form?.objectId ?? objectId, ...(instanceId ? [instanceId] : []), 'sanitized'],
+        queryFn: () => 
+        // form?.objectId is needed for subtype forms to get the correct object
+        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } }),
+        staleTime: Infinity,
+        enabled: !!(form?.objectId || objectId),
+    });
+    const { data: fetchedInstance, error: instanceError } = useQuery({
+        queryKey: [objectId, instanceId, 'instance'],
+        queryFn: () => objectStore.getInstance(instanceId),
+        staleTime: Infinity,
+        enabled: !!instanceId && !!sanitizedObject,
+    });
     useEffect(() => {
-        (async () => {
-            try {
-                if (instanceId) {
-                    const instance = await objectStore.getInstance(instanceId);
-                    setInstance(instance);
-                }
-                const object = await apiServices.get(getPrefixedUrl(`/objects/${form?.objectId || objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), { params: { sanitizedVersion: true } });
-                setSanitizedObject(object);
-                const action = object?.actions?.find((a) => a.id === (form?.actionId || actionId));
-                if (action && (instanceId || action.type === 'create')) {
-                    setAction(action);
-                    // Clear error if action is found after being missing
-                    // TODO: This entire effect should take place after form is fetched to avoid an error flickering
-                    // That is, this effect should be merged with the one below that fetches the form
-                    setError((prevError) => prevError === 'Action could not be found' ? undefined : prevError);
-                }
-                else {
-                    setError('Action could not be found');
-                }
-            }
-            catch (error) {
-                onError(error);
-            }
-        })();
-    }, [dataType, form, instanceId]);
+        if (fetchedInstance)
+            setInstance(fetchedInstance);
+        if (instanceError)
+            onError(instanceError);
+    }, [fetchedInstance, instanceError]);
     useEffect(() => {
-        if (pageNavigation) {
-            apiServices
-                .get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`))
-                .then((page) => {
-                setNavigationSlug(page?.slug);
-            });
+        if (!sanitizedObject)
+            return;
+        const action = sanitizedObject.actions?.find((a) => a.id === (form?.actionId || actionId));
+        if (action && (instanceId || action.type === 'create')) {
+            setAction(action);
+            // Clear error if action is found after being missing
+            setError((prevError) => (prevError === 'Action could not be found' ? undefined : prevError));
+        }
+        else {
+            setError('Action could not be found');
         }
-    }, []);
+    }, [sanitizedObject, actionId, form?.actionId, instanceId]);
+    const { data: navigationSlug } = useQuery({
+        queryKey: [appId, 'navigationSlug'],
+        queryFn: () => apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`)),
+        select: (page) => page.slug,
+        staleTime: Infinity,
+        enabled: !!pageNavigation,
+    });
+    const formIdToFetch = formId || action?.defaultFormId;
+    const { data: fetchedForm, error: fetchedFormError } = useFormById(formIdToFetch ?? '', apiServices);
     useEffect(() => {
-        const needsInstance = action?.type !== 'create' && !!instanceId;
-        // Instance and Action are loaded in the side effect above; wait for them to complete.
-        const loading = (actionId && !action) || (needsInstance && !instance);
-        if (form || loading)
-            return;
-        if ((formId || action?.defaultFormId) && formId !== '_auto_') {
-            apiServices
-                .get(getPrefixedUrl(`/forms/${formId || action?.defaultFormId}`))
-                .then((evokeForm) => {
-                // If an actionId is provided, ensure it matches the form's actionId
-                if (!actionId || evokeForm?.actionId === actionId) {
-                    const form = evokeForm;
-                    setForm(form);
-                }
-                else {
-                    setError('Configured action ID does not match form action ID');
-                }
-            })
-                .catch((error) => {
-                onError(error);
-            });
+        if (!formIdToFetch && action) {
+            setError('Action form could not be found');
         }
-        else if (action?.type === 'delete' && formId === '_auto_') {
+    }, [formIdToFetch, action]);
+    useEffect(() => {
+        if (fetchedForm) {
+            if (actionId && fetchedForm.actionId !== actionId) {
+                setError('Configured action ID does not match form action ID');
+            }
+            setForm(fetchedForm);
+        }
+        else if (action?.type === 'delete' && formId === '_auto_' && instance) {
             setForm({
                 id: '',
-                name: '',
+                name: 'Delete',
                 entries: [
                     {
                         type: 'content',
-                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance?.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
+                        html: `<p style="padding-top: 24px; padding-bottom: 24px;">You are about to delete <strong>${instance.name}</strong>. Deleted records can't be restored. Are you sure you want to continue?</p>`,
                     },
                 ],
                 objectId: objectId,
@@ -128,10 +130,12 @@ function FormRendererContainer(props) {
                 },
             });
         }
-        else {
-            setError('Action form could not be found');
-        }
-    }, [action, actionId, objectId, instance]);
+    }, [fetchedForm, instance, action, formId]);
+    useEffect(() => {
+        const error = sanitizedObjectError || fetchedFormError;
+        if (error)
+            onError(error);
+    }, [sanitizedObjectError, fetchedFormError]);
     useEffect(() => {
         if (!form)
             return;
@@ -141,7 +145,7 @@ function FormRendererContainer(props) {
     }, [form, action?.parameters, sanitizedObject]);
     useEffect(() => {
         const getInitialValues = async () => {
-            if (form && (instance || !instanceId)) {
+            if (form && parameters && (instance || !instanceId)) {
                 const defaultValues = await getDefaultValues(form.entries, instance || {});
                 setFormData(defaultValues);
                 // Deep clone to avoid reference issues
@@ -149,7 +153,7 @@ function FormRendererContainer(props) {
             }
         };
         getInitialValues();
-    }, [form, instance, sanitizedObject]);
+    }, [form, instance, sanitizedObject, parameters]);
     const onSubmissionSuccess = (updatedInstance) => {
         setSnackbarError({
             showAlert: true,
@@ -158,7 +162,7 @@ function FormRendererContainer(props) {
         });
         if (navigationSlug) {
             if (navigationSlug.includes(':instanceId')) {
-                const navigateInstanceId = action?.type === 'create' ? updatedInstance?.id : instanceId;
+                const navigateInstanceId = action?.type === 'create' ? updatedInstance.id : instanceId;
                 navigateTo(`/${appId}/${navigationSlug.replace(':instanceId', navigateInstanceId ?? ':instanceId')}`);
             }
             else {
@@ -167,18 +171,17 @@ function FormRendererContainer(props) {
         }
         setInstance(updatedInstance);
     };
+    /**
+     * Manually links any newly uploaded files in the submission to the specified instance.
+     * @param submission The form submission data
+     * @param linkTo The instance to link the files to
+     */
     const linkFiles = async (submission, linkTo) => {
-        // Create file links for any uploaded files after instance creation
+        // Create file links for any uploaded files that haven't been linked yet
         for (const property of sanitizedObject?.properties?.filter((property) => property.type === 'file') ?? []) {
             const files = submission[property.id];
             if (files?.length) {
-                try {
-                    await createFileLinks(files, linkTo, apiServices);
-                }
-                catch (error) {
-                    console.error('Failed to create file links:', error);
-                    // Don't fail the entire submission if file linking fails
-                }
+                await createFileLinks(files, linkTo, apiServices);
             }
         }
     };
@@ -195,11 +198,9 @@ function FormRendererContainer(props) {
                         ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
-                if (response) {
-                    // Manually link files to created instance.
-                    await linkFiles(submission, { id: response.id, objectId: form.objectId });
-                    onSubmissionSuccess(response);
-                }
+                // Manually link files to created instance.
+                await linkFiles(submission, { id: response.id, objectId: form.objectId });
+                onSubmissionSuccess(response);
             }
             else if (instanceId && action) {
                 const response = await objectStore.instanceAction(instanceId, {
@@ -209,21 +210,26 @@ function FormRendererContainer(props) {
                         .map((property) => property.id) ?? []),
                 });
                 if (sanitizedObject && instance) {
+                    if (!onAutosave) {
+                        // For non-autosave updates, link any uploaded files to the instance.
+                        await linkFiles(submission, { id: instanceId, objectId: objectId });
+                    }
                     onSubmissionSuccess(response);
-                    deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
+                    // Only delete the necessary files after submission succeeds to avoid deleting a file prematurely.
+                    await deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
                 }
             }
         }
         catch (error) {
-            // Handle deleteDocuments for uploaded documents if the main submission fails
-            if (instanceId && action && sanitizedObject && instance) {
-                deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
-            }
             setSnackbarError({
                 isError: true,
                 showAlert: true,
                 message: error.response?.data?.error?.message ?? 'An error occurred',
             });
+            if (instanceId && action && sanitizedObject && instance) {
+                // For an update, uploaded documents have been linked to the instance and need to be deleted.
+                await deleteDocuments(submission, false, apiServices, sanitizedObject, instance, action, setSnackbarError);
+            }
             throw error; // Throw error so caller knows submission failed
         }
     };
@@ -327,7 +333,7 @@ function FormRendererContainer(props) {
         try {
             setIsSaving(true);
             const cleanedData = removeUneditedProtectedValues(formDataRef.current);
-            const submission = await formatSubmission(cleanedData, apiServices, objectId, instanceId, form, setSnackbarError);
+            const submission = await formatSubmission(cleanedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
             // Handle object instance autosave
             if (instanceId && action?.type === 'update') {
                 await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
@@ -336,6 +342,7 @@ function FormRendererContainer(props) {
                         ?.filter((property) => !property.formula && property.type !== 'collection')
                         .map((property) => property.id) ?? []),
                 });
+                await linkFiles(submission, { id: instanceId, objectId });
             }
             setLastSavedData(cloneDeep(formDataRef.current));
             setIsSaving(false);

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare function ConditionalQueryClientProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export default ConditionalQueryClientProvider;

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

@@ -0,0 +1,21 @@
+import { QueryCache, QueryClient, QueryClientContext, QueryClientProvider } from '@tanstack/react-query';
+import React, { useContext, useState } from 'react';
+// If FormRenderer is rendered outside a QueryClientProvider (e.g. standalone usage),
+// we create a local QueryClient so React Query hooks still work.
+// If a provider already exists, we reuse it to avoid fragmenting the cache.
+function ConditionalQueryClientProvider({ children }) {
+    const existingQueryClient = useContext(QueryClientContext);
+    const [localQueryClient] = useState(() => new QueryClient({
+        queryCache: new QueryCache({
+            onError: (error, query) => {
+                const message = query.meta?.errorMessage ?? 'Something went wrong:';
+                console.error(message, error);
+            },
+        }),
+    }));
+    if (existingQueryClient) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    return React.createElement(QueryClientProvider, { client: localQueryClient }, children);
+}
+export default ConditionalQueryClientProvider;