infrastructure/plunk
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: standardize step type labels and update visual styles in workflow components

Browse Source
This commit is contained in:
Dries Augustyns
2026-04-24 10:17:10 +02:00
parent c8190b953f
commit bdc9b30ef2
2 changed files with 41 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/WorkflowBuilder.tsx
+23 -12
View File
@@ -58,6 +58,17 @@ interface WorkflowBuilderProps {
onUpdate: () => void; onUpdate: () => void;
} }
const STEP_TYPE_LABELS: Record<string, string> = {
TRIGGER: 'Trigger',
SEND_EMAIL: 'Send Email',
DELAY: 'Delay',
WAIT_FOR_EVENT: 'Wait for Event',
CONDITION: 'Condition',
EXIT: 'Exit',
WEBHOOK: 'Webhook',
UPDATE_CONTACT: 'Update Contact',
};
const STEP_TYPE_ICONS = { const STEP_TYPE_ICONS = {
TRIGGER: GitBranch, TRIGGER: GitBranch,
SEND_EMAIL: Mail, SEND_EMAIL: Mail,
@@ -327,7 +338,7 @@ function CustomNode({
color, color,
}} }}
> >
{data.type} {STEP_TYPE_LABELS[data.type] ?? data.type}
</span> </span>
</div> </div>
</div> </div>
@@ -564,7 +575,7 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
source: step.id, source: step.id,
target: transition.toStepId, target: transition.toStepId,
type: 'smoothstep', type: 'smoothstep',
animated: step.type === 'DELAY' || step.type === 'WAIT_FOR_EVENT', animated: false,
label: isConditional ? branchLabel : undefined, label: isConditional ? branchLabel : undefined,
labelStyle: { labelStyle: {
fill: isConditional ? branchColor : '#64748b', fill: isConditional ? branchColor : '#64748b',
@@ -578,14 +589,14 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
labelBgBorderRadius: 4, labelBgBorderRadius: 4,
style: { style: {
stroke: isConditional ? branchColor : '#94a3b8', stroke: '#94a3b8',
strokeWidth: 2.5, strokeWidth: 2,
}, },
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: isConditional ? branchColor : '#94a3b8', color: '#94a3b8',
width: 22, width: 20,
height: 22, height: 20,
}, },
}); });
}); });
@@ -621,8 +632,8 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
labelBgStyle: {fill: '#fff', fillOpacity: 0.95}, labelBgStyle: {fill: '#fff', fillOpacity: 0.95},
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
labelBgBorderRadius: 4, labelBgBorderRadius: 4,
style: {stroke: color, strokeWidth: 2.5, strokeDasharray: '5,5'}, style: {stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5'},
markerEnd: {type: MarkerType.ArrowClosed, color, width: 22, height: 22}, markerEnd: {type: MarkerType.ArrowClosed, color: '#94a3b8', width: 20, height: 20},
}); });
} }
}); });
@@ -632,10 +643,10 @@ export function WorkflowBuilder({workflowId, steps, onUpdate}: WorkflowBuilderPr
id: `${step.id}-add-edge`, id: `${step.id}-add-edge`,
source: step.id, source: step.id,
target: `${step.id}-add`, target: `${step.id}-add`,
type: 'straight', type: 'smoothstep',
animated: false, animated: false,
style: {stroke: '#94a3b8', strokeWidth: 2.5, strokeDasharray: '5,5'}, style: {stroke: '#94a3b8', strokeWidth: 2, strokeDasharray: '5,5'},
markerEnd: {type: MarkerType.ArrowClosed, color: '#94a3b8', width: 22, height: 22}, markerEnd: {type: MarkerType.ArrowClosed, color: '#94a3b8', width: 20, height: 20},
}); });
} }
} }
apps/web/src/components/WorkflowVisualizer.tsx
+18 -7
View File
@@ -36,6 +36,17 @@ interface WorkflowVisualizerProps {
})[]; })[];
} }
const STEP_TYPE_LABELS: Record<string, string> = {
TRIGGER: 'Trigger',
SEND_EMAIL: 'Send Email',
DELAY: 'Delay',
WAIT_FOR_EVENT: 'Wait for Event',
CONDITION: 'Condition',
EXIT: 'Exit',
WEBHOOK: 'Webhook',
UPDATE_CONTACT: 'Update Contact',
};
const STEP_TYPE_ICONS = { const STEP_TYPE_ICONS = {
TRIGGER: GitBranch, TRIGGER: GitBranch,
SEND_EMAIL: Mail, SEND_EMAIL: Mail,
@@ -167,7 +178,7 @@ function CustomNode({
color, color,
}} }}
> >
{data.type} {STEP_TYPE_LABELS[data.type] ?? data.type}
</span> </span>
</div> </div>
</div> </div>
@@ -347,12 +358,12 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
labelBgBorderRadius: 4, labelBgBorderRadius: 4,
style: { style: {
stroke: isConditional ? (branch === 'yes' ? '#16a34a' : '#dc2626') : '#94a3b8', stroke: '#94a3b8',
strokeWidth: 2, strokeWidth: 2,
}, },
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: isConditional ? (branch === 'yes' ? '#16a34a' : '#dc2626') : '#94a3b8', color: '#94a3b8',
width: 20, width: 20,
height: 20, height: 20,
}, },
@@ -390,13 +401,13 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
labelBgBorderRadius: 4, labelBgBorderRadius: 4,
style: { style: {
stroke: '#16a34a', stroke: '#94a3b8',
strokeWidth: 2, strokeWidth: 2,
strokeDasharray: '5,5', strokeDasharray: '5,5',
}, },
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: '#16a34a', color: '#94a3b8',
width: 20, width: 20,
height: 20, height: 20,
}, },
@@ -423,13 +434,13 @@ export function WorkflowVisualizer({steps}: WorkflowVisualizerProps) {
labelBgPadding: [8, 4] as [number, number], labelBgPadding: [8, 4] as [number, number],
labelBgBorderRadius: 4, labelBgBorderRadius: 4,
style: { style: {
stroke: '#dc2626', stroke: '#94a3b8',
strokeWidth: 2, strokeWidth: 2,
strokeDasharray: '5,5', strokeDasharray: '5,5',
}, },
markerEnd: { markerEnd: {
type: MarkerType.ArrowClosed, type: MarkerType.ArrowClosed,
color: '#dc2626', color: '#94a3b8',
width: 20, width: 20,
height: 20, height: 20,
}, },