diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx
index c5cd3bc5a..b9d73c68c 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryDialog.tsx
@@ -40,6 +40,7 @@ const createMutation = graphql`
node {
id
name
+ slug
description
kind
rank
@@ -78,8 +79,27 @@ export function CategoryDialog({
const [create, isCreating] = useMutation(createMutation);
const [name, setName] = useState("");
+ const [slug, setSlug] = useState("");
+ const [slugTouched, setSlugTouched] = useState(false);
const [description, setDescription] = useState("");
+ const handleNameChange = (value: string) => {
+ setName(value);
+ if (!slugTouched) {
+ setSlug(
+ value
+ .toLowerCase()
+ .replace(/[^a-z0-9]+/g, "-")
+ .replace(/^-|-$/g, ""),
+ );
+ }
+ };
+
+ const handleSlugChange = (value: string) => {
+ setSlugTouched(true);
+ setSlug(value);
+ };
+
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
@@ -88,6 +108,7 @@ export function CategoryDialog({
input: {
cookieBannerId,
name,
+ slug,
description,
rank: nextRank,
},
@@ -113,7 +134,11 @@ export function CategoryDialog({
diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx
index bc8f35c84..0b35de7f9 100644
--- a/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx
+++ b/apps/console/src/pages/organizations/cookie-banners/configuration/cookies/_components/EditCategoryForm.tsx
@@ -18,14 +18,16 @@ import { useState } from "react";
interface EditCategoryFormProps {
name: string;
+ slug: string;
description: string;
isUpdating: boolean;
- onSave: (name: string, description: string) => void;
+ onSave: (name: string, slug: string, description: string) => void;
onCancel: () => void;
}
export function EditCategoryForm({
name,
+ slug,
description,
isUpdating,
onSave,
@@ -33,6 +35,7 @@ export function EditCategoryForm({
}: EditCategoryFormProps) {
const { __ } = useTranslate();
const [editName, setEditName] = useState(name);
+ const [editSlug, setEditSlug] = useState(slug);
const [editDescription, setEditDescription] = useState(description);
return (
@@ -42,6 +45,12 @@ export function EditCategoryForm({
onChange={e => setEditName(e.target.value)}
placeholder={__("Category name")}
/>
+