@evoke-platform/ui-components 1.10.0-dev.3 → 1.10.0-dev.4

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

@@ -6,9 +6,6 @@ export type ObjectPropertyInputProps = {
     criteria?: object;
     viewLayout?: ViewLayoutEntityReference;
     entry: InputField | InputParameterReference | ReadonlyField;
-    createActionId?: string;
-    updateActionId?: string;
-    deleteActionId?: string;
 };
 declare const RepeatableField: (props: ObjectPropertyInputProps) => React.JSX.Element;
 export default RepeatableField;

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

@@ -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;
@@ -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, 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/RecursiveEntryRenderer.js

@@ -90,9 +90,7 @@ 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) },
@@ -101,7 +99,7 @@ export function RecursiveEntryRenderer(props) {
         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' })));
+                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 +154,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 ?? '',
         },
     };
 }

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

@@ -650,6 +650,7 @@ describe('Form component', () => {
                             parameterId: 'specialtyType',
                             display: {
                                 label: 'Speciality Type',
+                                createActionId: '_create',
                             },
                         },
                     ],
@@ -922,6 +923,7 @@ describe('Form component', () => {
                             display: {
                                 label: 'Speciality Type',
                                 relatedObjectDisplay: 'dropdown',
+                                createActionId: '_create',
                             },
                         },
                     ],

package/dist/published/components/custom/FormV2/tests/test-data.js

@@ -116,6 +116,8 @@ export const UpdateAccessibilityFormOne = {
             display: {
                 label: 'License',
                 relatedObjectDisplay: 'dropdown',
+                createActionId: '_create',
+                createFormId: 'specialtyForm',
             },
         },
     ],

package/dist/published/stories/FormRendererData.js

@@ -196,7 +196,7 @@ export const mockMovieObject = {
             id: 'customers',
             name: 'Customers',
             type: 'collection',
-            objectId: 'costomerMovie',
+            objectId: 'customerMovie',
             relatedPropertyId: 'movie',
             manyToManyPropertyId: 'customer',
         },
@@ -533,20 +533,6 @@ export const mockEvokeForm = {
             display: {
                 label: 'Multi-Select',
             },
-            enumWithLabels: [
-                {
-                    label: '1',
-                    value: '1',
-                },
-                {
-                    label: '2',
-                    value: '2',
-                },
-                {
-                    label: '3',
-                    value: '3',
-                },
-            ],
         },
         {
             type: 'input',
@@ -571,6 +557,8 @@ export const mockEvokeForm = {
             parameterId: 'collection',
             display: {
                 label: 'Collection',
+                createActionId: '_create',
+                createFormId: 'customerCreateForm',
             },
         },
         {
@@ -815,20 +803,6 @@ export const mockDocEvokeForm = {
                     sortBy: 'ASC',
                 },
             },
-            enumWithLabels: [
-                {
-                    label: 'Public',
-                    value: 'Public',
-                },
-                {
-                    label: 'Private',
-                    value: 'Private',
-                },
-                {
-                    label: 'Portal',
-                    value: 'Portal',
-                },
-            ],
         },
         {
             type: 'readonlyField',
@@ -887,20 +861,6 @@ export const mockEvokeFormWithSections = {
                             display: {
                                 label: 'Multi-Select',
                             },
-                            enumWithLabels: [
-                                {
-                                    label: '1',
-                                    value: '1',
-                                },
-                                {
-                                    label: '2',
-                                    value: '2',
-                                },
-                                {
-                                    label: '3',
-                                    value: '3',
-                                },
-                            ],
                         },
                         {
                             type: 'input',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@evoke-platform/ui-components",
-    "version": "1.10.0-dev.3",
+    "version": "1.10.0-dev.4",
     "description": "",
     "main": "dist/published/index.js",
     "module": "dist/published/index.js",