rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use distinct badge colors for resource and tracker types

Browse Source 
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é <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-05-12 18:17:03 +04:00
parent d4c8137933
commit 1d367ad51f
2 changed files with 25 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
apps/console/src/pages/organizations/cookie-banners/configuration/resources/_components/TrackerResourceRow.tsx
View File

@@ -123,18 +123,18 @@ const updateResourceMutation = graphql`
} }
`; `;
function resourceTypeLabel(type: string, __: (s: string) => string): string { function resourceTypeBadge(type: string, __: (s: string) => string) {
switch (type) { switch (type) {
case "SCRIPT": return __("Script"); case "SCRIPT": return { label: __("Script"), variant: "info" as const };
case "IFRAME": return __("Iframe"); case "IFRAME": return { label: __("Iframe"), variant: "warning" as const };
case "IMAGE": return __("Image"); case "IMAGE": return { label: __("Image"), variant: "neutral" as const };
case "STYLESHEET": return __("Stylesheet"); case "STYLESHEET": return { label: __("Stylesheet"), variant: "highlight" as const };
case "FONT": return __("Font"); case "FONT": return { label: __("Font"), variant: "outline" as const };
case "BEACON": return __("Beacon"); case "BEACON": return { label: __("Beacon"), variant: "danger" as const };
case "FETCH": return __("Fetch"); case "FETCH": return { label: __("Fetch"), variant: "success" as const };
case "MEDIA": return __("Media"); case "MEDIA": return { label: __("Media"), variant: "neutral" as const };
case "SERVICE_WORKER": return __("Service Worker"); case "SERVICE_WORKER": return { label: __("Service Worker"), variant: "warning" as const };
default: return type; default: return { label: type, variant: "neutral" as const };
} }
} }
@@ -149,6 +149,7 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc
const confirm = useConfirm(); const confirm = useConfirm();
const { cookieBannerId } = useParams<{ cookieBannerId: string }>(); const { cookieBannerId } = useParams<{ cookieBannerId: string }>();
const resource = useFragment(trackerResourceFragment, resourceKey); const resource = useFragment(trackerResourceFragment, resourceKey);
const typeBadge = resourceTypeBadge(resource.type, __);
const [isEditing, setIsEditing] = useState(false); const [isEditing, setIsEditing] = useState(false);
const [categoryQueryRef, loadCategoryQuery] const [categoryQueryRef, loadCategoryQuery]
@@ -291,8 +292,8 @@ export function TrackerResourceRow({ resourceKey, connectionId }: TrackerResourc
return ( return (
<Tr className={resource.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}> <Tr className={resource.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
<Td> <Td>
<Badge variant={resource.type === "SCRIPT" ? "info" : "neutral"}> <Badge variant={typeBadge.variant}>
{resourceTypeLabel(resource.type, __)} {typeBadge.label}
</Badge> </Badge>
</Td> </Td>
<Td> <Td>

24
apps/console/src/pages/organizations/cookie-banners/configuration/trackers/_components/TrackerPatternRow.tsx
View File

@@ -123,24 +123,22 @@ const updatePatternMutation = graphql`
} }
`; `;
type BadgeVariant = "success" | "warning" | "danger" | "info" | "neutral" | "outline" | "highlight"; function trackerTypeBadge(type: string, __: (s: string) => string) {
function trackerTypeBadge(type: string, __: (s: string) => string): { label: string; variant: BadgeVariant } {
switch (type) { switch (type) {
case "COOKIE": return { label: __("Cookie"), variant: "warning" }; case "COOKIE": return { label: __("Cookie"), variant: "warning" as const };
case "LOCAL_STORAGE": return { label: __("localStorage"), variant: "info" }; case "LOCAL_STORAGE": return { label: __("localStorage"), variant: "info" as const };
case "SESSION_STORAGE": return { label: __("sessionStorage"), variant: "highlight" }; case "SESSION_STORAGE": return { label: __("sessionStorage"), variant: "highlight" as const };
case "INDEXED_DB": return { label: __("IndexedDB"), variant: "success" }; case "INDEXED_DB": return { label: __("IndexedDB"), variant: "success" as const };
case "CACHE_STORAGE": return { label: __("Cache Storage"), variant: "outline" }; case "CACHE_STORAGE": return { label: __("Cache Storage"), variant: "outline" as const };
default: return { label: type, variant: "neutral" }; 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) { switch (source) {
case "SCRIPT": return { label: __("Script"), variant: "info" }; case "SCRIPT": return { label: __("Script"), variant: "info" as const };
case "PRE_EXISTING": return { label: __("Pre-existing"), variant: "outline" }; case "PRE_EXISTING": return { label: __("Pre-existing"), variant: "outline" as const };
default: return { label: source, variant: "neutral" }; default: return { label: source, variant: "neutral" as const };
} }
} }