From d3debf4ded64bc731902145daf89802c75e9d3b8 Mon Sep 17 00:00:00 2001
From: Pratham-Mishra04 <pratham@getmaxim.ai>
Date: Tue, 21 Jul 2026 10:02:35 +0530
Subject: [PATCH]  fix: sort webhook events and drop event badge colors

---
 .../webhooks/views/webhookDetailsSheet.tsx          | 13 +++----------
 ui/app/workspace/webhooks/views/webhooksView.tsx    |  6 +++---
 ui/lib/types/webhooks.ts                            |  7 -------
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/ui/app/workspace/webhooks/views/webhookDetailsSheet.tsx b/ui/app/workspace/webhooks/views/webhookDetailsSheet.tsx
index d9764b5834c..00753cfea72 100644
--- a/ui/app/workspace/webhooks/views/webhookDetailsSheet.tsx
+++ b/ui/app/workspace/webhooks/views/webhookDetailsSheet.tsx
@@ -6,14 +6,7 @@ import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useCopyToClipboard } from "@/hooks/useCopyToClipboard";
 import { getErrorMessage, useGetWebhookDeliveriesQuery, useRedeliverWebhookDeliveryMutation } from "@/lib/store";
-import {
-	WEBHOOK_EVENT_COLORS,
-	WEBHOOK_TUNING_DEFAULTS,
-	WebhookDelivery,
-	WebhookDeliveryOutcome,
-	WebhookEndpoint,
-	WebhookEvent,
-} from "@/lib/types/webhooks";
+import { WEBHOOK_TUNING_DEFAULTS, WebhookDelivery, WebhookDeliveryOutcome, WebhookEndpoint, WebhookEvent } from "@/lib/types/webhooks";
 import { format, formatDistanceToNow } from "date-fns";
 import { ChevronDown, ChevronLeft, ChevronRight, Info, Loader2, RefreshCcw, Send } from "lucide-react";
 import { Fragment, useEffect, useMemo, useState } from "react";
@@ -227,7 +220,7 @@ export function WebhookDetailsSheet({ endpoint, isTesting, canManage, onTest, on
 							value={
 								<div className="flex flex-wrap gap-1">
 									{endpoint?.events.map((event) => (
-										<Badge key={event} variant="outline" className={`font-mono text-xs ${WEBHOOK_EVENT_COLORS[event]}`}>
+										<Badge key={event} variant="outline" className="font-mono text-xs">
 											{event}
 										</Badge>
 									))}
@@ -401,7 +394,7 @@ export function WebhookDetailsSheet({ endpoint, isTesting, canManage, onTest, on
 													)}
 												</TableCell>
 												<TableCell className="whitespace-nowrap">
-													<Badge variant="outline" className={`font-mono text-xs ${WEBHOOK_EVENT_COLORS[latest.event]}`}>
+													<Badge variant="outline" className="font-mono text-xs">
 														{latest.event}
 													</Badge>
 												</TableCell>
diff --git a/ui/app/workspace/webhooks/views/webhooksView.tsx b/ui/app/workspace/webhooks/views/webhooksView.tsx
index 85faba842bc..a67572ec6d1 100644
--- a/ui/app/workspace/webhooks/views/webhooksView.tsx
+++ b/ui/app/workspace/webhooks/views/webhooksView.tsx
@@ -23,7 +23,7 @@ import {
 	useTestWebhookEndpointMutation,
 	useUpdateWebhookEndpointMutation,
 } from "@/lib/store";
-import { WEBHOOK_EVENT_COLORS, WEBHOOK_EVENTS, WebhookEndpoint, WebhookEndpointRequest, WebhookEvent } from "@/lib/types/webhooks";
+import { WEBHOOK_EVENTS, WebhookEndpoint, WebhookEndpointRequest, WebhookEvent } from "@/lib/types/webhooks";
 import { useDebouncedValue } from "@/hooks/useDebounce";
 import { RbacOperation, RbacResource, useRbac } from "@enterprise/lib";
 import { ChevronLeft, ChevronRight, MoreHorizontal, PencilIcon, Plus, RotateCcw, Trash2 } from "lucide-react";
@@ -381,8 +381,8 @@ export default function WebhooksView() {
 											</TableCell>
 											<TableCell>
 												<div className="flex flex-wrap gap-1">
-													{endpoint.events.map((event) => (
-														<Badge key={event} variant="outline" className={`font-mono text-xs ${WEBHOOK_EVENT_COLORS[event]}`}>
+													{[...endpoint.events].sort().map((event) => (
+														<Badge key={event} variant="outline" className="font-mono text-xs">
 															{event}
 														</Badge>
 													))}
diff --git a/ui/lib/types/webhooks.ts b/ui/lib/types/webhooks.ts
index 6a00e938792..c09cdad5f93 100644
--- a/ui/lib/types/webhooks.ts
+++ b/ui/lib/types/webhooks.ts
@@ -117,13 +117,6 @@ export interface RedeliverWebhookResponse {
 	webhook_id: string;
 }
 
-// Soft tints for event badges, matching the delivery-outcome color language
-// (green = completed/delivered, red = failed).
-export const WEBHOOK_EVENT_COLORS: Record<WebhookEvent, string> = {
-	"async_job.completed": "bg-green-100 text-green-800",
-	"async_job.failed": "bg-red-100 text-red-800",
-};
-
 // Delivery worker defaults, shown as placeholders for unset (0) knobs.
 export const WEBHOOK_TUNING_DEFAULTS = {
 	max_retries: 4,