Expose HTTP cookie source through the console API

The coredata CookieSource enum and the ingestion path both support an
HTTP source, but the GraphQL CookieSource enum never declared it. The
generated marshaler is a plain map lookup with no fallback, so an HTTP
value missed the map and serialized to an empty string. The console UI
treats that empty string as falsy and rendered no source badge at all,
making HTTP-sourced trackers look sourceless.

Add the HTTP member to the GraphQL enum so the value round-trips, and
fold the duplicated tracker-type and tracker-source badge helpers from
three components into a shared @probo/helpers module, adding an explicit
HTTP label while consolidating.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-05-29 12:56:36 +02:00
parent 24bece6f86
commit 12f9dfa352
6 changed files with 63 additions and 55 deletions

View File

@@ -12,6 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { getTrackerSourceBadge } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Td, Tr } from "@probo/ui";
import { graphql, useFragment } from "react-relay";
@@ -29,14 +30,6 @@ const detectedTrackerFragment = graphql`
}
`;
function sourceBadge(source: string, __: (s: string) => string) {
switch (source) {
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 };
}
}
interface DetectedTrackerRowProps {
detectedTrackerKey: DetectedTrackerRow_detectedTracker$key;
}
@@ -63,8 +56,8 @@ export function DetectedTrackerRow({ detectedTrackerKey }: DetectedTrackerRowPro
<Td>
{tracker.source
? (
<Badge variant={sourceBadge(tracker.source, __).variant}>
{sourceBadge(tracker.source, __).label}
<Badge variant={getTrackerSourceBadge(tracker.source, __).variant}>
{getTrackerSourceBadge(tracker.source, __).label}
</Badge>
)
: <span className="text-txt-tertiary">-</span>}

View File

@@ -12,7 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { humanizeSeconds } from "@probo/helpers";
import { getTrackerSourceBadge, getTrackerTypeBadge, humanizeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Card, PropertyRow } from "@probo/ui";
import { graphql, useFragment } from "react-relay";
@@ -42,25 +42,6 @@ const trackerPatternPropertiesSectionFragment = graphql`
}
`;
function trackerTypeBadge(type: string, __: (s: string) => string) {
switch (type) {
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) {
switch (source) {
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 };
}
}
interface TrackerPatternPropertiesSectionProps {
trackerPatternKey: TrackerPatternPropertiesSection_trackerPattern$key;
}
@@ -74,7 +55,7 @@ export function TrackerPatternPropertiesSection({
trackerPatternKey,
);
const typeBadge = trackerTypeBadge(pattern.trackerType, __);
const typeBadge = getTrackerTypeBadge(pattern.trackerType, __);
return (
<Card padded>
@@ -89,8 +70,8 @@ export function TrackerPatternPropertiesSection({
</PropertyRow>
{pattern.source && (
<PropertyRow label={__("Source")}>
<Badge variant={sourceBadge(pattern.source, __).variant}>
{sourceBadge(pattern.source, __).label}
<Badge variant={getTrackerSourceBadge(pattern.source, __).variant}>
{getTrackerSourceBadge(pattern.source, __).label}
</Badge>
</PropertyRow>
)}

View File

@@ -13,7 +13,7 @@
// PERFORMANCE OF THIS SOFTWARE.
import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
import { formatError, type GraphQLError } from "@probo/helpers";
import { formatError, getTrackerSourceBadge, getTrackerTypeBadge, type GraphQLError } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
@@ -134,25 +134,6 @@ const updatePatternMutation = graphql`
}
`;
function trackerTypeBadge(type: string, __: (s: string) => string) {
switch (type) {
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) {
switch (source) {
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 };
}
}
interface TrackerPatternRowProps {
patternKey: TrackerPatternRowFragment$key;
connectionId: string;
@@ -304,8 +285,8 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
);
}
const typeBadge = trackerTypeBadge(pattern.trackerType, __);
const srcBadge = pattern.source ? sourceBadge(pattern.source, __) : null;
const typeBadge = getTrackerTypeBadge(pattern.trackerType, __);
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
return (
<Tr to={pattern.id} className={pattern.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>