@evoke-platform/ui-components 1.17.0 → 1.18.0

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

@@ -3,105 +3,32 @@ import { parseMongoDB } from '../util';
 /**
  * Recursively updates a node in a tree structure by applying an updater function to the node with the specified ID.
  *
- * @param {TreeItem[]} tree - The tree structure to update.
+ * @param {TreeViewProperty[]} tree - The tree structure to update.
  * @param {string} nodeId - The ID of the node to update.
- * @param {(node: TreeItem) => TreeItem} updater - The function to apply to the node.
- * @returns {TreeItem[]} - The updated tree structure.
+ * @param {(node: TreeViewProperty) => TreeViewProperty} updater - The function to apply to the node.
+ * @returns {TreeViewProperty[]} - The updated tree structure.
  */
-export const updateTreeNode = (tree, nodeId, updater) => {
+export const updateTreeViewProperty = (tree, nodeId, updater) => {
     return tree.map((node) => {
         if (node.id === nodeId) {
             return updater(node);
         }
         else if (node.children) {
-            return { ...node, children: updateTreeNode(node.children, nodeId, updater) };
+            return { ...node, children: updateTreeViewProperty(node.children, nodeId, updater) };
         }
         else {
             return node;
         }
     });
 };
-/**
- * Fetches the display name path for a given property ID within an object hierarchy.
- *
- * @param {string} propertyId - The property ID to find the display name for.
- * @param {Obj} rootObject - The root object to start the search from.
- * @param {FetchObjectFunction} fetchObject - Function to fetch an object by its ID.
- * @returns {Promise<string>} - A promise that resolves to the display name path.
- */
-export const fetchDisplayNamePath = async (propertyId, rootObject, fetchObject) => {
-    const propertyInfo = await traversePropertyPath(propertyId, rootObject, fetchObject);
-    return propertyInfo ? propertyInfo.name : '';
-};
-/**
- * stores full dot-notation path to each property ID in the given array of properties.
- *
- * @param {ObjectProperty[]} properties - The array of properties to update.
- * @param {string} parentPath - The parent path to attach to each property ID.
- * @returns {ObjectProperty[]} The updated array of properties with the parent path attached to each property ID.
- */
-export const setIdPaths = (properties, parentPath) => {
-    return properties.map((prop) => {
-        const fullPath = parentPath ? `${parentPath}.${prop.id}` : prop.id;
-        return {
-            ...prop,
-            id: fullPath,
-        };
-    });
-};
-/**
- * Traverses a property path within an object hierarchy to retrieve detailed property information.
- *
- * @param {string} propertyPath - The dot-separated path of the property to traverse.
- * @param {Obj} rootObject - The root object from which to start the traversal.
- * @param {FetchObjectFunction} fetchObject - A function to fetch an object by its ID.
- * @returns {Promise<ObjectProperty | null>} A promise that resolves to an ObjectProperty if found, or null otherwise.
- */
-export const traversePropertyPath = async (propertyPath, rootObject, fetchObject) => {
-    const segments = propertyPath.split('.');
-    let currentObject = rootObject;
-    let fullPath = '';
-    let namePath = '';
-    for (let i = 0; i < segments.length; i++) {
-        const remainingPath = segments.slice(i).join('.');
-        let prop = currentObject.properties?.find((p) => p.id === remainingPath);
-        if (prop) {
-            // flattened address or user properties
-            fullPath = fullPath ? `${fullPath}.${remainingPath}` : remainingPath;
-            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
-            return {
-                ...prop,
-                id: fullPath,
-                name: namePath,
-            };
-        }
-        else {
-            prop = currentObject.properties?.find((p) => p.id === segments[i]);
-            if (!prop) {
-                return null;
-            }
-            fullPath = fullPath ? `${fullPath}.${prop.id}` : prop.id;
-            namePath = namePath ? `${namePath} / ${prop.name}` : prop.name;
-            if (i === segments.length - 1) {
-                return {
-                    ...prop,
-                    id: fullPath,
-                    name: namePath,
-                };
-            }
-            if (prop.type === 'object' && prop.objectId) {
-                const fetchedObject = await fetchObject(prop.objectId);
-                if (fetchedObject) {
-                    currentObject = fetchedObject;
-                }
-                else {
-                    return null;
-                }
-            }
-        }
-    }
-    return null;
-};
+export const convertTreeViewPropertyToTreeItem = (property) => ({
+    id: property.id,
+    label: property.name,
+    value: property.id,
+    type: property.type,
+    objectId: property.objectId,
+    children: property.children?.map(convertTreeViewPropertyToTreeItem),
+});
 /**
  * Truncates the name path if it exceeds the specified character limit.
  *
@@ -184,9 +111,11 @@ export const findTreeItemById = (nodes, nodeId) => {
     for (const node of nodes) {
         if (node.id === nodeId)
             return node;
-        const found = node.children && findTreeItemById(node.children, nodeId);
-        if (found)
-            return found;
+        if (nodeId.startsWith(node.id)) {
+            const found = node.children && findTreeItemById(node.children, nodeId);
+            if (found)
+                return found;
+        }
     }
     return null;
 };

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/Form/utils.d.ts

@@ -25,6 +25,7 @@ export declare function flattenFormComponents(components?: ActionInput[]): Actio
 export declare function addObjectPropertiesToComponentProps(properties: Property[], formComponents: any[], allCriteriaInputs?: string[], instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, associatedObject?: {
     instanceId?: string;
     propertyId?: string;
+    objectId?: string;
 }, autoSave?: (data: Record<string, unknown>) => void, readOnly?: boolean, defaultPages?: Record<string, string>, navigateTo?: (path: string) => void, queryAddresses?: (query: string) => Promise<Address[]>, apiServices?: ApiServices, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent): Promise<ActionInput[]>;
 export declare function getDefaultValue(initialValue: unknown, selectOptions?: AutocompleteOption[]): unknown;
 export declare const buildComponentPropsFromObjectProperties: (properties: Property[], objectId: string, instance?: ObjectInstance, objectPropertyInputProps?: ObjectPropertyInputProps, hasActionPermissions?: boolean, autoSave?: ((data: Record<string, unknown>) => void) | undefined, readOnly?: boolean, queryAddresses?: ((query: string) => Promise<Address[]>) | undefined, isModal?: boolean, fieldHeight?: 'small' | 'medium', richTextEditor?: typeof ReactComponent) => unknown[];

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

@@ -9,7 +9,7 @@ import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 export type FormRendererProps = BaseProps & {
     richTextEditor?: ComponentType<SimpleEditorProps>;
     value?: FieldValues;
-    onSubmit?: (data: FieldValues) => void;
+    onSubmit?: (data: FieldValues) => Promise<void> | ((data: FieldValues) => void);
     onDiscardChanges?: () => void;
     onSubmitError?: SubmitErrorHandler<FieldValues>;
     hideTitle?: boolean;
@@ -22,9 +22,11 @@ export type FormRendererProps = BaseProps & {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
+        objectId?: string;
     };
     renderHeader?: (props: HeaderProps) => React.ReactNode;
     renderBody?: (props: BodyProps) => React.ReactNode;
+    readOnly?: boolean;
     renderFooter?: (props: FooterProps) => React.ReactNode;
 };
 export declare const FormRenderer: ((props: FormRendererProps) => React.JSX.Element) & {

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

@@ -14,7 +14,7 @@ import { assignIdsToSectionsAndRichText, convertPropertiesToParams, entryIsVisib
 import { handleValidation } from './components/ValidationFiles/Validation';
 import ValidationErrors from './components/ValidationFiles/ValidationErrors';
 const FormRendererInternal = (props) => {
-    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, hideTitle = false, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, } = props;
+    const { onSubmit, onDiscardChanges, onSubmitError: onSubmitErrorOverride, value, hideTitle = false, fieldHeight, richTextEditor, form, instance, onChange, onAutosave, associatedObject, renderHeader, renderBody, renderFooter, readOnly, } = props;
     const { entries, name: title, objectId, actionId, display } = form;
     const { register, unregister, setValue, reset, handleSubmit, formState: { errors, isSubmitted }, getValues, } = useForm({
         defaultValues: value,
@@ -158,9 +158,9 @@ const FormRendererInternal = (props) => {
     async function unregisterHiddenFieldsAndSubmit() {
         unregisterHiddenFields(entries ?? []);
         removeUneditedProtectedValues();
-        await handleSubmit((data) => {
+        await handleSubmit(async (data) => {
             if (onSubmit) {
-                onSubmit(action?.type === 'delete' ? {} : data);
+                await onSubmit(action?.type === 'delete' ? {} : data);
                 // clear fetched options after successful submit to allow re-evaluation with the new instance data
                 setFetchedOptions({});
             }
@@ -221,6 +221,7 @@ const FormRendererInternal = (props) => {
                     onCollapseAll: handleCollapseAll,
                     expandedSections,
                     hasAccordions: hasSections && isSmallerThanMd,
+                    readOnly,
                 })) : (React.createElement(Body, { ...{
                         isInitializing,
                         entries: updatedEntries,
@@ -230,8 +231,12 @@ const FormRendererInternal = (props) => {
                         onCollapseAll: handleCollapseAll,
                         expandedSections,
                         hasAccordions: hasSections && isSmallerThanMd,
+                        readOnly,
                     } })),
-                action && onSubmit && (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
+                readOnly !== true &&
+                    action &&
+                    onSubmit &&
+                    (renderFooter ? renderFooter(footerProps) : React.createElement(Footer, { ...footerProps }))))));
 };
 export const FormRenderer = Object.assign(function FormRenderer(props) {
     return (React.createElement(ConditionalQueryClientProvider, null,

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

@@ -24,6 +24,7 @@ export type FormRendererContainerProps = BaseProps & {
     };
     display?: {
         fieldHeight?: 'small' | 'medium';
+        readOnly?: boolean;
     };
     actionId?: string;
     objectId: string;
@@ -34,6 +35,10 @@ export type FormRendererContainerProps = BaseProps & {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
+        objectId?: string;
+    } | {
+        instanceId: string;
+        objectId: string;
     };
     renderContainer?: (state: FormRendererState) => React.ReactNode;
     renderHeader?: FormRendererProps['renderHeader'];

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

@@ -1,6 +1,7 @@
 import { useApiServices, useApp, useAuthenticationContext, useNavigate, useObject, } from '@evoke-platform/context';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
+import { DepGraph } from 'dependency-graph';
 import { cloneDeep, get, isArray, isEmpty, isEqual, isObject, pick, set } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Skeleton, Snackbar } from '../../core';
@@ -9,9 +10,8 @@ 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, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, getVisibleEditableFieldIds, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
+import { convertPropertiesToParams, createFileLinks, deleteDocuments, encodePageSlug, extractAllCriteria, extractPresetValuesFromCriteria, extractPresetValuesFromDynamicDefaultValues, formatSubmission, getEntryId, getPrefixedUrl, getUnnestedEntries, handleFileUpload, getVisibleEditableFieldIds, isAddressProperty, isEmptyWithDefault, plainTextToRtf, useFormById, } from './components/utils';
 import FormRenderer from './FormRenderer';
-import { DepGraph } from 'dependency-graph';
 // Wrapper to provide QueryClient context for FormRendererContainer if this is not a nested form
 function FormRendererContainer(props) {
     return (React.createElement(ConditionalQueryClientProvider, null,
@@ -110,10 +110,16 @@ function FormRendererContainerInner(props) {
         setError(code ?? err);
     };
     const { data: sanitizedObject, error: sanitizedObjectError } = useQuery({
-        queryKey: [form?.objectId ?? objectId, ...(instanceId ? [instanceId] : []), 'sanitized'],
+        queryKey: [
+            form?.objectId ?? objectId,
+            ...(instanceId ? [instanceId] : []),
+            display?.readOnly ? 'unsanitized' : '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 } }),
+        apiServices.get(getPrefixedUrl(`/objects/${form?.objectId ?? objectId}${instanceId ? `/instances/${instanceId}/object` : '/effective'}`), 
+        // when the form is readonly the action is still needed, so we need to get the unsanitized object
+        { params: { sanitizedVersion: display?.readOnly ? false : true } }),
         staleTime: Infinity,
         enabled: !!(form?.objectId || objectId),
     });
@@ -170,12 +176,14 @@ function FormRendererContainerInner(props) {
                 // there cannot be formlets here since the `form` is the effective form
                 entry.type !== 'formlet') {
                 const parameter = parameters?.find((param) => param.id === fieldId);
-                if (associatedObject?.propertyId === fieldId &&
+                if (associatedObject &&
+                    'propertyId' in associatedObject &&
+                    associatedObject?.propertyId === fieldId &&
                     associatedObject?.instanceId &&
-                    parameter &&
+                    (parameter || associatedObject.objectId) &&
                     action?.type === 'create') {
                     try {
-                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter.objectId}/instances/${associatedObject.instanceId}`), {
+                        const instance = await apiServices.get(getPrefixedUrl(`/objects/${parameter?.objectId || associatedObject.objectId}/instances/${associatedObject.instanceId}`), {
                             params: {
                                 expand: uniquePresetValues.filter((value) => value.startsWith(`{{{input.${fieldId}.`) ||
                                     value.startsWith(`{{input.${fieldId}.`)),
@@ -206,6 +214,10 @@ function FormRendererContainerInner(props) {
                     else if (parameter?.type === 'boolean' && (fieldValue === undefined || fieldValue === null)) {
                         result[fieldId] = false;
                     }
+                    else if (parameter?.type === 'fileContent' &&
+                        (fieldValue === undefined || fieldValue === null)) {
+                        result[fieldId] = instanceData['name'] ? new File([], instanceData['name']) : undefined;
+                    }
                     else if (fieldValue !== undefined && fieldValue !== null) {
                         if (parameter?.type === 'richText' && typeof fieldValue === 'string') {
                             let RTFFieldValue = fieldValue;
@@ -222,28 +234,39 @@ function FormRendererContainerInner(props) {
             }
         }
         return result;
-    }, [action, parameters, associatedObject, uniquePresetValues, formDataRef, apiServices, userAccount]);
+    }, [action, associatedObject, uniquePresetValues, formDataRef, apiServices, userAccount]);
     useEffect(() => {
-        if (!sanitizedObject)
+        if (!sanitizedObject) {
             return;
-        const allCriterias = extractAllCriteria(flattenFormEntries, parameters || []);
-        const uniquePresetValues = new Set();
-        for (const criteria of allCriterias) {
-            const presetValues = extractPresetValuesFromCriteria(criteria);
-            presetValues.forEach((value) => uniquePresetValues.add(value));
         }
-        extractPresetValuesFromDynamicDefaultValues(flattenFormEntries).map((value) => uniquePresetValues.add(value));
-        setUniquePresetValues(Array.from(uniquePresetValues));
         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));
+            const getParamsFromObject = !action.parameters;
+            const parameters = (getParamsFromObject ? convertPropertiesToParams(sanitizedObject) : action.parameters) ?? [];
+            setParameters(parameters.filter((param) => param.type !== 'collection' && !param.formula));
         }
         else {
             setError('Action could not be found');
+            setAction(undefined);
+            setParameters([]);
+        }
+    }, [sanitizedObject, actionId, form?.actionId, instanceId]);
+    useEffect(() => {
+        if (!flattenFormEntries.length || !parameters.length) {
+            setUniquePresetValues([]);
+            return;
         }
-    }, [sanitizedObject, actionId, form?.actionId, instanceId, flattenFormEntries, parameters]);
+        const allCriterias = extractAllCriteria(flattenFormEntries, parameters);
+        const uniquePresetValues = new Set();
+        for (const criteria of allCriterias) {
+            const presetValues = extractPresetValuesFromCriteria(criteria);
+            presetValues.forEach((value) => uniquePresetValues.add(value));
+        }
+        extractPresetValuesFromDynamicDefaultValues(flattenFormEntries).forEach((value) => uniquePresetValues.add(value));
+        setUniquePresetValues(Array.from(uniquePresetValues));
+    }, [flattenFormEntries, parameters]);
     const { data: navigationSlug } = useQuery({
         queryKey: [appId, 'navigationSlug'],
         queryFn: () => apiServices.get(getPrefixedUrl(`/apps/${appId}/pages/${encodePageSlug(pageNavigation)}`)),
@@ -288,14 +311,6 @@ function FormRendererContainerInner(props) {
         if (error)
             onError(error);
     }, [sanitizedObjectError, fetchedFormError, instanceError]);
-    useEffect(() => {
-        if (!form || !action)
-            return;
-        // If no parameters are defined, then the action is synced with object properties
-        const getParamsFromObject = sanitizedObject && !action.parameters;
-        const parameters = (getParamsFromObject ? convertPropertiesToParams(sanitizedObject) : action.parameters) ?? [];
-        setParameters(parameters.filter((param) => param.type !== 'collection' && !param.formula));
-    }, [form, action?.parameters, sanitizedObject]);
     useEffect(() => {
         const getInitialValues = async () => {
             if (flattenFormEntries.length && (instance || !instanceId)) {
@@ -333,59 +348,96 @@ function FormRendererContainerInner(props) {
             });
         }
     };
+    /**
+     * 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
+                // Only link files that have the 'unsaved' flag (newly uploaded, not yet linked)
+                const unsavedFiles = files.filter((file) => file.unsaved);
+                if (unsavedFiles.length) {
+                    await createFileLinks(unsavedFiles, linkTo, apiServices);
                 }
             }
         }
     };
+    /**
+     * Strips unsaved flags from file properties before sending to API.
+     * The API doesn't expect the unsaved flag, but we need it for linking logic.
+     */
+    const stripUnsavedFlags = (data) => {
+        const result = { ...data };
+        const fileParameters = parameters.filter((param) => param.type === 'file');
+        fileParameters.forEach((param) => {
+            if (Array.isArray(result[param.id])) {
+                result[param.id] = result[param.id].map((file) => ({
+                    id: file.id,
+                    name: file.name,
+                }));
+            }
+        });
+        return result;
+    };
     const saveHandler = async (submission) => {
         if (!form) {
             return;
         }
-        submission = await formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
+        const formattedSubmission = await formatSubmission(submission, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
+        submission = pick(formattedSubmission, parameters.map((parameter) => parameter.id));
         try {
             if (action?.type === 'create') {
-                const response = await apiServices.post(getPrefixedUrl(`/objects/${form.objectId}/instances/actions`), {
-                    actionId: form.actionId,
-                    input: pick(submission, parameters.map((parameter) => parameter.id)),
-                });
-                if (response) {
-                    // Manually link files to created instance.
-                    await linkFiles(submission, { id: response.id, objectId: form.objectId });
-                    onSubmissionSuccess(response);
+                let response = undefined;
+                if ((await objectStore.get()).rootObjectId === 'sys__file' && actionId) {
+                    response = await handleFileUpload(apiServices, submission, actionId, objectId, instanceId, associatedObject && !('propertyId' in associatedObject) ? associatedObject : undefined);
                 }
+                else {
+                    response = await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/actions`), {
+                        actionId: actionId,
+                        instanceId: instanceId,
+                        input: stripUnsavedFlags(submission),
+                    });
+                }
+                // 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, {
-                    actionId: action.id,
-                    input: pick(submission, parameters.map((parameter) => parameter.id)),
-                });
+                let response = undefined;
+                if ((await objectStore.get()).rootObjectId === 'sys__file' && action.type !== 'delete') {
+                    response = await handleFileUpload(apiServices, submission, action.id, objectId, instanceId);
+                }
+                else {
+                    response = await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
+                        actionId: action.id,
+                        input: stripUnsavedFlags(submission),
+                    });
+                }
                 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
         }
     };
@@ -427,9 +479,20 @@ function FormRendererContainerInner(props) {
             const submission = await formatSubmission(scopedData, apiServices, objectId, instanceId, form, setSnackbarError, undefined, parameters);
             // Handle object instance autosave
             if (instanceId && action?.type === 'update') {
+                const pickedSubmission = pick(submission, sanitizedObject?.properties
+                    ?.filter((property) => !property.formula && property.type !== 'collection')
+                    .map((property) => property.id) ?? []);
                 await apiServices.post(getPrefixedUrl(`/objects/${objectId}/instances/${instanceId}/actions`), {
                     actionId: form.autosaveActionId,
-                    input: submission,
+                    input: stripUnsavedFlags(pickedSubmission),
+                });
+                if (sanitizedObject && instance) {
+                    // Only delete the necessary files after submission succeeds to avoid deleting a file prematurely.
+                    await deleteDocuments(submission, true, apiServices, sanitizedObject, instance, action, setSnackbarError);
+                }
+                // Invalidate the instance to fetch the latest version
+                queryClient.invalidateQueries({
+                    queryKey: [objectId, instanceId, 'instance'],
                 });
             }
             setLastSavedData(cloneDeep(formDataRef.current));
@@ -490,7 +553,7 @@ function FormRendererContainerInner(props) {
             border: !isLoading ? '1px solid #dbe0e4' : undefined,
             ...sx,
         } }, !isLoading ? (React.createElement(React.Fragment, null,
-        React.createElement(FormRenderer, { onSubmit: onSubmit ? (data) => onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter }))) : (React.createElement(Box, { sx: { padding: '20px' } },
+        React.createElement(FormRenderer, { onSubmit: onSubmit ? async (data) => await onSubmit(data, saveHandler) : saveHandler, onSubmitError: onSubmitError, onDiscardChanges: onDiscardChanges, richTextEditor: richTextEditor, hideTitle: title?.hidden, fieldHeight: display?.fieldHeight ?? 'medium', value: formDataRef.current, form: form, instance: instance, onChange: onChange, onAutosave: onAutosave, associatedObject: associatedObject && 'propertyId' in associatedObject ? associatedObject : undefined, renderHeader: composedRenderHeader, renderBody: renderBody, renderFooter: renderFooter, readOnly: display?.readOnly ?? false }))) : (React.createElement(Box, { sx: { padding: '20px' } },
         React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
             React.createElement(Skeleton, { width: '78%', sx: { borderRadius: '8px', height: '40px' } }),
             React.createElement(Skeleton, { width: '20%', sx: { borderRadius: '8px', height: '40px' } })),

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

@@ -13,6 +13,7 @@ export type BodyProps = {
     onExpandAll?: () => void;
     onCollapseAll?: () => void;
     sx?: SxProps;
+    readOnly?: boolean;
 };
 export declare const Body: React.FC<BodyProps>;
 export default Body;

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

@@ -3,9 +3,11 @@ import { FormContext } from '../..';
 import useWidgetSize from '../../../../theme/hooks';
 import { Skeleton } from '../../../core';
 import Box from '../../../layout/Box/Box';
+import ViewDetailsEntryRenderer from '../../ViewDetailsV2/InstanceEntryRenderer';
 import { RecursiveEntryRenderer } from './RecursiveEntryRenderer';
+import { convertToReadOnly } from './utils';
 export const Body = (props) => {
-    const { entries, isInitializing, sx } = props;
+    const { entries, isInitializing, sx, readOnly } = props;
     const { width } = useContext(FormContext);
     const { breakpoints } = useWidgetSize({
         scroll: false,
@@ -22,6 +24,6 @@ export const Body = (props) => {
             React.createElement(Skeleton, { width: '32%', sx: { borderRadius: '8px', height: '40px' } })),
         React.createElement(Box, { display: 'flex', width: '100%', justifyContent: 'space-between' },
             React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } }),
-            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, paddingY: isSm || isXs ? '6px' : '14px', ...sx } }, entries.map((entry, index) => (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
+            React.createElement(Skeleton, { width: '49%', sx: { borderRadius: '8px', height: '40px' } })))) : (React.createElement(Box, { sx: { paddingX: isSm || isXs ? 2 : 3, paddingY: isSm || isXs ? '6px' : '14px', ...sx } }, entries.map((entry, index) => readOnly === true ? (React.createElement(ViewDetailsEntryRenderer, { key: index, entry: convertToReadOnly(entry) })) : (React.createElement(RecursiveEntryRenderer, { key: index, entry: entry })))))));
 };
 export default Body;

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

@@ -22,6 +22,7 @@ type FormContextType = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
+        objectId?: string;
     };
     form?: EvokeForm;
     width: number;

package/dist/published/components/custom/FormV2/components/FormFieldTypes/CollectionFiles/ActionDialog.d.ts

@@ -13,6 +13,7 @@ export type ActionDialogProps = {
     associatedObject?: {
         instanceId: string;
         propertyId: string;
+        objectId?: string;
     };
 };
 export declare const ActionDialog: (props: ActionDialogProps) => React.JSX.Element;