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) {
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 (
<Tr className={resource.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
<Td>
<Badge variant={resource.type === "SCRIPT" ? "info" : "neutral"}>
{resourceTypeLabel(resource.type, __)}
<Badge variant={typeBadge.variant}>
{typeBadge.label}
</Badge>
</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): { 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 };
}
}