1859 & 1853 - Bugfixes

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

@@ -2,6 +2,7 @@ import {DEFAULT_SCHEMA} from '@/components/JsonSchemaBuilder/utils/constants';
 import {SchemaRecordType} from '@/components/JsonSchemaBuilder/utils/types';
 import RequiredMark from '@/components/RequiredMark';
 import {Label} from '@/components/ui/label';
+import {Skeleton} from '@/components/ui/skeleton';
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip';
 import InputTypeSwitchButton from '@/pages/platform/workflow-editor/components/Properties/components/InputTypeSwitchButton';
 import PropertyCodeEditor from '@/pages/platform/workflow-editor/components/Properties/components/PropertyCodeEditor/PropertyCodeEditor';
@@ -22,6 +23,7 @@ import deleteProperty from '@/pages/platform/workflow-editor/utils/deletePropert
 import getInputHTMLType from '@/pages/platform/workflow-editor/utils/getInputHTMLType';
 import saveProperty from '@/pages/platform/workflow-editor/utils/saveProperty';
 import {Option} from '@/shared/middleware/platform/configuration';
+import {useGetWorkflowNodeParameterDisplayConditionsQuery} from '@/shared/queries/platform/workflowNodeParameters.queries';
 import {ArrayPropertyType, PropertyAllType} from '@/shared/types';
 import {QuestionMarkCircledIcon} from '@radix-ui/react-icons';
 import {TooltipPortal} from '@radix-ui/react-tooltip';
@@ -116,6 +118,15 @@ const Property = ({
     const {showPropertyCodeEditorSheet, showPropertyJsonSchemaBuilder, showWorkflowCodeEditorSheet} =
         useWorkflowEditorStore();
 
+    const {isFetching: isFetchingDisplayConditions} = useGetWorkflowNodeParameterDisplayConditionsQuery(
+        {
+            id: workflow.id!,
+            // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+            workflowNodeName: currentNode?.workflowNodeName!,
+        },
+        !!currentNode?.workflowNodeName
+    );
+
     const previousOperationName = usePrevious(currentNode?.operationName);
 
     const defaultValue = property.defaultValue !== undefined ? property.defaultValue : '';
@@ -729,6 +740,16 @@ const Property = ({
         return <></>;
     }
 
+    if (displayCondition && currentComponent?.displayConditions?.[displayCondition] && isFetchingDisplayConditions) {
+        return (
+            <div className="flex flex-col gap-y-2">
+                <Skeleton className="h-6 w-1/4" />
+
+                <Skeleton className="h-10 w-full" />
+            </div>
+        );
+    }
+
     return (
         <li
             className={twMerge(

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

@@ -43,7 +43,7 @@ import useWorkflowNodeDetailsPanelStore from '../stores/useWorkflowNodeDetailsPa
 import getDataPillsFromProperties from '../utils/getDataPillsFromProperties';
 import getParametersWithDefaultValues from '../utils/getParametersWithDefaultValues';
 import saveWorkflowDefinition from '../utils/saveWorkflowDefinition';
-import updateConditionSubtask from '../utils/updateRootConditionNode';
+import updateRootConditionNode from '../utils/updateRootConditionNode';
 import CurrentOperationSelect from './CurrentOperationSelect';
 import ConnectionTab from './node-details-tabs/ConnectionTab';
 import DescriptionTab from './node-details-tabs/DescriptionTab';
@@ -317,7 +317,7 @@ const WorkflowNodeDetailsPanel = ({
                         return;
                     }
 
-                    nodeData = updateConditionSubtask({
+                    nodeData = updateRootConditionNode({
                         conditionCase,
                         conditionId: currentNode.conditionData.conditionId,
                         nodeIndex: taskIndex,
@@ -356,6 +356,11 @@ const WorkflowNodeDetailsPanel = ({
         useWorkflowNodeDetailsPanelStore.getState().reset();
     };
 
+    const nodeDefinition = currentComponentDefinition || currentTaskDispatcherDefinition || currentTriggerDefinition;
+
+    const currentTaskDataOperations =
+        (currentTaskData as ComponentDefinition)?.actions ?? (currentTaskData as ComponentDefinition)?.triggers;
+
     // Set currentOperationProperties depending if the current node is a trigger or an action
     useEffect(() => {
         if (currentNodeDefinition?.properties) {
@@ -528,33 +533,31 @@ const WorkflowNodeDetailsPanel = ({
                 </header>
 
                 <main className="flex h-full flex-col">
-                    {operationDataMissing && (
+                    {!!currentTaskDataOperations?.length && operationDataMissing && (
                         <div className="flex flex-col border-b border-muted p-4">
                             <span className="text-sm leading-6">Actions</span>
 
                             <Skeleton className="h-9 w-full" />
                         </div>
                     )}
 
-                    {(!!(currentTaskData as ComponentDefinition).actions?.length ||
-                        !!(currentTaskData as ComponentDefinition).triggers?.length) &&
-                        !operationDataMissing && (
-                            <CurrentOperationSelect
-                                description={
-                                    currentNode?.trigger
-                                        ? currentTriggerDefinition?.description
-                                        : currentActionDefinition?.description
-                                }
-                                handleValueChange={handleOperationSelectChange}
-                                operations={
-                                    (currentNode?.trigger
-                                        ? currentComponentDefinition?.triggers
-                                        : currentComponentDefinition?.actions)!
-                                }
-                                triggerSelect={currentNode?.trigger}
-                                value={currentOperationName}
-                            />
-                        )}
+                    {currentTaskDataOperations && !operationDataMissing && (
+                        <CurrentOperationSelect
+                            description={
+                                currentNode?.trigger
+                                    ? currentTriggerDefinition?.description
+                                    : currentActionDefinition?.description
+                            }
+                            handleValueChange={handleOperationSelectChange}
+                            operations={
+                                (currentNode?.trigger
+                                    ? currentComponentDefinition?.triggers
+                                    : currentComponentDefinition?.actions)!
+                            }
+                            triggerSelect={currentNode?.trigger}
+                            value={currentOperationName}
+                        />
+                    )}
 
                     {tabDataExists && (
                         <div className="flex justify-center">
@@ -590,12 +593,28 @@ const WorkflowNodeDetailsPanel = ({
                     <div className="relative h-full overflow-y-scroll">
                         {currentTaskData && (
                             <div className="absolute left-0 top-0 size-full">
-                                {activeTab === 'description' && (
-                                    <DescriptionTab
-                                        key={`${currentNode?.workflowNodeName}_description`}
-                                        updateWorkflowMutation={updateWorkflowMutation}
-                                    />
-                                )}
+                                {activeTab === 'description' &&
+                                    (nodeDefinition ? (
+                                        <DescriptionTab
+                                            key={`${currentNode?.workflowNodeName}_description`}
+                                            nodeDefinition={nodeDefinition}
+                                            updateWorkflowMutation={updateWorkflowMutation}
+                                        />
+                                    ) : (
+                                        <div className="flex flex-col gap-y-4 p-4">
+                                            <div className="flex flex-col gap-y-2">
+                                                <Skeleton className="h-6 w-1/4" />
+
+                                                <Skeleton className="h-8 w-full" />
+                                            </div>
+
+                                            <div className="flex flex-col gap-y-2">
+                                                <Skeleton className="h-6 w-1/4" />
+
+                                                <Skeleton className="h-24 w-full" />
+                                            </div>
+                                        </div>
+                                    ))}
 
                                 {activeTab === 'dataStreamComponents' && <DataStreamComponentsTab />}
 

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

@@ -3,56 +3,165 @@ 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 {ComponentType, UpdateWorkflowMutationType} from '@/shared/types';
+import {WorkflowTask} from '@/shared/middleware/automation/configuration';
+import {
+    ComponentDefinition,
+    TaskDispatcherDefinition,
+    TriggerDefinition,
+} from '@/shared/middleware/platform/configuration';
+import {NodeDataType, UpdateWorkflowMutationType} from '@/shared/types';
 import {useQueryClient} from '@tanstack/react-query';
 import {ChangeEvent} from 'react';
 import {useDebouncedCallback} from 'use-debounce';
 
 import saveWorkflowDefinition from '../../utils/saveWorkflowDefinition';
+import updateRootConditionNode from '../../utils/updateRootConditionNode';
 
-const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: UpdateWorkflowMutationType}) => {
-    const {workflow} = useWorkflowDataStore();
-    const {currentComponent, currentNode, setCurrentComponent} = useWorkflowNodeDetailsPanelStore();
+const DescriptionTab = ({
+    nodeDefinition,
+    updateWorkflowMutation,
+}: {
+    nodeDefinition: ComponentDefinition | TaskDispatcherDefinition | TriggerDefinition;
+    updateWorkflowMutation: UpdateWorkflowMutationType;
+}) => {
+    const {nodes, workflow} = useWorkflowDataStore();
+    const {currentComponent, currentNode, setCurrentComponent, setCurrentNode} = useWorkflowNodeDetailsPanelStore();
 
     const queryClient = useQueryClient();
 
-    const componentData: ComponentType = {
-        ...currentComponent!,
-        workflowNodeName: currentNode!.workflowNodeName,
+    const updateNodeData = (value: string, field: 'label' | 'description'): NodeDataType | undefined => {
+        if (!currentNode) {
+            return;
+        }
+
+        let nodeData = {
+            ...currentNode!,
+            [field]: value,
+            name: currentNode.workflowNodeName,
+        };
+
+        if (currentNode.conditionData) {
+            const parentConditionNode = nodes.find(
+                (node) => node.data.name === currentNode?.conditionData?.conditionId
+            );
+
+            if (!parentConditionNode) {
+                return;
+            }
+
+            const conditionCase = currentNode.conditionData.conditionCase;
+            const conditionParameters: Array<WorkflowTask> = parentConditionNode.data.parameters[conditionCase];
+
+            if (conditionParameters) {
+                const taskIndex = conditionParameters.findIndex((subtask) => subtask.name === currentNode.name);
+
+                if (taskIndex !== -1) {
+                    conditionParameters[taskIndex] = {
+                        ...conditionParameters[taskIndex],
+                        [field]: value,
+                    };
+
+                    if (!workflow.definition) {
+                        return;
+                    }
+
+                    const tasks = JSON.parse(workflow.definition).tasks;
+
+                    const updatedParentConditionTask = workflow.tasks?.find(
+                        (task) => task.name === currentNode.conditionData?.conditionId
+                    );
+
+                    if (!updatedParentConditionTask) {
+                        return;
+                    }
+
+                    nodeData = updateRootConditionNode({
+                        conditionCase,
+                        conditionId: currentNode.conditionData.conditionId,
+                        nodeIndex: taskIndex,
+                        nodes,
+                        tasks,
+                        updatedParentConditionNodeData: parentConditionNode.data,
+                        updatedParentConditionTask,
+                        workflow,
+                    });
+                }
+            }
+        }
+
+        return nodeData;
     };
 
     const handleLabelChange = useDebouncedCallback((event: ChangeEvent<HTMLInputElement>) => {
-        if (!currentComponent || !currentNode) {
+        if (!currentNode) {
             return;
         }
 
+        let nodeData: NodeDataType = {
+            ...currentNode,
+            label: event.target.value,
+            name: currentNode.workflowNodeName,
+            version: 'version' in nodeDefinition ? nodeDefinition.version : 1,
+        };
+
+        if (currentNode.conditionData) {
+            nodeData = updateNodeData(event.target.value, 'label') ?? nodeData;
+        }
+
         saveWorkflowDefinition({
             decorative: true,
-            nodeData: {...currentComponent!, label: event.target.value, name: currentComponent.workflowNodeName},
-            onSuccess: () =>
+            nodeData,
+            onSuccess: () => {
                 setCurrentComponent({
                     ...currentComponent,
+                    componentName: currentNode.componentName,
+                    label: event.target.value,
+                    workflowNodeName: currentNode.workflowNodeName,
+                });
+
+                setCurrentNode({
+                    ...currentNode,
                     label: event.target.value,
-                }),
+                });
+            },
             queryClient,
             updateWorkflowMutation,
             workflow,
         });
     }, 200);
 
     const handleNotesChange = useDebouncedCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
-        if (!currentComponent || !currentNode) {
+        if (!currentNode) {
             return;
         }
 
+        let nodeData: NodeDataType = {
+            ...currentNode,
+            description: event.target.value,
+            name: currentNode.workflowNodeName,
+            version: 'version' in nodeDefinition ? nodeDefinition.version : 1,
+        };
+
+        if (currentNode.conditionData) {
+            nodeData = updateNodeData(event.target.value, 'description') ?? nodeData;
+        }
+
         saveWorkflowDefinition({
             decorative: true,
-            nodeData: {...componentData, description: event.target.value, name: currentComponent.workflowNodeName},
-            onSuccess: () =>
+            nodeData,
+            onSuccess: () => {
                 setCurrentComponent({
                     ...currentComponent,
+                    componentName: currentNode.componentName,
+                    description: event.target.value,
+                    workflowNodeName: currentNode.workflowNodeName,
+                });
+
+                setCurrentNode({
+                    ...currentNode,
                     description: event.target.value,
-                }),
+                });
+            },
             queryClient,
             updateWorkflowMutation,
             workflow,
@@ -65,8 +174,8 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
                 <Label>Title</Label>
 
                 <Input
-                    defaultValue={currentComponent?.label}
-                    key={`${currentComponent?.componentName}_nodeTitle`}
+                    defaultValue={currentNode?.label}
+                    key={`${currentNode?.componentName}_nodeTitle`}
                     name="nodeTitle"
                     onChange={handleLabelChange}
                 />
@@ -76,8 +185,8 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
                 <Label>Notes</Label>
 
                 <Textarea
-                    defaultValue={currentComponent?.description || ''}
-                    key={`${currentComponent?.componentName}_nodeNotes`}
+                    defaultValue={currentNode?.description || ''}
+                    key={`${currentNode?.componentName}_nodeNotes`}
                     name="nodeNotes"
                     onChange={handleNotesChange}
                     placeholder="Write some notes for yourself..."