1761 - make displayConditions respect array indexes

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

Hide file tree

Showing 2 changed files with 50 additions and 43 deletions.
diff --git a/client/src/pages/platform/workflow-editor/components/Properties/Properties.tsx b/client/src/pages/platform/workflow-editor/components/Properties/Properties.tsx
@@ -32,16 +32,12 @@ const Properties = ({
     const {currentComponent} = useWorkflowNodeDetailsPanelStore();
 
     const advancedProperties = properties.filter((property) => {
-        const {advancedOption, displayCondition, hidden, name} = property;
+        const {advancedOption, hidden, name} = property;
 
         if (!name || !advancedOption || hidden) {
             return false;
         }
 
-        if (displayCondition && !currentComponent?.displayConditions?.[displayCondition]) {
-            return false;
-        }
-
         return true;
     });
 
@@ -55,25 +51,17 @@ const Properties = ({
                 className={twMerge('space-y-4', customClassName)}
                 key={`${currentComponent?.workflowNodeName}_${currentComponent?.operationName}_properties`}
             >
-                {simpleProperties.map((property, index) => {
-                    const {displayCondition, name} = property;
-
-                    if (displayCondition && !currentComponent?.displayConditions?.[displayCondition]) {
-                        return <Fragment key={`${name}_${index}`}></Fragment>;
-                    }
-
-                    return (
-                        <Property
-                            control={control}
-                            controlPath={controlPath}
-                            formState={formState}
-                            key={`${currentComponent?.workflowNodeName}_${currentComponent?.operationName}_${name}_${index}`}
-                            operationName={operationName}
-                            path={path}
-                            property={property}
-                        />
-                    );
-                })}
+                {simpleProperties.map((property, index) => (
+                    <Property
+                        control={control}
+                        controlPath={controlPath}
+                        formState={formState}
+                        key={`${currentComponent?.workflowNodeName}_${currentComponent?.operationName}_${property.name}_${index}`}
+                        operationName={operationName}
+                        path={path}
+                        property={property}
+                    />
+                ))}
             </ul>
 
             {!!advancedProperties.length && (
@@ -86,25 +74,17 @@ const Properties = ({
 
                     <CollapsibleContent>
                         <ul className="space-y-4 p-4" key={`${currentComponent?.operationName}_advancedProperties`}>
-                            {advancedProperties.map((property, index) => {
-                                const {displayCondition, name} = property;
-
-                                if (displayCondition && !currentComponent?.displayConditions?.[displayCondition]) {
-                                    return <Fragment key={`${name}_${index}`}></Fragment>;
-                                }
-
-                                return (
-                                    <Property
-                                        control={control}
-                                        controlPath={controlPath}
-                                        formState={formState}
-                                        key={`${name}_${currentComponent?.operationName}_${index}`}
-                                        operationName={operationName}
-                                        path={path}
-                                        property={property}
-                                    />
-                                );
-                            })}
+                            {advancedProperties.map((property, index) => (
+                                <Property
+                                    control={control}
+                                    controlPath={controlPath}
+                                    formState={formState}
+                                    key={`${property.name}_${currentComponent?.operationName}_${index}`}
+                                    operationName={operationName}
+                                    path={path}
+                                    property={property}
+                                />
+                            ))}
                         </ul>
                     </CollapsibleContent>
                 </Collapsible>

diff --git a/client/src/pages/platform/workflow-editor/components/Properties/Property.tsx b/client/src/pages/platform/workflow-editor/components/Properties/Property.tsx
@@ -151,6 +151,8 @@ const Property = ({
         type,
     } = property;
 
+    let {displayCondition} = property;
+
     const formattedOptions = options
         ?.map((option) => {
             if (option.value === '') {
@@ -201,6 +203,24 @@ const Property = ({
             .join('.');
     }
 
+    if (objectName && !path?.includes(objectName)) {
+        path = `${objectName}.${path}`;
+    }
+
+    if (displayCondition) {
+        const displayConditionIndexes: number[] = [];
+        const bracketedNumberRegex = /\[(\d+)\]/g;
+        let match;
+
+        while ((match = bracketedNumberRegex.exec(path!)) !== null) {
+            displayConditionIndexes.push(parseInt(match[1], 10));
+        }
+
+        displayConditionIndexes.forEach((index) => {
+            displayCondition = displayCondition!.replace(`[index]`, `[${index}]`);
+        });
+    }
+
     const getComponentIcon = (mentionValue: string) => {
         let componentName = mentionValue.split('_')[0].replace('${', '');
 
@@ -899,6 +919,10 @@ const Property = ({
         return <></>;
     }
 
+    if (displayCondition && !currentComponent?.displayConditions?.[displayCondition]) {
+        return <></>;
+    }
+
     return (
         <li
             className={twMerge(
@@ -1149,6 +1173,7 @@ const Property = ({
                             name={name}
                             onValueChange={(value) => handleSelectChange(value, name!)}
                             options={options as Array<SelectOptionType>}
+                            required={required}
                             value={selectValue}
                         />
                     )}
@@ -1170,6 +1195,7 @@ const Property = ({
                     {!control && controlType === 'SELECT' && type !== 'BOOLEAN' && (
                         <PropertyComboBox
                             arrayIndex={arrayIndex}
+                            defaultValue={defaultValue}
                             deletePropertyButton={deletePropertyButton}
                             description={description}
                             handleInputTypeSwitchButtonClick={handleInputTypeSwitchButtonClick}
@@ -1207,6 +1233,7 @@ const Property = ({
                                 {label: 'True', value: 'true'},
                                 {label: 'False', value: 'false'},
                             ]}
+                            required={required}
                             showInputTypeSwitchButton={showInputTypeSwitchButton}
                             value={selectValue}
                         />