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

Update common tracker / third party display on trackers and tracker detail pages

Browse Source 
Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-06-08 15:51:52 +02:00
parent 92a73e9302
commit 99fdccf1e8
2 changed files with 28 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@
import { getTrackerSourceBadge, getTrackerTypeBadge, humanizeSeconds } from "@probo/helpers"; import { getTrackerSourceBadge, getTrackerTypeBadge, humanizeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n"; import { useTranslate } from "@probo/i18n";
import { Badge, Card, PropertyRow } from "@probo/ui"; import { Badge, Card, IconSquareBehindSquare2, PropertyRow, useToast } from "@probo/ui";
import { graphql, useFragment } from "react-relay"; import { graphql, useFragment } from "react-relay";
import type { TrackerPatternPropertiesSection_trackerPattern$key } from "#/__generated__/core/TrackerPatternPropertiesSection_trackerPattern.graphql"; import type { TrackerPatternPropertiesSection_trackerPattern$key } from "#/__generated__/core/TrackerPatternPropertiesSection_trackerPattern.graphql";
@@ -50,6 +50,7 @@ interface TrackerPatternPropertiesSectionProps {
export function TrackerPatternPropertiesSection({ export function TrackerPatternPropertiesSection({
trackerPatternKey, trackerPatternKey,
}: TrackerPatternPropertiesSectionProps) { }: TrackerPatternPropertiesSectionProps) {
const { toast } = useToast();
const { __ } = useTranslate(); const { __ } = useTranslate();
const pattern = useFragment( const pattern = useFragment(
trackerPatternPropertiesSectionFragment, trackerPatternPropertiesSectionFragment,
@@ -91,6 +92,7 @@ export function TrackerPatternPropertiesSection({
: pattern.commonThirdParty : pattern.commonThirdParty
? ( ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Badge variant="info">{__("Common catalog")}</Badge>
<span className="text-sm">{pattern.commonThirdParty.name}</span> <span className="text-sm">{pattern.commonThirdParty.name}</span>
</div> </div>
) )
@@ -102,20 +104,32 @@ export function TrackerPatternPropertiesSection({
</span> </span>
</PropertyRow> </PropertyRow>
{pattern.description && ( {pattern.description && (
<PropertyRow label={__("Description")}> <>
<span className="text-sm">{pattern.description}</span> <PropertyRow label={__("Description")}>
</PropertyRow> <span className="text-sm">{pattern.description}</span>
</PropertyRow>
<PropertyRow label={__("Description source")}>
{pattern.commonTrackerPatternId
? (
<div className="flex items-center gap-2">
<Badge variant="info">{__("Common catalog")}</Badge>
<span className="font-mono text-xs text-txt-tertiary">{pattern.commonTrackerPatternId}</span>
<button
type="button"
className="p-1 rounded hover:bg-bg-hover transition-colors cursor-pointer"
onClick={() => {
void navigator.clipboard.writeText(pattern.commonTrackerPatternId);
toast({ title: __("Copied"), description: __("Common Tracker ID copied to clipboard"), variant: "success" });
}}
>
<IconSquareBehindSquare2 size={16} />
</button>
</div>
)
: <Badge variant="neutral">{__("Manual")}</Badge>}
</PropertyRow>
</>
)} )}
<PropertyRow label={__("Description source")}>
{pattern.commonTrackerPatternId
? (
<div className="flex items-center gap-2">
<Badge variant="info">{__("Common catalog")}</Badge>
<span className="font-mono text-xs text-txt-tertiary">{pattern.commonTrackerPatternId}</span>
</div>
)
: <Badge variant="neutral">{__("Manual")}</Badge>}
</PropertyRow>
<PropertyRow label={__("Excluded")}> <PropertyRow label={__("Excluded")}>
<span className="text-sm">{pattern.excluded ? __("Yes") : __("No")}</span> <span className="text-sm">{pattern.excluded ? __("Yes") : __("No")}</span>
</PropertyRow> </PropertyRow>

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

@@ -48,7 +48,6 @@ const trackerPatternFragment = graphql`
maxAgeSeconds maxAgeSeconds
excluded excluded
lastMatchedAt lastMatchedAt
commonTrackerPatternId
cookieCategory { cookieCategory {
id id
name name
@@ -288,7 +287,6 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
const typeBadge = getTrackerTypeBadge(pattern.trackerType, __); const typeBadge = getTrackerTypeBadge(pattern.trackerType, __);
const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null; const srcBadge = pattern.source ? getTrackerSourceBadge(pattern.source, __) : null;
const commonTrackerPatternId = pattern.commonTrackerPatternId;
return ( return (
<Tr to={pattern.id} className={pattern.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}> <Tr to={pattern.id} className={pattern.excluded ? "bg-txt-quaternary opacity-80 line-through" : undefined}>
@@ -298,13 +296,6 @@ export function TrackerPatternRow({ patternKey, connectionId }: TrackerPatternRo
<Td> <Td>
<div className="flex flex-col min-w-0 max-w-xs gap-1"> <div className="flex flex-col min-w-0 max-w-xs gap-1">
<span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span> <span className={pattern.excluded ? undefined : "font-medium"}>{pattern.displayName}</span>
{commonTrackerPatternId
? (
<span className="text-xs font-mono text-txt-tertiary truncate" title={commonTrackerPatternId}>
{commonTrackerPatternId}
</span>
)
: <span className="text-xs text-txt-tertiary">{__("Manual")}</span>}
{pattern.description && ( {pattern.description && (
<span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1"> <span className="text-xs text-txt-tertiary wrap-break-word line-clamp-1">
{pattern.description} {pattern.description}