From b78e8165eaeab382ed845e12f5e83c8985bccbab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Mon, 18 Nov 2024 11:59:23 +0100
Subject: [PATCH 1/2] 1715 - introduce a condition flag for the
 SubPropertyPopover because it has TYPE overlaps

---
 .../components/Properties/ArrayProperty.tsx   | 33 ++++++++++++--
 .../Properties/components/PropertySelect.tsx  |  4 +-
 .../components/SubPropertyPopover.tsx         | 43 +++++++++++++------
 3 files changed, 61 insertions(+), 19 deletions(-)

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..8d978216d01 100644
--- a/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
+++ b/client/src/pages/platform/workflow-editor/components/Properties/ArrayProperty.tsx
@@ -77,14 +77,26 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => {
     useEffect(() => {
         let propertyTypes: Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}> = [];
 
+        const hasDuplicateTypes = items?.some(
+            (item, index) => items.findIndex((otherItem) => otherItem.type === item.type) !== index
+        );
+
         const processItems = (items: Array<PropertyAllType>) =>
             items.reduce((types: Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}>, 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,
+                            value: `${item.type}_${item.label}`,
+                        });
+                    } else {
+                        types.push({
+                            label: item.type as ValuePropertyControlType,
+                            value: item.type as ValuePropertyControlType,
+                        });
+                    }
                 }
+
                 return types;
             }, []);
 
@@ -116,6 +128,12 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => {
         }
     }, [availablePropertyTypes]);
 
+    useEffect(() => {
+        if (currentComponent?.componentName === 'condition' && availablePropertyTypes.length) {
+            setNewPropertyType(availablePropertyTypes[0].label);
+        }
+    }, [currentComponent?.componentName, availablePropertyTypes]);
+
     // render individual array items with data gathered from parameters
     useEffect(() => {
         if (
@@ -236,6 +254,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 (
         <Fragment key={`${path}_${name}_arrayProperty`}>
             <ul className="ml-2 flex flex-col space-y-4 border-l">
@@ -272,6 +296,7 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => {
                 <SubPropertyPopover
                     array
                     availablePropertyTypes={availablePropertyTypes}
+                    condition={currentComponent?.componentName === 'condition'}
                     handleClick={handleAddItemClick}
                     key={`${path}_${name}_subPropertyPopoverButton`}
                     newPropertyType={newPropertyType}
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx b/client/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx
index 378343b362a..ee873d20723 100644
--- a/client/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx
+++ b/client/src/pages/platform/workflow-editor/components/Properties/components/PropertySelect.tsx
@@ -113,7 +113,7 @@ const PropertySelect = ({
                                         'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
                                         option.value === value && 'px-2'
                                     )}
-                                    key={option.value}
+                                    key={`${option.value}_${option.label}`}
                                     value={option.value}
                                 >
                                     <span className="absolute right-2 flex size-3.5 items-center justify-center">
@@ -136,7 +136,7 @@ const PropertySelect = ({
                                     </div>
                                 </Item>
                             ) : (
-                                <SelectItem key={option.value} value={option.value}>
+                                <SelectItem key={`${option.value}_${option.label}`} value={option.value}>
                                     {option.label}
                                 </SelectItem>
                             )
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..8337dad7bcc 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,6 +11,7 @@ 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;
@@ -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 && (
                         <PropertySelect
                             label="Type"
                             onValueChange={(value) =>
                                 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}
                         />
-                    ) : (
-                        <div className="flex w-full items-center gap-2 text-sm">
-                            <span className="font-medium">Type</span>
-
-                            {availablePropertyTypes[0] && (
-                                <span className="inline-flex w-full rounded-md bg-white">
-                                    {availablePropertyTypes[0].value}
-                                </span>
-                            )}
-                        </div>
                     )}
+
+                    {!condition &&
+                        (availablePropertyTypes?.length > 1 ? (
+                            <PropertySelect
+                                label="Type"
+                                onValueChange={(value) =>
+                                    setNewPropertyType(value as keyof typeof VALUE_PROPERTY_CONTROL_TYPES)
+                                }
+                                options={availablePropertyTypes.map((property) => ({
+                                    label: property.label!,
+                                    value: property.value!,
+                                }))}
+                                value={newPropertyType}
+                            />
+                        ) : (
+                            <div className="flex w-full items-center gap-2 text-sm">
+                                <span className="font-medium">Type</span>
+
+                                {availablePropertyTypes[0] && (
+                                    <span className="inline-flex w-full rounded-md bg-white">
+                                        {availablePropertyTypes[0].value}
+                                    </span>
+                                )}
+                            </div>
+                        ))}
                 </main>
 
                 <footer className="flex items-center justify-end space-x-2">

From c3fbcb2ec02511c901b62ebe211848857973e161 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kre=C5=A1imir=20=C4=8Coko?= <kresimircoko@gmail.com>
Date: Mon, 18 Nov 2024 12:53:10 +0100
Subject: [PATCH 2/2] 1715 - use label instead of type for SubPropertyPopover
 and adjust types

---
 .../components/Properties/ArrayProperty.tsx   | 49 +++++++++++--------
 .../components/SubPropertyPopover.tsx         |  2 +-
 2 files changed, 29 insertions(+), 22 deletions(-)

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 8d978216d01..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<Array<ArrayPropertyType | Array<ArrayPropertyType>>>([]);
     const [availablePropertyTypes, setAvailablePropertyTypes] =
-        useState<Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}>>(
-            initialAvailablePropertyTypes
-        );
-    const [newPropertyType, setNewPropertyType] = useState<ValuePropertyControlType>();
+        useState<Array<{label: string; value: string}>>(initialAvailablePropertyTypes);
+    const [newPropertyType, setNewPropertyType] = useState<string>();
 
     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,24 +77,24 @@ 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<PropertyAllType>) =>
-            items.reduce((types: Array<{label: ValuePropertyControlType; value: ValuePropertyControlType}>, item) => {
+            items.reduce((types: Array<{label: string; value: string}>, item) => {
                 if (item.type) {
                     if (currentComponent?.componentName === 'condition' && hasDuplicateTypes) {
                         types.push({
-                            label: item.label,
+                            label: item.label ?? item.type,
                             value: `${item.type}_${item.label}`,
                         });
                     } else {
                         types.push({
-                            label: item.type as ValuePropertyControlType,
-                            value: item.type as ValuePropertyControlType,
+                            label: item.type,
+                            value: item.type,
                         });
                     }
                 }
@@ -130,7 +132,7 @@ const ArrayProperty = ({onDeleteClick, path, property}: ArrayPropertyProps) => {
 
     useEffect(() => {
         if (currentComponent?.componentName === 'condition' && availablePropertyTypes.length) {
-            setNewPropertyType(availablePropertyTypes[0].label);
+            setNewPropertyType(availablePropertyTypes[0].value);
         }
     }, [currentComponent?.componentName, availablePropertyTypes]);
 
@@ -187,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,
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 8337dad7bcc..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
@@ -14,7 +14,7 @@ interface SubPropertyPopoverProps {
     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;
 }