Various NodeDetailsPanel bugfixes

client/src/pages/platform/connection/components/ConnectionParameters.tsx

@@ -1,4 +1,5 @@
 import {ConnectionDefinition} from '@/shared/middleware/platform/configuration';
+import {Fragment} from 'react';
 
 const ConnectionParameters = ({
     authorizationParameters,
@@ -54,7 +55,7 @@ const ConnectionParameters = ({
 
                 {hasAuthorizationParameters &&
                     existingAuthorizations.map((authorization) => (
-                        <>
+                        <Fragment key={authorization.name}>
                             <li className="flex">
                                 <span className="w-1/3  font-medium text-muted-foreground">Authorization:</span>
 
@@ -73,7 +74,7 @@ const ConnectionParameters = ({
                                             </pre>
                                         </li>
                                     ))}
-                        </>
+                        </Fragment>
                     ))}
             </ul>
         </div>

client/src/pages/platform/workflow-editor/components/Properties/Property.tsx

@@ -18,6 +18,7 @@ import useWorkflowNodeDetailsPanelStore from '@/pages/platform/workflow-editor/s
 import deleteProperty from '@/pages/platform/workflow-editor/utils/deleteProperty';
 import getInputHTMLType from '@/pages/platform/workflow-editor/utils/getInputHTMLType';
 import saveProperty from '@/pages/platform/workflow-editor/utils/saveProperty';
+import {PATH_SPACE_REPLACEMENT} from '@/shared/constants';
 import {Option} from '@/shared/middleware/platform/configuration';
 import {PropertyAllType} from '@/shared/types';
 import {QuestionMarkCircledIcon} from '@radix-ui/react-icons';
@@ -33,6 +34,7 @@ import {twMerge} from 'tailwind-merge';
 import {useDebouncedCallback} from 'use-debounce';
 
 import useWorkflowEditorStore from '../../stores/useWorkflowEditorStore';
+import replaceSpacesInKeys from '../../utils/replaceSpacesInObjectKeys';
 import ArrayProperty from './ArrayProperty';
 import ObjectProperty from './ObjectProperty';
 
@@ -176,6 +178,10 @@ const Property = ({
         });
     }
 
+    if (path?.includes(' ')) {
+        path = path.replace(/\s/g, PATH_SPACE_REPLACEMENT);
+    }
+
     const getComponentIcon = (mentionValue: string) => {
         let componentName = mentionValue.split('_')[0].replace('${', '');
 
@@ -539,12 +545,14 @@ const Property = ({
                 return;
             }
 
-            const paramValue = resolvePath(parameters, path);
+            const formattedParamaters = replaceSpacesInKeys(parameters);
+
+            const paramValue = resolvePath(formattedParamaters, path);
 
             if (paramValue !== undefined || paramValue !== null) {
                 setPropertyParameterValue(paramValue);
             } else {
-                setPropertyParameterValue(parameters[name]);
+                setPropertyParameterValue(formattedParamaters[name]);
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -656,7 +664,10 @@ const Property = ({
         }
 
         const optionsLookupDependsOnValues = optionsDataSource?.optionsLookupDependsOn.map((optionLookupDependency) =>
-            resolvePath(currentComponent?.parameters, optionLookupDependency)?.toString()
+            resolvePath(
+                currentComponent?.parameters,
+                optionLookupDependency.replace('[index]', `[${arrayIndex}]`)
+            )?.toString()
         );
 
         setLookupDependsOnValues(optionsLookupDependsOnValues);
@@ -669,7 +680,10 @@ const Property = ({
 
         const propertiesLookupDependsOnValues = propertiesDataSource?.propertiesLookupDependsOn.map(
             (propertyLookupDependency) =>
-                resolvePath(currentComponent?.parameters, propertyLookupDependency)?.toString()
+                resolvePath(
+                    currentComponent?.parameters,
+                    propertyLookupDependency.replace('[index]', `[${arrayIndex}]`)
+                )?.toString()
         );
 
         setLookupDependsOnValues(propertiesLookupDependsOnValues);

client/src/pages/platform/workflow-editor/components/Properties/components/PropertyDynamicProperties.tsx

@@ -71,7 +71,10 @@ const PropertyDynamicProperties = ({
                     operationName={currentOperationName}
                     parameterValue={property.name ? parameterValue?.[property.name] : ''}
                     path={path}
-                    property={property}
+                    property={{
+                        ...property,
+                        defaultValue: property.name ? parameterValue?.[property.name] : '',
+                    }}
                 />
             ))}
         </ul>

client/src/pages/platform/workflow-editor/components/WorkflowNodeDetailsPanel.tsx

@@ -6,16 +6,26 @@ import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import Properties from '@/pages/platform/workflow-editor/components/Properties/Properties';
 import DataStreamComponentsTab from '@/pages/platform/workflow-editor/components/node-details-tabs/DataStreamComponentsTab';
 import {
+    ActionDefinitionApi,
     ComponentDefinition,
     ComponentDefinitionBasic,
+    GetComponentActionDefinitionRequest,
+    GetComponentTriggerDefinitionRequest,
+    TriggerDefinitionApi,
     WorkflowConnection,
     WorkflowNodeOutput,
 } from '@/shared/middleware/platform/configuration';
 import {useDeleteWorkflowNodeTestOutputMutation} from '@/shared/mutations/platform/workflowNodeTestOutputs.mutations';
-import {useGetComponentActionDefinitionQuery} from '@/shared/queries/platform/actionDefinitions.queries';
+import {
+    ActionDefinitionKeys,
+    useGetComponentActionDefinitionQuery,
+} from '@/shared/queries/platform/actionDefinitions.queries';
 import {useGetComponentDefinitionQuery} from '@/shared/queries/platform/componentDefinitions.queries';
 import {useGetTaskDispatcherDefinitionQuery} from '@/shared/queries/platform/taskDispatcherDefinitions.queries';
-import {useGetTriggerDefinitionQuery} from '@/shared/queries/platform/triggerDefinitions.queries';
+import {
+    TriggerDefinitionKeys,
+    useGetTriggerDefinitionQuery,
+} from '@/shared/queries/platform/triggerDefinitions.queries';
 import {WorkflowNodeDynamicPropertyKeys} from '@/shared/queries/platform/workflowNodeDynamicProperties.queries';
 import {WorkflowNodeOptionKeys} from '@/shared/queries/platform/workflowNodeOptions.queries';
 import {WorkflowNodeOutputKeys} from '@/shared/queries/platform/workflowNodeOutputs.queries';
@@ -110,7 +120,7 @@ const WorkflowNodeDetailsPanel = ({
 
     const {data: currentActionDefinition, isFetched: currentActionFetched} = useGetComponentActionDefinitionQuery(
         {
-            actionName: currentOperationName,
+            actionName: currentNode?.operationName ?? currentOperationName,
             componentName: currentComponentDefinition?.name as string,
             componentVersion: currentComponentDefinition?.version as number,
         },
@@ -216,7 +226,9 @@ const WorkflowNodeDetailsPanel = ({
 
     const queryClient = useQueryClient();
 
-    const handleOperationSelectChange = (newOperationName: string) => {
+    const handleOperationSelectChange = async (newOperationName: string) => {
+        setCurrentOperationName(newOperationName);
+
         if (!currentComponentDefinition || !currentComponent) {
             return;
         }
@@ -229,17 +241,43 @@ const WorkflowNodeDetailsPanel = ({
             queryKey: WorkflowNodeOptionKeys.workflowNodeOptions,
         });
 
-        const {componentName, notes, title, workflowNodeName} = currentComponent;
+        let operationData;
+
+        if (currentNode?.trigger) {
+            const triggerDefinitionRequest: GetComponentTriggerDefinitionRequest = {
+                componentName: currentComponentDefinition?.name,
+                componentVersion: currentComponentDefinition?.version,
+                triggerName: newOperationName,
+            };
+
+            operationData = await queryClient.fetchQuery({
+                queryFn: () => new TriggerDefinitionApi().getComponentTriggerDefinition(triggerDefinitionRequest),
+                queryKey: TriggerDefinitionKeys.triggerDefinition(triggerDefinitionRequest),
+            });
+        } else {
+            const componentActionDefinitionRequest: GetComponentActionDefinitionRequest = {
+                actionName: newOperationName,
+                componentName: currentComponentDefinition.name,
+                componentVersion: currentComponentDefinition.version,
+            };
+
+            operationData = await queryClient.fetchQuery({
+                queryFn: () => new ActionDefinitionApi().getComponentActionDefinition(componentActionDefinitionRequest),
+                queryKey: ActionDefinitionKeys.actionDefinition(componentActionDefinitionRequest),
+            });
+        }
+
+        const {componentName, description, label, workflowNodeName} = currentComponent;
 
         saveWorkflowDefinition({
             nodeData: {
                 componentName,
-                description: notes,
-                label: title,
+                description,
+                label,
                 name: workflowNodeName || currentNode?.name || '',
                 operationName: newOperationName,
                 parameters: getParametersWithDefaultValues({
-                    properties: currentOperationProperties as Array<PropertyAllType>,
+                    properties: operationData.properties as Array<PropertyAllType>,
                 }),
                 trigger: currentNode?.trigger,
                 type: `${componentName}/v${currentComponentDefinition.version}/${newOperationName}`,
@@ -253,10 +291,9 @@ const WorkflowNodeDetailsPanel = ({
                     parameters: getParametersWithDefaultValues({
                         properties: currentOperationProperties as Array<PropertyAllType>,
                     }),
+                    type: `${componentName}/v${currentComponentDefinition.version}/${newOperationName}`,
                 });
 
-                setCurrentOperationName(newOperationName);
-
                 const formattedComponentActions = componentActions.map((componentAction) => {
                     if (componentAction.workflowNodeName === currentNode?.name) {
                         return {
@@ -403,6 +440,7 @@ const WorkflowNodeDetailsPanel = ({
             setCurrentNode({
                 ...currentNode,
                 operationName: currentOperationName,
+                type: `${currentComponent?.componentName}/v${currentComponentDefinition?.version}/${currentOperationName}`,
             });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -422,13 +460,6 @@ const WorkflowNodeDetailsPanel = ({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [componentActions, currentNode?.name]);
 
-    useEffect(() => {
-        if (!currentOperationName || !matchingOperation?.name) {
-            setCurrentOperationName(currentNode?.operationName || currentComponentDefinition?.actions?.[0]?.name || '');
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [currentNode?.name, matchingOperation?.name]);
-
     const currentTaskData = currentComponentDefinition || currentTaskDispatcherDefinition;
     const currentOperationFetcher = currentActionFetched || currentTriggerFetched;
 

client/src/pages/platform/workflow-editor/components/WorkflowNodesPopoverMenuOperationList.tsx

@@ -110,9 +110,9 @@ const WorkflowNodesPopoverMenuOperationList = ({
 
                     setCurrentComponent({
                         componentName: newTriggerNodeData.componentName,
-                        notes: newTriggerNodeData.description,
+                        description: newTriggerNodeData.description,
+                        label: newTriggerNodeData.label,
                         operationName: newTriggerNodeData.operationName,
-                        title: newTriggerNodeData.label,
                         type: newTriggerNodeData.type,
                         workflowNodeName: newTriggerNodeData.workflowNodeName ?? 'trigger_1',
                     });

client/src/pages/platform/workflow-editor/components/node-details-tabs/DescriptionTab.tsx

@@ -3,7 +3,7 @@ import {Label} from '@/components/ui/label';
 import {Textarea} from '@/components/ui/textarea';
 import useWorkflowDataStore from '@/pages/platform/workflow-editor/stores/useWorkflowDataStore';
 import useWorkflowNodeDetailsPanelStore from '@/pages/platform/workflow-editor/stores/useWorkflowNodeDetailsPanelStore';
-import {NodeDataType, UpdateWorkflowMutationType} from '@/shared/types';
+import {ComponentType, UpdateWorkflowMutationType} from '@/shared/types';
 import {useQueryClient} from '@tanstack/react-query';
 import {ChangeEvent} from 'react';
 import {useDebouncedCallback} from 'use-debounce';
@@ -16,16 +16,9 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
 
     const queryClient = useQueryClient();
 
-    const componentData: NodeDataType = {
-        componentName: currentComponent!.componentName!,
-        description: currentComponent?.notes,
-        icon: currentNode?.icon,
-        label: currentComponent?.title,
-        name: currentNode!.workflowNodeName!,
-        operationName: currentComponent?.operationName,
-        trigger: !!currentNode?.trigger,
-        type: currentComponent?.type,
-        workflowNodeName: currentNode?.workflowNodeName,
+    const componentData: ComponentType = {
+        ...currentComponent!,
+        workflowNodeName: currentNode!.workflowNodeName,
     };
 
     const handleLabelChange = useDebouncedCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -34,11 +27,12 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
         }
 
         saveWorkflowDefinition({
-            nodeData: {...componentData, label: event.target.value},
+            decorative: true,
+            nodeData: {...currentComponent!, label: event.target.value, name: currentComponent.workflowNodeName},
             onSuccess: () =>
                 setCurrentComponent({
                     ...currentComponent,
-                    title: event.target.value,
+                    label: event.target.value,
                 }),
             queryClient,
             updateWorkflowMutation,
@@ -52,11 +46,12 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
         }
 
         saveWorkflowDefinition({
-            nodeData: {...componentData, description: event.target.value},
+            decorative: true,
+            nodeData: {...componentData, description: event.target.value, name: currentComponent.workflowNodeName},
             onSuccess: () =>
                 setCurrentComponent({
                     ...currentComponent,
-                    notes: event.target.value,
+                    description: event.target.value,
                 }),
             queryClient,
             updateWorkflowMutation,
@@ -70,7 +65,7 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
                 <Label>Title</Label>
 
                 <Input
-                    defaultValue={currentComponent?.title}
+                    defaultValue={currentComponent?.label}
                     key={`${currentComponent?.componentName}_nodeTitle`}
                     name="nodeTitle"
                     onChange={handleLabelChange}
@@ -82,7 +77,7 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
 
                 <Textarea
                     className="mt-1"
-                    defaultValue={currentComponent?.notes || ''}
+                    defaultValue={currentComponent?.description || ''}
                     key={`${currentComponent?.componentName}_nodeNotes`}
                     name="nodeNotes"
                     onChange={handleNotesChange}

client/src/pages/platform/workflow-editor/hooks/useNodeClick.ts

@@ -26,12 +26,12 @@ export default function useNodeClick(data: NodeProps['data'], id: NodeProps['id'
         if (data.type) {
             setCurrentComponent({
                 componentName: data.componentName,
+                description: data.description,
                 displayConditions: data.displayConditions,
+                label: data.label,
                 metadata: data.metadata,
-                notes: data.description,
                 operationName: data.operationName,
                 parameters: data.parameters,
-                title: data.label,
                 type: data.type,
                 workflowNodeName: data.name,
             });

client/src/pages/platform/workflow-editor/utils/replaceSpacesInObjectKeys.ts

@@ -0,0 +1,21 @@
+import {PATH_SPACE_REPLACEMENT} from '@/shared/constants';
+
+export default function replaceSpacesInKeys(parameters: {[key: string]: unknown}): {
+    [key: string]: unknown;
+} {
+    Object.keys(parameters).forEach((key) => {
+        if (key.includes(' ')) {
+            const newKey = key.replace(/\s/g, PATH_SPACE_REPLACEMENT);
+
+            parameters[newKey] = parameters[key];
+
+            delete parameters[key];
+        }
+
+        if (typeof parameters[key] === 'object' && parameters[key] !== null) {
+            replaceSpacesInKeys(parameters[key] as {[key: string]: unknown});
+        }
+    });
+
+    return parameters;
+}

client/src/pages/platform/workflow-editor/utils/saveProperty.ts

@@ -1,3 +1,4 @@
+import {PATH_SPACE_REPLACEMENT} from '@/shared/constants';
 import {
     UpdateWorkflowNodeParameter200Response,
     UpdateWorkflowNodeParameterOperationRequest,
@@ -36,6 +37,10 @@ export default function saveProperty({
 }: SavePropertyProps) {
     const {workflowNodeName} = currentComponent;
 
+    if (path.includes(PATH_SPACE_REPLACEMENT)) {
+        path = path.replace(new RegExp(PATH_SPACE_REPLACEMENT, 'g'), ' ');
+    }
+
     updateWorkflowNodeParameterMutation.mutate(
         {
             id: workflowId,