@evoke-platform/ui-components 1.10.0-testing.1 → 1.10.0-testing.11

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

@@ -1,5 +1,5 @@
 import { useApiServices, useNotification, } from '@evoke-platform/context';
-import { get, isEqual, pick, startCase } from 'lodash';
+import { get, isEqual, omit, startCase } from 'lodash';
 import { DateTime } from 'luxon';
 import React, { useCallback, useEffect, useState } from 'react';
 import sift from 'sift';
@@ -34,7 +34,7 @@ const styles = {
     },
 };
 const RepeatableField = (props) => {
-    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry, createActionId, updateActionId, deleteActionId, } = props;
+    const { fieldDefinition, canUpdateProperty, criteria, viewLayout, entry } = props;
     const { fetchedOptions, setFetchedOptions, instance, width } = useFormContext();
     const { isBelow } = useWidgetSize({
         scroll: false,
@@ -62,9 +62,9 @@ const RepeatableField = (props) => {
         showAlert: false,
         isError: false,
     });
-    const createAction = relatedObject?.actions?.find((item) => item.id === createActionId);
-    const updateAction = relatedObject?.actions?.find((item) => item.id === updateActionId);
-    const deleteAction = relatedObject?.actions?.find((item) => item.id === deleteActionId);
+    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 || action?.defaultFormId) {
             apiServices
@@ -209,11 +209,11 @@ const RepeatableField = (props) => {
     }, [fetchCriteriaObjects, relatedObject]);
     useEffect(() => {
         if (createAction && !createForm)
-            getForm(setCreateForm, createAction); // TODO: pass entry.display?.createForm as a third argument
+            getForm(setCreateForm, createAction, entry.display?.createFormId);
         if (updateAction && !updateForm)
-            getForm(setUpdateForm, updateAction); // TODO: pass entry.display?.updateForm as a third argument
+            getForm(setUpdateForm, updateAction, entry.display?.updateFormId);
         if (deleteAction && !deleteForm)
-            getForm(setDeleteForm, deleteAction); // TODO: pass entry.display?.deleteForm as a third argument
+            getForm(setDeleteForm, deleteAction, entry.display?.deleteFormId);
     }, [entry.display, createAction, updateAction, deleteAction]);
     useEffect(() => {
         if (relatedObject?.rootObjectId) {
@@ -269,10 +269,10 @@ const RepeatableField = (props) => {
         if (fieldDefinition.objectId && canUpdateProperty && !fetchedOptions[`${fieldDefinition.id}HasCreateAction`]) {
             apiServices
                 .get(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/checkAccess`), {
-                params: { action: 'execute', field: '_create', scope: 'data' },
+                params: { action: 'execute', field: entry.display?.createActionId, scope: 'data' },
             })
                 .then((checkAccess) => {
-                const action = relatedObject.actions?.find((item) => item.id === '_create');
+                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) {
@@ -346,17 +346,21 @@ const RepeatableField = (props) => {
             }, variant: "text", onClick: () => setReloadOnErrorTrigger((prevState) => !prevState) }, "Retry")));
     const save = async (input) => {
         const action = relatedObject?.actions?.find((a) => a.id ===
-            (dialogType === 'create' ? createActionId : dialogType === 'update' ? updateActionId : deleteActionId));
+            (dialogType === 'create'
+                ? entry.display?.createActionId
+                : dialogType === 'update'
+                    ? entry.display?.updateActionId
+                    : entry.display?.deleteActionId));
         // when save is called we know that fieldDefinition is a parameter and fieldDefinition.objectId is defined
         input = await formatSubmission(input, apiServices, fieldDefinition.objectId, selectedInstanceId, action?.type === 'update' ? updateForm : undefined);
-        if (action?.type === 'create' && createActionId) {
+        if (action?.type === 'create' && entry.display?.createActionId) {
             const updatedInput = {
                 ...input,
                 [fieldDefinition?.relatedPropertyId]: { id: instance?.id },
             };
             try {
                 const instance = await apiServices.post(getPrefixedUrl(`/objects/${fieldDefinition.objectId}/instances/actions`), {
-                    actionId: createActionId,
+                    actionId: entry.display?.createActionId,
                     input: updatedInput,
                 });
                 const hasAccess = fieldDefinition?.relatedPropertyId && fieldDefinition.relatedPropertyId in instance;
@@ -379,8 +383,8 @@ const RepeatableField = (props) => {
             try {
                 const response = await apiServices.post(getPrefixedUrl(`/objects/${relatedObjectId}/instances/${selectedInstanceId}/actions`), {
                     actionId: `_${action?.type}`,
-                    input: pick(input, relatedObject?.properties
-                        ?.filter((property) => !property.formula && property.type !== 'collection')
+                    input: omit(input, relatedObject?.properties
+                        ?.filter((property) => property.formula || property.type === 'collection')
                         .map((property) => property.id) ?? []),
                 });
                 if (response && relatedObject && instance) {
@@ -519,12 +523,12 @@ const RepeatableField = (props) => {
                                 users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' &&
                                 ' (Inactive)')))))),
                     canUpdateProperty && (React.createElement(Box, { sx: { mt: 2, display: 'flex', gap: 1 } },
-                        React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
+                        entry.display?.updateActionId && (React.createElement(IconButton, { onClick: () => editRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Edit" },
-                                React.createElement(Edit, null))),
-                        React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
+                                React.createElement(Edit, null)))),
+                        entry.display?.deleteActionId && (React.createElement(IconButton, { onClick: () => deleteRow(relatedInstance.id) },
                             React.createElement(Tooltip, { title: "Delete" },
-                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } }))))))))))) : (React.createElement(TableContainer, { sx: {
+                                React.createElement(TrashCan, { sx: { ':hover': { color: '#A12723' } } })))))))))))) : (React.createElement(TableContainer, { sx: {
                     borderRadius: '6px',
                     border: '1px solid #919EAB3D',
                     boxShadow: 'none',
@@ -544,7 +548,7 @@ const RepeatableField = (props) => {
                                             cursor: 'pointer',
                                         },
                                     }
-                                    : {}, onClick: updateActionId &&
+                                    : {}, onClick: entry.display?.updateActionId &&
                                     canUpdateProperty &&
                                     prop.id === 'name'
                                     ? () => editRow(relatedInstance.id)
@@ -554,19 +558,19 @@ const RepeatableField = (props) => {
                                     users?.find((user) => get(relatedInstance, `${prop.id.split('.')[0]}.id`) === user.id)?.status === 'Inactive' && (React.createElement("span", null, ' (Inactive)'))))));
                         }),
                         canUpdateProperty && (React.createElement(TableCell, { sx: { width: '80px' } },
-                            updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
+                            entry.display?.updateActionId && (React.createElement(IconButton, { "aria-label": `edit-collection-instance-${index}`, onClick: () => editRow(relatedInstance.id) },
                                 React.createElement(Tooltip, { title: "Edit" },
                                     React.createElement(Edit, null)))),
-                            React.createElement(IconButton, { "aria-label": `delete-collection-instance-${index}`, onClick: () => deleteRow(relatedInstance.id) },
+                            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 && createActionId && (React.createElement(Button, { variant: "contained", sx: styles.addButton, onClick: addRow, "aria-label": 'Add' }, "Add"))),
+                                    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"))),
         relatedObject && openDialog && (React.createElement(ActionDialog, { object: relatedObject, open: openDialog, onClose: () => setOpenDialog(false), onSubmit: save, action: relatedObject?.actions?.find((a) => a.id ===
                 (dialogType === 'create'
-                    ? createActionId
+                    ? entry.display?.createActionId
                     : dialogType === 'update'
-                        ? updateActionId
-                        : deleteActionId)), relatedFormId: dialogType === 'create'
+                        ? entry.display?.updateActionId
+                        : entry.display?.deleteActionId)), relatedFormId: dialogType === 'create'
                 ? createForm?.id
                 : dialogType === 'update'
                     ? updateForm?.id

package/dist/published/components/custom/FormV2/components/FormFieldTypes/Image.js

@@ -32,7 +32,6 @@ const styles = {
     },
     icon: {
         color: '#fff',
-        zIndex: 40,
         fontSize: '16px',
     },
     deleteIcon: {
@@ -81,7 +80,7 @@ export const Image = (props) => {
         accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.svg'] },
     });
     return (React.createElement(React.Fragment, null, image ? (React.createElement(Box, { sx: styles.imageContainer },
-        React.createElement(Box, { sx: { position: 'relative', left: 0, zIndex: 5 } },
+        React.createElement(Box, { sx: { position: 'relative', left: 0 } },
             React.createElement(CardMedia, { component: "img", image: image, alt: 'Uploaded Image', sx: styles.image }),
             canUpdateProperty && (React.createElement(IconButton, { onClick: handleRemove, "aria-label": "Remove image", sx: styles.deleteIcon },
                 React.createElement(ClearRounded, { sx: styles.icon })))))) : canUpdateProperty ? (React.createElement(Box, { sx: {

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

@@ -6,6 +6,7 @@ import { ExpandedSection } from './types';
 export type HeaderProps = {
     hasAccordions: boolean;
     shouldShowValidationErrors: boolean;
+    validationErrorsRef?: React.Ref<HTMLDivElement>;
     title?: string;
     expandedSections?: ExpandedSection[];
     onExpandAll?: () => void;

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

@@ -6,7 +6,7 @@ import { Typography } from '../../../core/Typography';
 import Box from '../../../layout/Box/Box';
 import ValidationErrors from './ValidationFiles/ValidationErrors';
 const Header = (props) => {
-    const { title, errors, hasAccordions, shouldShowValidationErrors, form, sx } = props;
+    const { title, errors, hasAccordions, shouldShowValidationErrors, validationErrorsRef, form, sx } = props;
     const { width } = useFormContext();
     const { breakpoints, isBelow } = useWidgetSize({
         scroll: false,
@@ -25,12 +25,15 @@ const Header = (props) => {
             borderBottom: !form.id ? undefined : '1px solid #e9ecef',
             gap: isSm || isXs ? 2 : 3,
             ...sx,
+            '.evoke-form-renderer-header': {
+                flex: 1,
+            },
         } },
         title && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(Title, { ...props }))),
         hasAccordions && (React.createElement(Box, { sx: { flex: '1 1 100%' } },
             React.createElement(AccordionActions, { ...props }))),
-        shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null));
+        React.createElement("div", { ref: validationErrorsRef, className: 'evoke-form-renderer-header' }, shouldShowValidationErrors && !isEmpty(errors) ? React.createElement(ValidationErrors, { errors: errors }) : null)));
 };
 // Default slot components for convenience
 export const Title = ({ title }) => (React.createElement(Typography, { sx: {

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

@@ -1,6 +1,7 @@
 import { useApiServices, useAuthenticationContext, } from '@evoke-platform/context';
 import { WarningRounded } from '@mui/icons-material';
 import DOMPurify from 'dompurify';
+import { isEmpty } from 'lodash';
 import React, { useEffect, useMemo } from 'react';
 import useWidgetSize, { useFormContext } from '../../../../theme/hooks';
 import { TextField, Typography } from '../../../core';
@@ -90,18 +91,31 @@ export function RecursiveEntryRenderer(props) {
                         ? display?.defaultValue.orderBy
                         : undefined, defaultValueCriteria: typeof display?.defaultValue === 'object' && 'criteria' in display.defaultValue
                         ? display?.defaultValue?.criteria
-                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, 
-                    // formId={display?.createFormId}  // TODO: this should be added as part of the builder update
-                    createActionId: '_create' })));
+                        : undefined, viewLayout: display?.viewLayout, hasDescription: !!display?.description, formId: display?.createFormId, createActionId: display?.createActionId })));
         }
         else if (fieldDefinition.type === 'user') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
                 React.createElement(UserProperty, { id: entryId, value: fieldValue, error: !!errors?.[entryId], readOnly: entry.type === 'readonlyField', hasDescription: !!display?.description })));
         }
         else if (fieldDefinition.type === 'collection') {
-            return fieldDefinition?.manyToManyPropertyId ? (middleObject && initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] || initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description })))) : (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
-                React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry, createActionId: '_create', updateActionId: '_update', deleteActionId: '_delete' })));
+            if (fieldDefinition?.manyToManyPropertyId) {
+                if (middleObject && !isEmpty(middleObject)) {
+                    return (initialMiddleObjectInstances && (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(DropdownRepeatableField, { initialMiddleObjectInstances: fetchedOptions[`${entryId}MiddleObjectInstances`] ||
+                                initialMiddleObjectInstances, fieldDefinition: fieldDefinition, id: entryId, middleObject: middleObject, readOnly: entry.type === 'readonlyField', criteria: validation?.criteria, hasDescription: !!display?.description }))));
+                }
+                else {
+                    // when in the builder preview, the middle object won't be fetched so instead show an empty field
+                    const singleSelectProperty = structuredClone(fieldDefinition);
+                    singleSelectProperty.type = 'choices';
+                    return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                        React.createElement(FormField, { id: entryId, property: singleSelectProperty, defaultValue: fieldValue || getValues(entryId), selectOptions: [], size: fieldHeight })));
+                }
+            }
+            else {
+                return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) },
+                    React.createElement(RepeatableField, { fieldDefinition: fieldDefinition, canUpdateProperty: entry.type !== 'readonlyField', criteria: validation?.criteria, viewLayout: display?.viewLayout, entry: entry })));
+            }
         }
         else if (fieldDefinition.type === 'richText') {
             return (React.createElement(FieldWrapper, { ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors) }, richTextEditor ? (React.createElement(richTextEditor, {
@@ -156,18 +170,9 @@ export function RecursiveEntryRenderer(props) {
                     : `${entryId}-reset-false`, ...getFieldWrapperProps(fieldDefinition, entry, entryId, fieldValue, display, errors), errorMessage: undefined },
                 React.createElement(FormField, { id: entryId, 
                     // TODO: Ideally the FormField prop should be called parameter but can't change the name for backwards compatibility reasons
-                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, getOptionLabel: (option) => {
-                        if (typeof option === 'string') {
-                            return (entry?.enumWithLabels?.find((e) => e.value === option)
-                                ?.label ?? option);
-                        }
-                        else {
-                            return (entry?.enumWithLabels?.find((e) => e.value === option.value)?.label ?? String(option.value));
-                        }
-                    }, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
+                    property: fieldDefinition, defaultValue: fieldValue || getValues(entryId), onChange: handleChange, readOnly: entry.type === 'readonlyField', placeholder: display?.placeholder, mask: validation?.mask, isOptionEqualToValue: isOptionEqualToValue, error: !!errors?.[entryId], errorMessage: errors?.[entryId]?.message, isMultiLineText: !!display?.rowCount, rows: display?.rowCount, required: entry.display?.required || false, size: fieldHeight, sortBy: display?.choicesDisplay?.sortBy && display.choicesDisplay.sortBy, displayOption: fieldDefinition.type === 'boolean'
                         ? display?.booleanDisplay
-                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: entry?.enumWithLabels &&
-                        entry.enumWithLabels, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
+                        : display?.choicesDisplay?.type && display.choicesDisplay.type, label: display?.label, description: display?.description, tooltip: display?.tooltip, selectOptions: fieldDefinition?.enum, additionalProps: additionalProps, isCombobox: fieldDefinition.nonStrictEnum, strictlyTrue: fieldDefinition.strictlyTrue })));
         }
     }
     else if (entry.type === 'columns') {

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

@@ -482,11 +482,6 @@ export function convertDocToEntries(document) {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                { label: 'Public', value: 'Public' },
-                { label: 'Private', value: 'Private' },
-                { label: 'Portal', value: 'Portal' },
-            ],
         });
     }
     entries.push({
@@ -507,8 +502,8 @@ export function formatDataToDoc(data) {
         uploadedDate: data.uploadedDate,
         versionId: data.versionId,
         metadata: {
-            type: data.type,
-            view_permission: data.view_permission,
+            type: data.type ?? '',
+            view_permission: data.view_permission ?? '',
         },
     };
 }