From 67be461aa74cdca7729ea21a648048c5fe102c9f Mon Sep 17 00:00:00 2001
From: Kirill Chernakov <yakiryous@gmail.com>
Date: Tue, 7 Jan 2025 16:07:16 +0400
Subject: [PATCH] fix: update look of the special nodes so it's more intuitive

---
 keep-ui/app/(keep)/workflows/builder/CustomNode.tsx | 12 ++++++++++++
 keep-ui/utils/hooks/useWorkflowInitialization.ts    | 10 ++++++++--
 keep-ui/utils/reactFlow.ts                          |  4 ++--
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx b/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx
index ee872cb83..6b76ea96a 100644
--- a/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx
+++ b/keep-ui/app/(keep)/workflows/builder/CustomNode.tsx
@@ -74,6 +74,18 @@ function CustomNode({ id, data }: FlowNode) {
     setSelectedNode(id);
   }
 
+  if (data.id === "trigger_start" || data.id === "trigger_end") {
+    return (
+      <div className="w-full h-full flex items-center justify-center">
+        <span className="rounded-full bg-orange-50 border border-orange-500 px-4 py-2 flex items-center justify-center">
+          {data.name}
+        </span>
+        <Handle type="target" position={Position.Top} className="w-32" />
+        <Handle type="source" position={Position.Bottom} className="w-32" />
+      </div>
+    );
+  }
+
   return (
     <>
       {!specialNodeCheck && (
diff --git a/keep-ui/utils/hooks/useWorkflowInitialization.ts b/keep-ui/utils/hooks/useWorkflowInitialization.ts
index c460ee782..015751f48 100644
--- a/keep-ui/utils/hooks/useWorkflowInitialization.ts
+++ b/keep-ui/utils/hooks/useWorkflowInitialization.ts
@@ -36,8 +36,14 @@ const getLayoutedElements = (
       ?.replace("condition-", "")
       ?.replace("__end", "");
 
-    const width = ["start", "end"].includes(type) ? 80 : 280;
-    const height = 80;
+    let width = ["start", "end"].includes(type) ? 80 : 280;
+    let height = 80;
+
+    // Special case for trigger start and end nodes, which act as section headers
+    if (node.id === "trigger_start" || node.id === "trigger_end") {
+      width = 150;
+      height = 40;
+    }
 
     dagreGraph.setNode(node.id, { width, height });
   });
diff --git a/keep-ui/utils/reactFlow.ts b/keep-ui/utils/reactFlow.ts
index f177c1e98..64dbbb695 100644
--- a/keep-ui/utils/reactFlow.ts
+++ b/keep-ui/utils/reactFlow.ts
@@ -607,7 +607,7 @@ export function getTriggerStep(properties: V2Properties) {
   return [
     {
       id: "trigger_start",
-      name: "Trigger Start",
+      name: "Triggers",
       type: "trigger",
       componentType: "trigger",
       edgeTarget: triggerStartTargets,
@@ -617,7 +617,7 @@ export function getTriggerStep(properties: V2Properties) {
     ...steps,
     {
       id: "trigger_end",
-      name: "Workflow start",
+      name: "Workflow steps",
       type: "",
       componentType: "trigger",
       cantDelete: true,