1859 - DescriptionTab improvements - handling for Condition and its children

Author: kresimir-coko

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

@@ -30,13 +30,7 @@ import {
 import {WorkflowNodeDynamicPropertyKeys} from '@/shared/queries/platform/workflowNodeDynamicProperties.queries';
 import {WorkflowNodeOptionKeys} from '@/shared/queries/platform/workflowNodeOptions.queries';
 import {useGetWorkflowTestConfigurationConnectionsQuery} from '@/shared/queries/platform/workflowTestConfigurations.queries';
-import {
-    ComponentPropertiesType,
-    DataPillType,
-    NodeDataType,
-    PropertyAllType,
-    UpdateWorkflowMutationType,
-} from '@/shared/types';
+import {ComponentPropertiesType, NodeDataType, PropertyAllType, UpdateWorkflowMutationType} from '@/shared/types';
 import {Cross2Icon, InfoCircledIcon} from '@radix-ui/react-icons';
 import {TooltipPortal} from '@radix-ui/react-tooltip';
 import {useQueryClient} from '@tanstack/react-query';
@@ -362,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) {
@@ -534,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">
@@ -596,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

@@ -4,34 +4,40 @@ 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 {WorkflowTask} from '@/shared/middleware/automation/configuration';
-import {ComponentType, NodeDataType, UpdateWorkflowMutationType} from '@/shared/types';
+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 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 (!currentComponent || !currentNode) {
+        if (!currentNode) {
             return;
         }
 
         let nodeData = {
-            ...currentComponent!,
+            ...currentNode!,
             [field]: value,
-            name: currentComponent.workflowNodeName,
+            name: currentNode.workflowNodeName,
         };
 
         if (currentNode.conditionData) {
@@ -79,8 +85,6 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
                         updatedParentConditionTask,
                         workflow,
                     });
-
-                    console.log('nodeData', nodeData);
                 }
             }
         }
@@ -89,28 +93,30 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
     };
 
     const handleLabelChange = useDebouncedCallback((event: ChangeEvent<HTMLInputElement>) => {
-        if (!currentComponent || !currentNode) {
+        if (!currentNode) {
             return;
         }
 
         let nodeData: NodeDataType = {
-            ...currentComponent!,
+            ...currentNode,
             label: event.target.value,
-            name: currentComponent.workflowNodeName,
+            name: currentNode.workflowNodeName,
+            version: 'version' in nodeDefinition ? nodeDefinition.version : 1,
         };
 
         if (currentNode.conditionData) {
             nodeData = updateNodeData(event.target.value, 'label') ?? nodeData;
         }
 
-        console.log('currentNode before save: ', currentNode);
         saveWorkflowDefinition({
             decorative: true,
             nodeData,
             onSuccess: () => {
                 setCurrentComponent({
                     ...currentComponent,
+                    componentName: currentNode.componentName,
                     label: event.target.value,
+                    workflowNodeName: currentNode.workflowNodeName,
                 });
 
                 setCurrentNode({
@@ -125,14 +131,15 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
     }, 200);
 
     const handleNotesChange = useDebouncedCallback((event: ChangeEvent<HTMLTextAreaElement>) => {
-        if (!currentComponent || !currentNode) {
+        if (!currentNode) {
             return;
         }
 
         let nodeData: NodeDataType = {
-            ...componentData,
+            ...currentNode,
             description: event.target.value,
-            name: currentComponent.workflowNodeName,
+            name: currentNode.workflowNodeName,
+            version: 'version' in nodeDefinition ? nodeDefinition.version : 1,
         };
 
         if (currentNode.conditionData) {
@@ -145,7 +152,9 @@ const DescriptionTab = ({updateWorkflowMutation}: {updateWorkflowMutation: Updat
             onSuccess: () => {
                 setCurrentComponent({
                     ...currentComponent,
+                    componentName: currentNode.componentName,
                     description: event.target.value,
+                    workflowNodeName: currentNode.workflowNodeName,
                 });
 
                 setCurrentNode({
@@ -165,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}
                 />
@@ -176,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..."