From 4b08a465d453b80e69e55b158532b4504407d911 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Mon, 27 Apr 2026 12:04:48 +0400 Subject: [PATCH] Reorganize cookie banner configuration pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Move JS snippet (CodeSnippets) into Settings, move category sorting (CategoryList) into the renamed Display page, remove the blocking-scripts step, and rename the Snippet tab to Display. Signed-off-by: Émile Ré --- .../CookieBannerConfigLayout.tsx | 4 +- .../_components/CategoryList.tsx | 19 +-- .../display/CookieBannerDisplayPage.tsx | 52 +++++++ .../CookieBannerDisplayPageLoader.tsx} | 10 +- .../_components/ThemePreview.tsx | 3 - .../settings/CookieBannerSettingsPage.tsx | 6 +- .../_components/CodeSnippets.tsx | 1 + .../snippet/CookieBannerSnippetPage.tsx | 129 ------------------ .../organizations/cookie-banners/routes.ts | 4 +- 9 files changed, 66 insertions(+), 162 deletions(-) create mode 100644 apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx rename apps/console/src/pages/organizations/cookie-banners/configuration/{snippet/CookieBannerSnippetPageLoader.tsx => display/CookieBannerDisplayPageLoader.tsx} (75%) rename apps/console/src/pages/organizations/cookie-banners/configuration/{snippet => display}/_components/ThemePreview.tsx (98%) rename apps/console/src/pages/organizations/cookie-banners/configuration/{snippet => settings}/_components/CodeSnippets.tsx (97%) delete mode 100644 apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPage.tsx diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx index 1c262a796..e43330b21 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/CookieBannerConfigLayout.tsx @@ -247,9 +247,9 @@ export default function CookieBannerConfigLayout({ queryRef }: CookieBannerConfi {__("Translations")} - + - {__("JS / CSS snippets")} + {__("Display")} diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx index 63521f424..03908d735 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/CategoryList.tsx @@ -15,7 +15,6 @@ import { formatError, type GraphQLError } from "@probo/helpers"; import { useTranslate } from "@probo/i18n"; import { Badge, Button, Card, IconArrowDown, IconArrowUp, useConfirm, useToast } from "@probo/ui"; -import { useState } from "react"; import { useFragment, useMutation } from "react-relay"; import { graphql } from "relay-runtime"; @@ -23,8 +22,6 @@ import type { CategoryList_cookieBanner$key } from "#/__generated__/core/Categor import type { CategoryListDeleteMutation } from "#/__generated__/core/CategoryListDeleteMutation.graphql"; import type { CategoryListReorderMutation } from "#/__generated__/core/CategoryListReorderMutation.graphql"; -import { CategoryDialog } from "./CategoryDialog"; - const categoryListFragment = graphql` fragment CategoryList_cookieBanner on CookieBanner { id @@ -88,7 +85,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) { const { __ } = useTranslate(); const { toast } = useToast(); const confirm = useConfirm(); - const [showCreateDialog, setShowCreateDialog] = useState(false); const banner = useFragment(categoryListFragment, cookieBannerKey); const connectionId = banner.categories.__id; @@ -156,12 +152,7 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) { return (
-
-

{__("Categories Sorting")}

- -
+

{__("Categories Sorting")}

{__("Categories will be displayed in your cookie banner in the same order as below.")}

@@ -210,14 +201,6 @@ export function CategoryList({ cookieBannerKey }: CategoryListProps) { ))} - {showCreateDialog && ( - 0 ? sorted[sorted.length - 1].rank + 1 : 0} - onOpenChange={setShowCreateDialog} - /> - )}
); } diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx new file mode 100644 index 000000000..00e2504f2 --- /dev/null +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPage.tsx @@ -0,0 +1,52 @@ +// Copyright (c) 2026 Probo Inc . +// +// 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 { type PreloadedQuery, usePreloadedQuery } from "react-relay"; +import { graphql } from "relay-runtime"; + +import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql"; + +import { CategoryList } from "../_components/CategoryList"; +import { ThemePreview } from "./_components/ThemePreview"; + +export const cookieBannerDisplayPageQuery = graphql` + query CookieBannerDisplayPageQuery($cookieBannerId: ID!) { + node(id: $cookieBannerId) @required(action: THROW) { + __typename + ... on CookieBanner { + ...CategoryList_cookieBanner + ...ThemePreview_cookieBanner + } + } + } +`; + +interface CookieBannerDisplayPageProps { + queryRef: PreloadedQuery; +} + +export default function CookieBannerDisplayPage({ queryRef }: CookieBannerDisplayPageProps) { + const data = usePreloadedQuery(cookieBannerDisplayPageQuery, queryRef); + + if (data.node.__typename !== "CookieBanner") { + throw new Error("invalid type for node"); + } + + return ( +
+ + +
+ ); +} diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader.tsx similarity index 75% rename from apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader.tsx rename to apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader.tsx index 4637a0cf2..8aa86dcf3 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/CookieBannerSnippetPageLoader.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/display/CookieBannerDisplayPageLoader.tsx @@ -16,14 +16,14 @@ import { Suspense, useEffect } from "react"; import { useQueryLoader } from "react-relay"; import { useParams } from "react-router"; -import type { CookieBannerSnippetPageQuery } from "#/__generated__/core/CookieBannerSnippetPageQuery.graphql"; +import type { CookieBannerDisplayPageQuery } from "#/__generated__/core/CookieBannerDisplayPageQuery.graphql"; import { PageSkeleton } from "#/components/skeletons/PageSkeleton"; -import CookieBannerSnippetPage, { cookieBannerSnippetPageQuery } from "./CookieBannerSnippetPage"; +import CookieBannerDisplayPage, { cookieBannerDisplayPageQuery } from "./CookieBannerDisplayPage"; -export default function CookieBannerSnippetPageLoader() { +export default function CookieBannerDisplayPageLoader() { const { cookieBannerId } = useParams<{ cookieBannerId: string }>(); - const [queryRef, loadQuery] = useQueryLoader(cookieBannerSnippetPageQuery); + const [queryRef, loadQuery] = useQueryLoader(cookieBannerDisplayPageQuery); useEffect(() => { if (cookieBannerId) { @@ -37,7 +37,7 @@ export default function CookieBannerSnippetPageLoader() { return ( }> - + ); } diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/display/_components/ThemePreview.tsx similarity index 98% rename from apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx rename to apps/console/src/pages/organizations/cookie-banners/configuration/display/_components/ThemePreview.tsx index ac8b6adf4..1becf501d 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/ThemePreview.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/display/_components/ThemePreview.tsx @@ -157,8 +157,6 @@ export function ThemePreview({ cookieBannerKey }: ThemePreviewProps) { -

{__("Preview")}

-
-

{__("CSS Snippet")}

diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx index 7227e04ec..9857f8521 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/settings/CookieBannerSettingsPage.tsx @@ -18,7 +18,8 @@ import { graphql } from "relay-runtime"; import type { CookieBannerSettingsPageQuery } from "#/__generated__/core/CookieBannerSettingsPageQuery.graphql"; import { BannerSettingsForm } from "../_components/BannerSettingsForm"; -import { CategoryList } from "../_components/CategoryList"; + +import { CodeSnippets } from "./_components/CodeSnippets"; export const cookieBannerSettingsPageQuery = graphql` query CookieBannerSettingsPageQuery($cookieBannerId: ID!) { @@ -26,7 +27,6 @@ export const cookieBannerSettingsPageQuery = graphql` __typename ... on CookieBanner { ...BannerSettingsForm_cookieBanner - ...CategoryList_cookieBanner } } } @@ -48,7 +48,7 @@ export default function CookieBannerSettingsPage({ return (
- +
); } diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/CodeSnippets.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/settings/_components/CodeSnippets.tsx similarity index 97% rename from apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/CodeSnippets.tsx rename to apps/console/src/pages/organizations/cookie-banners/configuration/settings/_components/CodeSnippets.tsx index 151925b28..5f85612bf 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/snippet/_components/CodeSnippets.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/settings/_components/CodeSnippets.tsx @@ -51,6 +51,7 @@ export function CodeSnippets() { return (
+

{__("JS snippet")}