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

Store cookie durations as max_age_seconds

Browse Source 
Replace the free-form duration TEXT column with a nullable
max_age_seconds INTEGER on both cookies and cookie_patterns
tables. The SDK detector now sends raw seconds instead of
humanized strings, eliminating locale-dependent comparisons
in the pattern merge worker. Humanization happens at display
time in the widget and console UI.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-04-29 18:54:36 +04:00
parent b8ff3c66e1
commit 5cdaddf8b1
21 changed files with 308 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/console/src/pages/organizations/cookie-banners/configuration/consent-records/CookieBannerConsentRecordPage.tsx
View File

@@ -12,7 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { formatDate } from "@probo/helpers";
import { formatDate, humanizeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import { Badge, Breadcrumb, Card, PageHeader, PropertyRow } from "@probo/ui";
import { useMemo } from "react";
@@ -49,7 +49,7 @@ export const cookieBannerConsentRecordPageQuery = graphql`
kind
cookies {
name
duration
maxAgeSeconds
description
}
}
@@ -217,7 +217,7 @@ export default function CookieBannerConsentRecordPage({
{cookie.name}
</td>
<td className="py-1 pr-4 text-txt-secondary">
{cookie.duration}
{humanizeSeconds(cookie.maxAgeSeconds ?? null)}
</td>
<td className="py-1 text-txt-secondary">
{cookie.description}

37
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/AddCookieRow.tsx
View File

@@ -17,6 +17,7 @@ import { Button, Input, Td, Tr } from "@probo/ui";
import { useState } from "react";
import type { CookieEntry } from "./CategorySection";
import { DurationInput, toMaxAgeSeconds } from "./DurationInput";
interface AddCookieRowProps {
isUpdating: boolean;
@@ -30,39 +31,47 @@ export function AddCookieRow({
onCancel,
}: AddCookieRowProps) {
const { __ } = useTranslate();
const [form, setForm] = useState<CookieEntry>({
name: "",
duration: "",
description: "",
});
const [name, setName] = useState("");
const [durationValue, setDurationValue] = useState("");
const [durationUnit, setDurationUnit] = useState("days");
const [description, setDescription] = useState("");
const handleSave = () => {
onSave({
name,
maxAgeSeconds: toMaxAgeSeconds(durationValue, durationUnit),
description,
});
};
return (
<Tr>
<Td className="pr-3">
<Input
value={form.name}
onChange={e => setForm({ ...form, name: e.target.value })}
value={name}
onChange={e => setName(e.target.value)}
placeholder={__("Cookie name")}
/>
</Td>
<Td className="pr-3">
<Input
value={form.duration}
onChange={e => setForm({ ...form, duration: e.target.value })}
placeholder={__("e.g. 1 year")}
<DurationInput
value={durationValue}
unit={durationUnit}
onValueChange={setDurationValue}
onUnitChange={setDurationUnit}
/>
</Td>
<Td className="pr-3">
<Input
value={form.description}
onChange={e => setForm({ ...form, description: e.target.value })}
value={description}
onChange={e => setDescription(e.target.value)}
placeholder={__("Description")}
/>
</Td>
<Td>
<div className="flex items-center gap-2">
<Button
onClick={() => onSave(form)}
onClick={handleSave}
disabled={isUpdating}
>
{__("Save")}

18
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx
View File

@@ -12,7 +12,7 @@
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { formatError, type GraphQLError } from "@probo/helpers";
import { formatError, type GraphQLError, humanizeSeconds } from "@probo/helpers";
import { useTranslate } from "@probo/i18n";
import {
Badge,
@@ -48,7 +48,7 @@ import { EditCookieRow } from "./EditCookieRow";
export interface CookieEntry {
name: string;
duration: string;
maxAgeSeconds: number | null;
description: string;
}
@@ -69,7 +69,7 @@ export const categorySectionFragment = graphql`
node {
id
displayName
duration
maxAgeSeconds
description
...EditCookieRowFragment
}
@@ -125,7 +125,7 @@ const createPatternMutation = graphql`
node {
id
displayName
duration
maxAgeSeconds
description
...EditCookieRowFragment
}
@@ -150,7 +150,7 @@ const updatePatternMutation = graphql`
cookiePattern {
id
displayName
duration
maxAgeSeconds
description
updatedAt
}
@@ -193,7 +193,7 @@ const movePatternMutation = graphql`
cookiePattern {
id
displayName
duration
maxAgeSeconds
description
cookieCategory {
id
@@ -294,7 +294,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
pattern: cookie.name,
matchType: "EXACT",
displayName: cookie.name,
duration: cookie.duration,
maxAgeSeconds: cookie.maxAgeSeconds,
description: cookie.description,
},
connections: [patternsConnectionId],
@@ -340,7 +340,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
input: {
cookiePatternId: patternId,
displayName: cookie.name,
duration: cookie.duration,
maxAgeSeconds: cookie.maxAgeSeconds,
description: cookie.description,
},
},
@@ -592,7 +592,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
<code className="text-sm font-mono">{pattern.displayName}</code>
</Td>
<Td className="text-sm text-muted-foreground">
{pattern.duration}
{humanizeSeconds(pattern.maxAgeSeconds ?? null)}
</Td>
<Td className="text-sm text-muted-foreground">
{pattern.description}

73
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/DurationInput.tsx Normal file
View File

@@ -0,0 +1,73 @@
// Copyright (c) 2026 Probo Inc <hello@getprobo.com>.
//
// Permission to use, copy, modify, and/or distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
// REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
// AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
// INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
// LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
// PERFORMANCE OF THIS SOFTWARE.
import { Input } from "@probo/ui";
const UNITS: { value: string; label: string; seconds: number }[] = [
{ value: "minutes", label: "minutes", seconds: 60 },
{ value: "hours", label: "hours", seconds: 3600 },
{ value: "days", label: "days", seconds: 86400 },
{ value: "weeks", label: "weeks", seconds: 604800 },
{ value: "months", label: "months", seconds: 2592000 },
{ value: "years", label: "years", seconds: 31536000 },
];
export function toMaxAgeSeconds(value: string, unit: string): number | null {
const num = parseInt(value, 10);
if (isNaN(num) || num <= 0) return null;
const u = UNITS.find(u => u.value === unit);
if (!u) return null;
return num * u.seconds;
}
export function fromMaxAgeSeconds(seconds: number | null): { value: string; unit: string } {
if (seconds === null || seconds <= 0) return { value: "", unit: "days" };
for (const u of [...UNITS].reverse()) {
if (seconds >= u.seconds && seconds % u.seconds === 0) {
return { value: String(seconds / u.seconds), unit: u.value };
}
}
return { value: String(seconds), unit: "minutes" };
}
interface DurationInputProps {
value: string;
unit: string;
onValueChange: (value: string) => void;
onUnitChange: (unit: string) => void;
}
export function DurationInput({ value, unit, onValueChange, onUnitChange }: DurationInputProps) {
return (
<div className="flex gap-1">
<Input
type="number"
min={0}
value={value}
onChange={e => onValueChange(e.target.value)}
placeholder="—"
className="w-20"
/>
<select
value={unit}
onChange={e => onUnitChange(e.target.value)}
className="rounded border border-border bg-background px-2 py-1 text-sm"
>
{UNITS.map(u => (
<option key={u.value} value={u.value}>{u.label}</option>
))}
</select>
</div>
);
}

40
apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCookieRow.tsx
View File

@@ -21,11 +21,12 @@ import { graphql } from "relay-runtime";
import type { EditCookieRowFragment$key } from "#/__generated__/core/EditCookieRowFragment.graphql";
import type { CookieEntry } from "./CategorySection";
import { DurationInput, fromMaxAgeSeconds, toMaxAgeSeconds } from "./DurationInput";
export const editCookieRowFragment = graphql`
fragment EditCookieRowFragment on CookiePattern {
displayName
duration
maxAgeSeconds
description
}
`;
@@ -45,39 +46,48 @@ export function EditCookieRow({
}: EditCookieRowProps) {
const { __ } = useTranslate();
const cookie = useFragment(editCookieRowFragment, cookieKey);
const [form, setForm] = useState<CookieEntry>({
name: cookie.displayName,
duration: cookie.duration,
description: cookie.description,
});
const initial = fromMaxAgeSeconds(cookie.maxAgeSeconds ?? null);
const [name, setName] = useState(cookie.displayName);
const [durationValue, setDurationValue] = useState(initial.value);
const [durationUnit, setDurationUnit] = useState(initial.unit);
const [description, setDescription] = useState(cookie.description);
const handleSave = () => {
onSave({
name,
maxAgeSeconds: toMaxAgeSeconds(durationValue, durationUnit),
description,
});
};
return (
<Tr>
<Td className="pr-3">
<Input
value={form.name}
onChange={e => setForm({ ...form, name: e.target.value })}
value={name}
onChange={e => setName(e.target.value)}
placeholder={__("Cookie name")}
/>
</Td>
<Td className="pr-3">
<Input
value={form.duration}
onChange={e => setForm({ ...form, duration: e.target.value })}
placeholder={__("e.g. 1 year")}
<DurationInput
value={durationValue}
unit={durationUnit}
onValueChange={setDurationValue}
onUnitChange={setDurationUnit}
/>
</Td>
<Td className="pr-3">
<Input
value={form.description}
onChange={e => setForm({ ...form, description: e.target.value })}
value={description}
onChange={e => setDescription(e.target.value)}
placeholder={__("Description")}
/>
</Td>
<Td>
<div className="flex items-center gap-1">
<Button
onClick={() => onSave(form)}
onClick={handleSave}
disabled={isUpdating}
>
{__("Save")}