1761 - fix default values of custom object properties

bytechefhq · Dec 6, 2024 · 7c0b2b9 · 7c0b2b9
1 parent cf2a8e3
commit 7c0b2b9
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 20 deletions.
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx b/client/src/pages/platform/workflow-editor/components/Properties/ObjectProperty.tsx
@@ -7,6 +7,9 @@ import resolvePath from 'object-resolve-path';
 import {Fragment, useEffect, useState} from 'react';
 import {twMerge} from 'tailwind-merge';
 
+import {useWorkflowNodeParameterMutation} from '../../providers/workflowNodeParameterMutationProvider';
+import useWorkflowDataStore from '../../stores/useWorkflowDataStore';
+import saveProperty from '../../utils/saveProperty';
 import Property from './Property';
 import DeletePropertyButton from './components/DeletePropertyButton';
 import SubPropertyPopover from './components/SubPropertyPopover';
@@ -27,7 +30,10 @@ const ObjectProperty = ({arrayIndex, arrayName, onDeleteClick, operationName, pa
         (property.additionalProperties?.[0]?.type as keyof typeof VALUE_PROPERTY_CONTROL_TYPES) || 'STRING'
     );
 
-    const {currentComponent} = useWorkflowNodeDetailsPanelStore();
+    const {currentComponent, setCurrentComponent} = useWorkflowNodeDetailsPanelStore();
+    const {workflow} = useWorkflowDataStore();
+
+    const {updateWorkflowNodeParameterMutation} = useWorkflowNodeParameterMutation();
 
     const {additionalProperties, label, name, properties} = property;
 
@@ -174,6 +180,38 @@ const ObjectProperty = ({arrayIndex, arrayName, onDeleteClick, operationName, pa
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [properties]);
 
+    // set default values for subProperties when they are created
+    useEffect(() => {
+        if (!subProperties || !path || !currentComponent || !updateWorkflowNodeParameterMutation || !workflow.id) {
+            return;
+        }
+
+        const existingObject = resolvePath(currentComponent.parameters, path);
+
+        if (existingObject && isObject(existingObject)) {
+            return;
+        }
+
+        const defaultValueObject = subProperties.reduce<Record<string, unknown>>((acc, subProperty) => {
+            if (subProperty.name) {
+                acc[subProperty.name] = subProperty.defaultValue;
+            }
+
+            return acc;
+        }, {});
+
+        saveProperty({
+            currentComponent,
+            path,
+            setCurrentComponent,
+            type: 'OBJECT',
+            updateWorkflowNodeParameterMutation,
+            value: defaultValueObject,
+            workflowId: workflow.id,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subProperties]);
+
     return (
         <Fragment key={name}>
             <ul
@@ -205,10 +243,7 @@ const ObjectProperty = ({arrayIndex, arrayName, onDeleteClick, operationName, pa
                         objectName={arrayName ? '' : name}
                         operationName={operationName}
                         path={`${path}.${subProperty.name}`}
-                        property={{
-                            ...subProperty,
-                            name: subProperty.name,
-                        }}
+                        property={subProperty}
                     />
                 ))}
             </ul>

diff --git a/client/src/pages/platform/workflow-editor/components/Properties/Property.tsx b/client/src/pages/platform/workflow-editor/components/Properties/Property.tsx
@@ -65,8 +65,8 @@ interface PropertyProps {
     control?: Control<any, any>;
     controlPath?: string;
     customClassName?: string;
-    formState?: FormState<FieldValues>;
     deletePropertyButton?: ReactNode;
+    formState?: FormState<FieldValues>;
     objectName?: string;
     operationName?: string;
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -101,7 +101,9 @@ const Property = ({
     );
     const [numericValue, setNumericValue] = useState(property.defaultValue || '');
     const [propertyParameterValue, setPropertyParameterValue] = useState(parameterValue || property.defaultValue || '');
-    const [selectValue, setSelectValue] = useState(property.defaultValue || '' || 'null');
+    const [selectValue, setSelectValue] = useState(
+        property.defaultValue !== undefined ? property.defaultValue : 'null'
+    );
     const [showInputTypeSwitchButton, setShowInputTypeSwitchButton] = useState(
         (property.type !== 'STRING' && property.expressionEnabled) || false
     );
@@ -125,7 +127,7 @@ const Property = ({
     const previousOperationName = usePrevious(currentNode?.operationName);
     const previousMentionInputValue = usePrevious(mentionInputValue);
 
-    const defaultValue = property.defaultValue || '';
+    const defaultValue = property.defaultValue !== undefined ? property.defaultValue : '';
 
     const {
         controlType,
@@ -778,7 +780,7 @@ const Property = ({
 
     // reset all values when currentNode.operationName changes
     useEffect(() => {
-        const parameterDefaultValue = property.defaultValue ?? '';
+        const parameterDefaultValue = property.defaultValue !== undefined ? property.defaultValue : '';
 
         if (previousOperationName) {
             setPropertyParameterValue(parameterDefaultValue);
@@ -836,6 +838,7 @@ const Property = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mentionInputValue]);
 
+    // handle NULL type property saving
     useEffect(() => {
         if (
             type === 'NULL' &&
@@ -844,16 +847,22 @@ const Property = ({
             path &&
             updateWorkflowNodeParameterMutation
         ) {
-            saveProperty({
-                currentComponent,
-                includeInMetadata: custom,
-                path,
-                setCurrentComponent,
-                type,
-                updateWorkflowNodeParameterMutation,
-                value: null,
-                workflowId: workflow.id!,
-            });
+            const saveDefaultValue = () => {
+                saveProperty({
+                    currentComponent,
+                    includeInMetadata: custom,
+                    path,
+                    setCurrentComponent,
+                    type,
+                    updateWorkflowNodeParameterMutation,
+                    value: null,
+                    workflowId: workflow.id!,
+                });
+            };
+
+            const timeoutId = setTimeout(saveDefaultValue, 200);
+
+            return () => clearTimeout(timeoutId);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [propertyParameterValue]);

diff --git a/.../src/pages/platform/workflow-editor/components/Properties/components/PropertyComboBox.tsx b/.../src/pages/platform/workflow-editor/components/Properties/components/PropertyComboBox.tsx
@@ -27,6 +27,7 @@ type ComboBoxItemType = {
 
 interface PropertyComboBoxProps {
     arrayIndex?: number;
+    defaultValue?: string;
     deletePropertyButton?: ReactNode;
     description?: string;
     handleInputTypeSwitchButtonClick?: () => void;
@@ -50,6 +51,7 @@ interface PropertyComboBoxProps {
 
 const PropertyComboBox = ({
     arrayIndex,
+    defaultValue,
     deletePropertyButton,
     description,
     handleInputTypeSwitchButtonClick,
@@ -114,6 +116,10 @@ const PropertyComboBox = ({
         }));
     }
 
+    if (defaultValue && !value) {
+        value = defaultValue;
+    }
+
     const currentOption = (options as Array<ComboBoxItemType>)?.find((option) => option.value === value);
 
     const missingConnection = !options.length && currentNode?.connections?.length && !currentNode.connectionId;

diff --git a/...nt/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx b/...nt/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx
@@ -78,7 +78,7 @@ const PropertySelect = ({
         )}
 
         {options.length ? (
-            <Select defaultValue={defaultValue} name={name} onValueChange={onValueChange} value={value}>
+            <Select defaultValue={defaultValue} name={name} onValueChange={onValueChange} value={value || defaultValue}>
                 <SelectTrigger aria-label="Select" className={twMerge(leadingIcon && 'relative', 'pl-4')}>
                     <>
                         {leadingIcon ? (