diff --git a/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx b/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx index c480b935411..47f53a93984 100644 --- a/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx +++ b/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx @@ -18,20 +18,16 @@ interface ArrayPropertyProps { property: PropertyAllType; } -type ValuePropertyControlType = keyof typeof VALUE_PROPERTY_CONTROL_TYPES; - const initialAvailablePropertyTypes = Object.keys(VALUE_PROPERTY_CONTROL_TYPES).map((type) => ({ - label: type as ValuePropertyControlType, - value: type as ValuePropertyControlType, + label: type as string, + value: type as string, })); const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { const [arrayItems, setArrayItems] = useState>>([]); const [availablePropertyTypes, setAvailablePropertyTypes] = - useState>( - initialAvailablePropertyTypes - ); - const [newPropertyType, setNewPropertyType] = useState(); + useState>(initialAvailablePropertyTypes); + const [newPropertyType, setNewPropertyType] = useState(); const {currentComponent} = useWorkflowNodeDetailsPanelStore(); @@ -44,18 +40,24 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { return; } + const controlType: ControlType = matchingItem + ? (matchingItem.controlType as ControlType) + : newPropertyType && newPropertyType in VALUE_PROPERTY_CONTROL_TYPES + ? (VALUE_PROPERTY_CONTROL_TYPES[ + newPropertyType as keyof typeof VALUE_PROPERTY_CONTROL_TYPES + ] as ControlType) + : ('STRING' as ControlType); + const newItem = { ...matchingItem, - controlType: matchingItem - ? matchingItem?.controlType - : (VALUE_PROPERTY_CONTROL_TYPES[newPropertyType!] as ControlType), + controlType, custom: true, expressionEnabled: true, key: getRandomId(), label: `Item ${arrayItems.length.toString()}`, name: `${name}__${arrayItems.length.toString()}`, path: `${path}[${arrayItems.length.toString()}]`, - type: matchingItem?.type || newPropertyType || 'STRING', + type: (matchingItem?.type as PropertyType) || (newPropertyType as PropertyType) || 'STRING', }; setArrayItems([...arrayItems, newItem]); @@ -75,16 +77,28 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { // get available property types from items and additional properties useEffect(() => { - let propertyTypes: Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}> = []; + let propertyTypes: Array<{label: string; value: string}> = []; + + const hasDuplicateTypes = items?.some( + (item, index) => items.findIndex((otherItem) => otherItem.type === item.type) !== index + ); const processItems = (items: Array) => - items.reduce((types: Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}>, item) => { + items.reduce((types: Array<{label: string; value: string}>, item) => { if (item.type) { - types.push({ - label: item.type as ValuePropertyControlType, - value: item.type as ValuePropertyControlType, - }); + if (currentComponent?.componentName === 'condition' && hasDuplicateTypes) { + types.push({ + label: item.label ?? item.type, + value: `${item.type}_${item.label}`, + }); + } else { + types.push({ + label: item.type, + value: item.type, + }); + } } + return types; }, []); @@ -116,6 +130,12 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { } }, [availablePropertyTypes]); + useEffect(() => { + if (currentComponent?.componentName === 'condition' && availablePropertyTypes.length) { + setNewPropertyType(availablePropertyTypes[0].value); + } + }, [currentComponent?.componentName, availablePropertyTypes]); + // render individual array items with data gathered from parameters useEffect(() => { if ( @@ -169,11 +189,16 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { parameterItemType = 'ARRAY'; } + const controlType: ControlType = + parameterItemType && parameterItemType in VALUE_PROPERTY_CONTROL_TYPES + ? (VALUE_PROPERTY_CONTROL_TYPES[ + parameterItemType as keyof typeof VALUE_PROPERTY_CONTROL_TYPES + ] as ControlType) + : ('STRING' as ControlType); + const newSubProperty = { arrayName: name, - controlType: VALUE_PROPERTY_CONTROL_TYPES[ - parameterItemType as ValuePropertyControlType - ] as ControlType, + controlType, custom: true, defaultValue: parameterItemValue, expressionEnabled: true, @@ -236,6 +261,12 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + if (property.items?.length) { + setArrayItems(property.items); + } + }, [property.items]); + return (
    @@ -272,6 +303,7 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => { @@ -136,7 +136,7 @@ const PropertySelect = ({ ) : ( - + {option.label} ) diff --git a/client/src/pages/platform/workflow-editor/components/Properties/components/SubPropertyPopover.tsx b/client/src/pages/platform/workflow-editor/components/Properties/components/SubPropertyPopover.tsx index 29ba8810627..c9843b125a5 100644 --- a/client/src/pages/platform/workflow-editor/components/Properties/components/SubPropertyPopover.tsx +++ b/client/src/pages/platform/workflow-editor/components/Properties/components/SubPropertyPopover.tsx @@ -11,9 +11,10 @@ import PropertySelect from './PropertySelect'; interface SubPropertyPopoverProps { array?: boolean; availablePropertyTypes: Array<{label: string; value: string}>; + condition?: boolean; handleClick: () => void; newPropertyName?: string; - newPropertyType: keyof typeof VALUE_PROPERTY_CONTROL_TYPES; + newPropertyType: keyof typeof VALUE_PROPERTY_CONTROL_TYPES | string; setNewPropertyName?: (value: string) => void; setNewPropertyType: (value: keyof typeof VALUE_PROPERTY_CONTROL_TYPES) => void; } @@ -21,6 +22,7 @@ interface SubPropertyPopoverProps { const SubPropertyPopover = ({ array, availablePropertyTypes, + condition, handleClick, newPropertyName, newPropertyType, @@ -77,29 +79,44 @@ const SubPropertyPopover = ({ /> )} - {availablePropertyTypes?.length > 1 ? ( + {condition && availablePropertyTypes?.length > 1 && ( setNewPropertyType(value as keyof typeof VALUE_PROPERTY_CONTROL_TYPES) } options={availablePropertyTypes.map((property) => ({ - label: property.value!, - value: property.value!, + label: property.label!, + value: property.label!, }))} value={newPropertyType} /> - ) : ( -
    - Type - - {availablePropertyTypes[0] && ( - - {availablePropertyTypes[0].value} - - )} -
    )} + + {!condition && + (availablePropertyTypes?.length > 1 ? ( + + setNewPropertyType(value as keyof typeof VALUE_PROPERTY_CONTROL_TYPES) + } + options={availablePropertyTypes.map((property) => ({ + label: property.label!, + value: property.value!, + }))} + value={newPropertyType} + /> + ) : ( +
    + Type + + {availablePropertyTypes[0] && ( + + {availablePropertyTypes[0].value} + + )} +
    + ))}