Switch console cookies page to cookie patterns

The console now manages CookiePattern entities instead of raw Cookie rows. The frontend queries cookiePatterns on each category and uses createCookiePattern, updateCookiePattern, deleteCookiePattern, and moveCookiePatternToCategory mutations. The entire Cookie GraphQL surface (type, connection, mutations, inputs, payloads, resolvers, Go types) is removed since the backing struct already lost description and cookieCategoryID. Signed-off-by: Émile Ré <emile@getprobo.com>
2026-04-29 15:33:49 +04:00
parent 22fd103795
commit 94ccc71357
6 changed files with 80 additions and 684 deletions
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CookieDialog.tsx
@@ -1,161 +0,0 @@
-// 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 { formatError, type GraphQLError } from "@probo/helpers";
-import { useTranslate } from "@probo/i18n";
-import {
-  Button,
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  Field,
-  Input,
-  Label,
-  Option,
-  Select,
-  useDialogRef,
-  useToast,
-} from "@probo/ui";
-import { useState } from "react";
-import { useMutation } from "react-relay";
-import { graphql } from "relay-runtime";
-
-import type { CookieDialogCreateMutation } from "#/__generated__/core/CookieDialogCreateMutation.graphql";
-
-const createCookieMutation = graphql`
-  mutation CookieDialogCreateMutation($input: CreateCookieInput!) {
-    createCookie(input: $input) {
-      cookieEdge {
-        node {
-          id
-          name
-          duration
-          description
-        }
-      }
-      cookieBanner {
-        id
-        latestVersion {
-          id
-          version
-          state
-        }
-      }
-    }
-  }
-`;
-
-interface Category {
-  id: string;
-  name: string;
-}
-
-interface CookieDialogProps {
-  categories: ReadonlyArray<Category>;
-  onOpenChange: (open: boolean) => void;
-}
-
-export function CookieDialog({ categories, onOpenChange }: CookieDialogProps) {
-  const { __ } = useTranslate();
-  const { toast } = useToast();
-  const dialogRef = useDialogRef();
-
-  const [createCookie, isCreating] = useMutation<CookieDialogCreateMutation>(createCookieMutation);
-
-  const [categoryId, setCategoryId] = useState(categories[0]?.id ?? "");
-  const [name, setName] = useState("");
-  const [duration, setDuration] = useState("");
-  const [description, setDescription] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    createCookie({
-      variables: {
-        input: {
-          cookieCategoryId: categoryId,
-          name: name.trim(),
-          duration: duration.trim(),
-          description: description.trim(),
-        },
-      },
-      onCompleted(_response, errors) {
-        if (errors?.length) {
-          const isConflict = errors.some(
-            e => (e as unknown as GraphQLError).extensions?.code === "CONFLICT",
-          );
-          toast({
-            title: __("Error"),
-            description: isConflict
-              ? __("A cookie with this name already exists in this banner")
-              : errors[0].message,
-            variant: "error",
-          });
-          return;
-        }
-        toast({ title: __("Success"), description: __("Cookie added"), variant: "success" });
-        dialogRef.current?.close();
-      },
-      onError(error) {
-        toast({ title: __("Error"), description: formatError(__("Failed to add cookie"), error as GraphQLError), variant: "error" });
-      },
-    });
-  };
-
-  return (
-    <Dialog
-      ref={dialogRef}
-      defaultOpen
-      onClose={() => onOpenChange(false)}
-      title={__("Add Cookie")}
-      className="max-w-lg"
-    >
-      <form onSubmit={handleSubmit}>
-        <DialogContent padded className="space-y-4">
-          <div className="space-y-2">
-            <Label>{__("Category")}</Label>
-            <Select value={categoryId} onValueChange={id => setCategoryId(id)}>
-              {categories.map(cat => (
-                <Option key={cat.id} value={cat.id}>{cat.name}</Option>
-              ))}
-            </Select>
-          </div>
-
-          <Field label={__("Cookie name")}>
-            <Input value={name} onChange={e => setName(e.target.value)} required />
-          </Field>
-
-          <Field label={__("Duration")}>
-            <Input
-              value={duration}
-              onChange={e => setDuration(e.target.value)}
-              required
-              placeholder={__("e.g. 1 year")}
-            />
-          </Field>
-
-          <Field label={__("Description")}>
-            <Input value={description} onChange={e => setDescription(e.target.value)} required />
-          </Field>
-        </DialogContent>
-
-        <DialogFooter>
-          <Button type="submit" disabled={isCreating}>
-            {isCreating ? __("Adding...") : __("Add Cookie")}
-          </Button>
-        </DialogFooter>
-      </form>
-    </Dialog>
-  );
-}
--- 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
@@ -35,12 +35,12 @@ import { useState } from "react";
 import { useFragment, useMutation } from "react-relay";
 import { ConnectionHandler, graphql } from "relay-runtime";

-import type { CategorySectionCreateCookieMutation } from "#/__generated__/core/CategorySectionCreateCookieMutation.graphql";
-import type { CategorySectionDeleteCookieMutation } from "#/__generated__/core/CategorySectionDeleteCookieMutation.graphql";
+import type { CategorySectionCreatePatternMutation } from "#/__generated__/core/CategorySectionCreatePatternMutation.graphql";
+import type { CategorySectionDeletePatternMutation } from "#/__generated__/core/CategorySectionDeletePatternMutation.graphql";
 import type { CategorySectionFragment$key } from "#/__generated__/core/CategorySectionFragment.graphql";
-import type { CategorySectionMoveCookieMutation } from "#/__generated__/core/CategorySectionMoveCookieMutation.graphql";
-import type { CategorySectionUpdateCookieMutation } from "#/__generated__/core/CategorySectionUpdateCookieMutation.graphql";
+import type { CategorySectionMovePatternMutation } from "#/__generated__/core/CategorySectionMovePatternMutation.graphql";
 import type { CategorySectionUpdateMutation } from "#/__generated__/core/CategorySectionUpdateMutation.graphql";
+import type { CategorySectionUpdatePatternMutation } from "#/__generated__/core/CategorySectionUpdatePatternMutation.graphql";

 import { AddCookieRow } from "./AddCookieRow";
 import { EditCategoryForm } from "./EditCategoryForm";
@@ -61,14 +61,14 @@ export const categorySectionFragment = graphql`
    kind
    gcmConsentTypes
    posthogConsent
-    cookies(first: 100, orderBy: { field: CREATED_AT, direction: ASC })
-      @connection(key: "CategorySection_cookies", filters: [])
+    cookiePatterns(first: 100, orderBy: { field: CREATED_AT, direction: ASC })
+      @connection(key: "CategorySection_cookiePatterns", filters: [])
      @required(action: THROW) {
      __id
      edges {
        node {
          id
-          name
+          displayName
          duration
          description
          ...EditCookieRowFragment
@@ -115,16 +115,16 @@ const updateCategoryMutation = graphql`
  }
 `;

-const createCookieMutation = graphql`
-  mutation CategorySectionCreateCookieMutation(
-    $input: CreateCookieInput!
+const createPatternMutation = graphql`
+  mutation CategorySectionCreatePatternMutation(
+    $input: CreateCookiePatternInput!
    $connections: [ID!]!
  ) {
-    createCookie(input: $input) {
-      cookieEdge @appendEdge(connections: $connections) {
+    createCookiePattern(input: $input) {
+      cookiePatternEdge @appendEdge(connections: $connections) {
        node {
          id
-          name
+          displayName
          duration
          description
          ...EditCookieRowFragment
@@ -142,14 +142,14 @@ const createCookieMutation = graphql`
  }
 `;

-const updateCookieMutation = graphql`
-  mutation CategorySectionUpdateCookieMutation(
-    $input: UpdateCookieInput!
+const updatePatternMutation = graphql`
+  mutation CategorySectionUpdatePatternMutation(
+    $input: UpdateCookiePatternInput!
  ) {
-    updateCookie(input: $input) {
-      cookie {
+    updateCookiePattern(input: $input) {
+      cookiePattern {
        id
-        name
+        displayName
        duration
        description
        updatedAt
@@ -166,13 +166,13 @@ const updateCookieMutation = graphql`
  }
 `;

-const deleteCookieMutation = graphql`
-  mutation CategorySectionDeleteCookieMutation(
-    $input: DeleteCookieInput!
+const deletePatternMutation = graphql`
+  mutation CategorySectionDeletePatternMutation(
+    $input: DeleteCookiePatternInput!
    $connections: [ID!]!
  ) {
-    deleteCookie(input: $input) {
-      deletedCookieId @deleteEdge(connections: $connections)
+    deleteCookiePattern(input: $input) {
+      deletedCookiePatternId @deleteEdge(connections: $connections)
      cookieBanner {
        id
        latestVersion {
@@ -185,14 +185,14 @@ const deleteCookieMutation = graphql`
  }
 `;

-const moveCookieMutation = graphql`
-  mutation CategorySectionMoveCookieMutation(
-    $input: MoveCookieToCategoryInput!
+const movePatternMutation = graphql`
+  mutation CategorySectionMovePatternMutation(
+    $input: MoveCookiePatternToCategoryInput!
  ) {
-    moveCookieToCategory(input: $input) {
-      cookie {
+    moveCookiePatternToCategory(input: $input) {
+      cookiePattern {
        id
-        name
+        displayName
        duration
        description
        cookieCategory {
@@ -224,22 +224,22 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)

  const [updateCategory, isUpdating]
    = useMutation<CategorySectionUpdateMutation>(updateCategoryMutation);
-  const [createCookie, isCreating]
-    = useMutation<CategorySectionCreateCookieMutation>(createCookieMutation);
-  const [updateCookie, isUpdatingCookie]
-    = useMutation<CategorySectionUpdateCookieMutation>(updateCookieMutation);
-  const [deleteCookie]
-    = useMutation<CategorySectionDeleteCookieMutation>(deleteCookieMutation);
-  const [moveCookie]
-    = useMutation<CategorySectionMoveCookieMutation>(moveCookieMutation);
+  const [createPattern, isCreating]
+    = useMutation<CategorySectionCreatePatternMutation>(createPatternMutation);
+  const [updatePattern, isUpdatingPattern]
+    = useMutation<CategorySectionUpdatePatternMutation>(updatePatternMutation);
+  const [deletePattern]
+    = useMutation<CategorySectionDeletePatternMutation>(deletePatternMutation);
+  const [movePattern]
+    = useMutation<CategorySectionMovePatternMutation>(movePatternMutation);

  const [isEditingCategory, setIsEditingCategory] = useState(false);
  const [editingCookieId, setEditingCookieId] = useState<string | null>(null);
  const [isAddingCookie, setIsAddingCookie] = useState(false);

-  const cookiesConnectionId = category.cookies.__id;
-  const cookies = category.cookies.edges.map(e => e.node);
-  const isMutating = isUpdating || isCreating || isUpdatingCookie;
+  const patternsConnectionId = category.cookiePatterns.__id;
+  const patterns = category.cookiePatterns.edges.map(e => e.node);
+  const isMutating = isUpdating || isCreating || isUpdatingPattern;

  const handleSaveCategory = (
    name: string, slug: string, description: string,
@@ -287,15 +287,17 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)

  const handleSaveNewCookie = (cookie: CookieEntry) => {
    if (!cookie.name.trim()) return;
-    createCookie({
+    createPattern({
      variables: {
        input: {
          cookieCategoryId: category.id,
-          name: cookie.name,
+          pattern: cookie.name,
+          matchType: "EXACT",
+          displayName: cookie.name,
          duration: cookie.duration,
          description: cookie.description,
        },
-        connections: [cookiesConnectionId],
+        connections: [patternsConnectionId],
      },
      onCompleted(_response, errors) {
        if (errors?.length) {
@@ -331,13 +333,13 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
    });
  };

-  const handleSaveEditCookie = (cookieId: string, cookie: CookieEntry) => {
+  const handleSaveEditCookie = (patternId: string, cookie: CookieEntry) => {
    if (!cookie.name.trim()) return;
-    updateCookie({
+    updatePattern({
      variables: {
        input: {
-          cookieId,
-          name: cookie.name,
+          cookiePatternId: patternId,
+          displayName: cookie.name,
          duration: cookie.duration,
          description: cookie.description,
        },
@@ -376,11 +378,11 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
    });
  };

-  const handleDeleteCookie = (cookieId: string) => {
-    deleteCookie({
+  const handleDeleteCookie = (patternId: string) => {
+    deletePattern({
      variables: {
-        input: { cookieId },
-        connections: [cookiesConnectionId],
+        input: { cookiePatternId: patternId },
+        connections: [patternsConnectionId],
      },
      onCompleted(_response, errors) {
        if (errors?.length) {
@@ -413,11 +415,11 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
  const allCategories = category.cookieBanner.categories.edges.map(e => e.node) ?? [];
  const siblingCategories = allCategories.filter(c => c.id !== category.id);

-  const handleMoveCookie = (cookieId: string, targetCategoryId: string) => {
-    moveCookie({
+  const handleMoveCookie = (patternId: string, targetCategoryId: string) => {
+    movePattern({
      variables: {
        input: {
-          cookieId,
+          cookiePatternId: patternId,
          targetCookieCategoryId: targetCategoryId,
        },
      },
@@ -426,10 +428,10 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
        if (sourceCategory) {
          const sourceConn = ConnectionHandler.getConnection(
            sourceCategory,
-            "CategorySection_cookies",
+            "CategorySection_cookiePatterns",
          );
          if (sourceConn) {
-            ConnectionHandler.deleteNode(sourceConn, cookieId);
+            ConnectionHandler.deleteNode(sourceConn, patternId);
          }
        }

@@ -437,16 +439,16 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
        if (targetCategory) {
          const targetConn = ConnectionHandler.getConnection(
            targetCategory,
-            "CategorySection_cookies",
+            "CategorySection_cookiePatterns",
          );
          if (targetConn) {
-            const cookieRecord = store.get(cookieId);
-            if (cookieRecord) {
+            const patternRecord = store.get(patternId);
+            if (patternRecord) {
              const newEdge = ConnectionHandler.createEdge(
                store,
                targetConn,
-                cookieRecord,
-                "CookieEdge",
+                patternRecord,
+                "CookiePatternEdge",
              );
              ConnectionHandler.insertEdgeAfter(targetConn, newEdge);
            }
@@ -573,34 +575,34 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
          </Tr>
        </Thead>
        <Tbody>
-          {cookies.map(cookie =>
-            editingCookieId === cookie.id
+          {patterns.map(pattern =>
+            editingCookieId === pattern.id
              ? (
                  <EditCookieRow
-                    key={cookie.id}
-                    cookieKey={cookie}
+                    key={pattern.id}
+                    cookieKey={pattern}
                    isUpdating={isMutating}
-                    onSave={updated => handleSaveEditCookie(cookie.id, updated)}
+                    onSave={updated => handleSaveEditCookie(pattern.id, updated)}
                    onCancel={() => setEditingCookieId(null)}
                  />
                )
              : (
-                  <Tr key={cookie.id}>
+                  <Tr key={pattern.id}>
                    <Td>
-                      <code className="text-sm font-mono">{cookie.name}</code>
+                      <code className="text-sm font-mono">{pattern.displayName}</code>
                    </Td>
                    <Td className="text-sm text-muted-foreground">
-                      {cookie.duration}
+                      {pattern.duration}
                    </Td>
                    <Td className="text-sm text-muted-foreground">
-                      {cookie.description}
+                      {pattern.description}
                    </Td>
                    <Td>
                      <div className="flex items-center gap-1">
                        <button
                          type="button"
                          onClick={() => {
-                            setEditingCookieId(cookie.id);
+                            setEditingCookieId(pattern.id);
                            setIsAddingCookie(false);
                          }}
                          className="p-1 rounded cursor-pointer"
@@ -622,7 +624,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
                              <DropdownItem
                                className="text-sm"
                                key={cat.id}
-                                onSelect={() => handleMoveCookie(cookie.id, cat.id)}
+                                onSelect={() => handleMoveCookie(pattern.id, cat.id)}
                              >
                                {cat.name}
                              </DropdownItem>
@@ -631,7 +633,7 @@ export function CategorySection({ categoryKey, onDelete }: CategorySectionProps)
                        )}
                        <button
                          type="button"
-                          onClick={() => handleDeleteCookie(cookie.id)}
+                          onClick={() => handleDeleteCookie(pattern.id)}
                          className="p-1 rounded cursor-pointer text-danger-dark"
                        >
                          <IconTrashCan size={14} />
--- 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
@@ -23,8 +23,8 @@ import type { EditCookieRowFragment$key } from "#/__generated__/core/EditCookieR
 import type { CookieEntry } from "./CategorySection";

 export const editCookieRowFragment = graphql`
-  fragment EditCookieRowFragment on Cookie {
-    name
+  fragment EditCookieRowFragment on CookiePattern {
+    displayName
    duration
    description
  }
@@ -46,7 +46,7 @@ export function EditCookieRow({
  const { __ } = useTranslate();
  const cookie = useFragment(editCookieRowFragment, cookieKey);
  const [form, setForm] = useState<CookieEntry>({
-    name: cookie.name,
+    name: cookie.displayName,
    duration: cookie.duration,
    description: cookie.description,
  });