Display cookie pattern source badge in category table

Show the origin of each cookie pattern (Script vs Pre-existing) as a badge with a tooltip in the cookies configuration table. Signed-off-by: Émile Ré <emile@getprobo.com>
2026-05-01 17:41:50 +04:00
parent bb7bc7c716
commit 1d08760d3b
4 changed files with 109 additions and 16 deletions
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/AddCookieRow.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/AddCookieRow.tsx
@@ -51,6 +51,7 @@ export function AddCookieRow({
      name: data.name,
      maxAgeSeconds: toMaxAgeSeconds(data.duration.value, data.duration.unit),
      description: data.description,
+      excluded: false,
    });
  };

@@ -62,6 +63,7 @@ export function AddCookieRow({
          placeholder={__("Cookie name")}
        />
      </Td>
+      <Td />
      <Td className="pr-3">
        <Controller
          name="duration"
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/CategorySection.tsx
@@ -28,6 +28,7 @@ import {
  Td,
  Th,
  Thead,
+  Toggle,
  Tr,
  useToast,
 } from "@probo/ui";
@@ -50,6 +51,7 @@ export interface CookieEntry {
  name: string;
  maxAgeSeconds: number | null;
  description: string;
+  excluded: boolean;
 }

 export const categorySectionFragment = graphql`
@@ -71,6 +73,8 @@ export const categorySectionFragment = graphql`
          displayName
          maxAgeSeconds
          description
+          excluded
+          source
          ...EditCookieRowFragment
        }
      }
@@ -127,6 +131,8 @@ const createPatternMutation = graphql`
          displayName
          maxAgeSeconds
          description
+          excluded
+          source
          ...EditCookieRowFragment
        }
      }
@@ -152,6 +158,7 @@ const updatePatternMutation = graphql`
        displayName
        maxAgeSeconds
        description
+        excluded
        updatedAt
      }
      cookieBanner {
@@ -342,6 +349,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
          displayName: cookie.name,
          maxAgeSeconds: cookie.maxAgeSeconds,
          description: cookie.description,
+          excluded: cookie.excluded,
        },
      },
      onCompleted(_response, errors) {
@@ -378,6 +386,37 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
    });
  };

+  const handleToggleExcluded = (patternId: string, excluded: boolean) => {
+    updatePattern({
+      variables: {
+        input: {
+          cookiePatternId: patternId,
+          excluded,
+        },
+      },
+      onCompleted(_response, errors) {
+        if (errors?.length) {
+          toast({
+            title: __("Error"),
+            description: errors[0].message,
+            variant: "error",
+          });
+          return;
+        }
+      },
+      onError(error) {
+        toast({
+          title: __("Error"),
+          description: formatError(
+            __("Failed to update cookie"),
+            error as GraphQLError,
+          ),
+          variant: "error",
+        });
+      },
+    });
+  };
+
  const handleDeleteCookie = (patternId: string) => {
    deletePattern({
      variables: {
@@ -568,7 +607,8 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
      <table className="w-full text-left">
        <Thead>
          <Tr>
-            <Th>{__("Name")}</Th>
+            <Th><span className="pl-10">{__("Name")}</span></Th>
+            <Th>{__("Source")}</Th>
            <Th>{__("Duration")}</Th>
            <Th>{__("Description")}</Th>
            <Th className="w-20" />
@@ -587,9 +627,30 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
                  />
                )
              : (
-                  <Tr key={pattern.id}>
+                  <Tr key={pattern.id} className={pattern.excluded ? "opacity-50" : undefined}>
                    <Td>
-                      <code className="text-sm font-mono">{pattern.displayName}</code>
+                      <div className="flex items-center gap-2">
+                        <Toggle
+                          size="sm"
+                          checked={!pattern.excluded}
+                          onChange={() => handleToggleExcluded(pattern.id, !pattern.excluded)}
+                          disabled={isUpdatingPattern}
+                          title={__("Include this cookie in the banner")}
+                        />
+                        <code className="text-sm font-mono">{pattern.displayName}</code>
+                      </div>
+                    </Td>
+                    <Td>
+                      <Badge
+                        variant={pattern.source === "SCRIPT" ? "info" : "neutral"}
+                        title={
+                          pattern.source === "SCRIPT"
+                            ? __("Set by a script at runtime")
+                            : __("Already present when the page was loaded")
+                        }
+                      >
+                        {pattern.source === "SCRIPT" ? __("Script") : __("Pre-existing")}
+                      </Badge>
                    </Td>
                    <Td className="text-sm text-muted-foreground">
                      {humanizeSeconds(pattern.maxAgeSeconds ?? null)}
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCookieRow.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCookieRow.tsx
@@ -14,7 +14,7 @@

 import { fromMaxAgeSeconds, toMaxAgeSeconds } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { Button, DurationInput, Input, Td, Tr } from "@probo/ui";
+import { Button, DurationInput, Input, Td, Toggle, Tr } from "@probo/ui";
 import { Controller, useForm } from "react-hook-form";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
@@ -28,6 +28,7 @@ export const editCookieRowFragment = graphql`
    displayName
    maxAgeSeconds
    description
+    excluded
  }
 `;

@@ -35,6 +36,7 @@ interface CookieFormValues {
  name: string;
  duration: { value: string; unit: string };
  description: string;
+  excluded: boolean;
 }

 interface EditCookieRowProps {
@@ -59,6 +61,7 @@ export function EditCookieRow({
      name: cookie.displayName,
      duration: initial,
      description: cookie.description,
+      excluded: cookie.excluded,
    },
  });

@@ -67,17 +70,33 @@ export function EditCookieRow({
      name: data.name,
      maxAgeSeconds: toMaxAgeSeconds(data.duration.value, data.duration.unit),
      description: data.description,
+      excluded: data.excluded,
    });
  };

  return (
    <Tr>
      <Td className="pr-3">
-        <Input
-          {...register("name")}
-          placeholder={__("Cookie name")}
-        />
+        <div className="flex items-center gap-2">
+          <Controller
+            name="excluded"
+            control={control}
+            render={({ field }) => (
+              <Toggle
+                size="sm"
+                checked={!field.value}
+                onChange={checked => field.onChange(!checked)}
+                title={__("Include this cookie in the banner")}
+              />
+            )}
+          />
+          <Input
+            {...register("name")}
+            placeholder={__("Cookie name")}
+          />
+        </div>
      </Td>
+      <Td />
      <Td className="pr-3">
        <Controller
          name="duration"
@@ -99,7 +118,7 @@ export function EditCookieRow({
        />
      </Td>
      <Td>
-        <div className="flex items-center gap-1">
+        <div className="flex items-center gap-2">
          <Button
            onClick={() => void handleSubmit(onSubmit)()}
            disabled={isUpdating}
--- a/packages/ui/src/Atoms/Toggle/Toggle.tsx
+++ b/packages/ui/src/Atoms/Toggle/Toggle.tsx
@@ -12,28 +12,39 @@
 // OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 // PERFORMANCE OF THIS SOFTWARE.

+const sizes = {
+  default: { track: { width: 44, height: 24, padding: 2 }, thumb: 20 },
+  sm: { track: { width: 32, height: 18, padding: 2 }, thumb: 14 },
+} as const;
+
 type Props = {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
+  size?: keyof typeof sizes;
+  title?: string;
 };

-export function Toggle({ checked, onChange, disabled = false }: Props) {
+export function Toggle({ checked, onChange, disabled = false, size = "default", title }: Props) {
+  const { track, thumb } = sizes[size];
+  const travel = track.width - thumb - track.padding * 2;
+
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      disabled={disabled}
+      title={title}
      onClick={() => !disabled && onChange(!checked)}
      style={{
        position: "relative",
        display: "inline-flex",
        alignItems: "center",
        flexShrink: 0,
-        width: 44,
-        height: 24,
-        padding: 2,
+        width: track.width,
+        height: track.height,
+        padding: track.padding,
        borderRadius: 9999,
        border: "none",
        cursor: disabled ? "not-allowed" : "pointer",
@@ -47,13 +58,13 @@ export function Toggle({ checked, onChange, disabled = false }: Props) {
      <span
        style={{
          display: "block",
-          width: 20,
-          height: 20,
+          width: thumb,
+          height: thumb,
          borderRadius: 9999,
          backgroundColor: "white",
          boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
          transition: "transform 200ms ease-in-out",
-          transform: checked ? "translateX(20px)" : "translateX(0)",
+          transform: checked ? `translateX(${travel}px)` : "translateX(0)",
        }}
      />
    </button>