From 1d367ad51f5c3c223cc3934381c1354878241f88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Tue, 12 May 2026 18:17:03 +0400 Subject: [PATCH] Use distinct badge colors for resource and tracker types MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Map each resource type and tracker type to a specific badge variant instead of only distinguishing scripts from everything else. Drop the manual BadgeVariant type alias in favor of as-const inference. Signed-off-by: Émile Ré --- .../_components/TrackerResourceRow.tsx | 27 ++++++++++--------- .../_components/TrackerPatternRow.tsx | 24 ++++++++--------- 2 files changed, 25 insertions(+), 26 deletions(-) diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx index c1dfba6be..ca292bab3 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx @@ -123,18 +123,18 @@ const updateResourceMutation = graphql` } `; -function resourceTypeLabel(type: string, __: (s: string) => string): string { +function resourceTypeBadge(type: string, __: (s: string) => string) { switch (type) { - case "SCRIPT": return __("Script"); - case "IFRAME": return __("Iframe"); - case "IMAGE": return __("Image"); - case "STYLESHEET": return __("Stylesheet"); - case "FONT": return __("Font"); - case "BEACON": return __("Beacon"); - case "FETCH": return __("Fetch"); - case "MEDIA": return __("Media"); - case "SERVICE_WORKER": return __("Service Worker"); - default: return type; + case "SCRIPT": return { label: __("Script"), variant: "info" as const }; + case "IFRAME": return { label: __("Iframe"), variant: "warning" as const }; + case "IMAGE": return { label: __("Image"), variant: "neutral" as const }; + case "STYLESHEET": return { label: __("Stylesheet"), variant: "highlight" as const }; + case "FONT": return { label: __("Font"), variant: "outline" as const }; + case "BEACON": return { label: __("Beacon"), variant: "danger" as const }; + case "FETCH": return { label: __("Fetch"), variant: "success" as const }; + case "MEDIA": return { label: __("Media"), variant: "neutral" as const }; + case "SERVICE_WORKER": return { label: __("Service Worker"), variant: "warning" as const }; + default: return { label: type, variant: "neutral" as const }; } } @@ -149,6 +149,7 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc const confirm = useConfirm(); const { cookieBannerId } = useParams<{ cookieBannerId: string }>(); const resource = useFragment(trackerResourceFragment, resourceKey); + const typeBadge = resourceTypeBadge(resource.type, __); const [isEditing, setIsEditing] = useState(false); const [categoryQueryRef, loadCategoryQuery] @@ -291,8 +292,8 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc return ( - - {resourceTypeLabel(resource.type, __)} + + {typeBadge.label} diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx index 600a0dfa8..23684eb0a 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx @@ -123,24 +123,22 @@ const updatePatternMutation = graphql` } `; -type BadgeVariant = "success" | "warning" | "danger" | "info" | "neutral" | "outline" | "highlight"; - -function trackerTypeBadge(type: string, __: (s: string) => string): { label: string; variant: BadgeVariant } { +function trackerTypeBadge(type: string, __: (s: string) => string) { switch (type) { - case "COOKIE": return { label: __("Cookie"), variant: "warning" }; - case "LOCAL_STORAGE": return { label: __("localStorage"), variant: "info" }; - case "SESSION_STORAGE": return { label: __("sessionStorage"), variant: "highlight" }; - case "INDEXED_DB": return { label: __("IndexedDB"), variant: "success" }; - case "CACHE_STORAGE": return { label: __("Cache Storage"), variant: "outline" }; - default: return { label: type, variant: "neutral" }; + case "COOKIE": return { label: __("Cookie"), variant: "warning" as const }; + case "LOCAL_STORAGE": return { label: __("localStorage"), variant: "info" as const }; + case "SESSION_STORAGE": return { label: __("sessionStorage"), variant: "highlight" as const }; + case "INDEXED_DB": return { label: __("IndexedDB"), variant: "success" as const }; + case "CACHE_STORAGE": return { label: __("Cache Storage"), variant: "outline" as const }; + default: return { label: type, variant: "neutral" as const }; } } -function sourceBadge(source: string, __: (s: string) => string): { label: string; variant: BadgeVariant } { +function sourceBadge(source: string, __: (s: string) => string) { switch (source) { - case "SCRIPT": return { label: __("Script"), variant: "info" }; - case "PRE_EXISTING": return { label: __("Pre-existing"), variant: "outline" }; - default: return { label: source, variant: "neutral" }; + case "SCRIPT": return { label: __("Script"), variant: "info" as const }; + case "PRE_EXISTING": return { label: __("Pre-existing"), variant: "outline" as const }; + default: return { label: source, variant: "neutral" as const }; } }