@gadmin2n/schematics 0.0.144 → 0.0.146

package/dist/lib/application/files/gadmin2-game-angle-demo/web/src/routes/workflow/components/ExecutionStatusNode.tsx

@@ -8,7 +8,6 @@ import { Handle, Position, type NodeProps } from '@xyflow/react';
 import React, { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { LookupPort, RuntimePorts } from '../utils/resolveLookupPorts';
-import { NodeTypeBadge } from './NodeTypeBadge';
 
 const CATEGORY_COLORS: Record<string, { bg: string; border: string }> = {
   TRIGGER: { bg: '#e6f7ff', border: '#91caff' },
@@ -24,6 +23,7 @@ const STATUS_COLORS: Record<string, string> = {
   COMPLETED: '#f6ffed', // light green
   RUNNING: '#e6f7ff', // light blue
   FAILED: '#fff1f0', // light red
+  CANCELLED: '#f5f5f5', // neutral gray
   PENDING: '#fffbe6', // light yellow
   NOT_EXECUTED: '#fafafa', // gray
 };
@@ -44,8 +44,10 @@ export interface ExecutionStatusNodeData {
     | 'RUNNING'
     | 'COMPLETED'
     | 'FAILED'
+    | 'CANCELLED'
     | 'NOT_EXECUTED';
   duration?: string; // e.g., "2.5s"
+  executionStatusLabel?: string;
   error?: string;
   [key: string]: unknown;
 }
@@ -73,6 +75,8 @@ function getStatusIcon(status?: string) {
       return <LoadingOutlined style={{ color: '#1677ff', fontSize: 16 }} />;
     case 'FAILED':
       return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: 16 }} />;
+    case 'CANCELLED':
+      return <CloseCircleOutlined style={{ color: '#8c8c8c', fontSize: 16 }} />;
     case 'NOT_EXECUTED':
       return <ClockCircleOutlined style={{ color: '#bfbfbf', fontSize: 16 }} />;
     case 'PENDING':
@@ -86,6 +90,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
   const nodeData = data as ExecutionStatusNodeData;
   const colors = CATEGORY_COLORS[nodeData.category] || CATEGORY_COLORS.ACTION;
   const isNotExecuted = nodeData.executionStatus === 'NOT_EXECUTED';
+  const isCancelled = nodeData.executionStatus === 'CANCELLED';
   const lookupPorts = nodeData.lookupPorts ?? [];
   const lookupInputs = lookupPorts.filter((port) => port.direction === 'input');
   const lookupOutputs = lookupPorts.filter(
@@ -96,6 +101,10 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
     inputLabel: 'IN',
     outputLabel: 'OUT',
   };
+  const outputs = (nodeData.outputs ?? []) as string[];
+  const switchMinWidth =
+    nodeData.type === 'switch' ? Math.max(190, outputs.length * 88) : undefined;
+  const acceptsInput = !nodeData.type?.endsWith('_trigger');
   const outputLabel = (id: string) => {
     if (nodeData.outputLabels?.[id]) return nodeData.outputLabels[id];
     if (nodeData.type === 'approval' || nodeData.type === 'human_approval') {
@@ -114,7 +123,9 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
     ? '#1677ff'
     : isNotExecuted
       ? '#d9d9d9'
-      : colors.border;
+      : isCancelled
+        ? '#bfbfbf'
+        : colors.border;
   const borderStyle = nodeData.isSelected
     ? '2px solid'
     : isNotExecuted
@@ -131,21 +142,23 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
         fontSize: 13,
         minWidth: lookupPorts.length
           ? 280
-          : runtimePorts.emphasized
-            ? 190
-            : 140,
+          : switchMinWidth
+            ? switchMinWidth
+            : runtimePorts.emphasized
+              ? 190
+              : 140,
         textAlign: 'center',
         opacity: isNotExecuted ? 0.6 : 1,
         boxShadow: nodeData.isSelected
           ? '0 0 0 2px rgba(22,119,255,0.2)'
-          : !isNotExecuted && nodeData.executionStatus
+          : !isNotExecuted && !isCancelled && nodeData.executionStatus
             ? '0 2px 8px rgba(0,0,0,0.15)'
             : undefined,
         position: 'relative',
         transition: 'all 0.2s ease',
       }}
     >
-      {!nodeData.readonly && (
+      {acceptsInput && !nodeData.readonly && (
         <Handle
           id={runtimePorts.inputId}
           type="target"
@@ -159,7 +172,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
           }}
         />
       )}
-      {nodeData.readonly && (
+      {acceptsInput && nodeData.readonly && (
         <Handle
           id={runtimePorts.inputId}
           type="target"
@@ -250,7 +263,6 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
         </div>
       )}
 
-      <NodeTypeBadge type={nodeData.type} borderColor={borderColor} />
       <div style={{ fontWeight: 500, marginBottom: nodeData.duration ? 4 : 0 }}>
         {nodeData.label}
       </div>
@@ -279,9 +291,11 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
               fontWeight: 500,
             }}
           >
-            {nodeData.executionStatus === 'COMPLETED' && 'Completed'}
+            {nodeData.executionStatus === 'COMPLETED' &&
+              (nodeData.executionStatusLabel || 'Completed')}
             {nodeData.executionStatus === 'RUNNING' && 'Running...'}
             {nodeData.executionStatus === 'FAILED' && 'Failed'}
+            {nodeData.executionStatus === 'CANCELLED' && 'Cancelled'}
             {nodeData.executionStatus === 'PENDING' && 'Pending'}
           </div>
         )}
@@ -302,7 +316,6 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
               border: '2px solid #555',
               cursor: 'crosshair',
             };
-        const outputs = (nodeData.outputs ?? []) as string[];
         const multiOut = outputs.length > 1;
         if (multiOut) {
           return (
@@ -346,7 +359,7 @@ export const ExecutionStatusNode = memo(({ data }: NodeProps) => {
         }
         return (
           <Handle
-            id={runtimePorts.outputId}
+            id={outputs[0] ?? runtimePorts.outputId}
             type="source"
             position={Position.Bottom}
             style={handleStyle}