Replace back link with breadcrumb on NewCookieBannerPage and remove CookieBannersLayout
Move the PageHeader into CookieBannersOverviewPage directly since the layout had only one child route left after extracting the "new" route as a sibling, making the wrapper unnecessary. Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
@@ -1,37 +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 { usePageTitle } from "@probo/hooks";
|
|
||||||
import { useTranslate } from "@probo/i18n";
|
|
||||||
import { PageHeader } from "@probo/ui";
|
|
||||||
import { Outlet } from "react-router";
|
|
||||||
|
|
||||||
export default function CookieBannerLayout() {
|
|
||||||
const { __ } = useTranslate();
|
|
||||||
|
|
||||||
usePageTitle(__("Cookie Banners"));
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
<PageHeader
|
|
||||||
title={__("Cookie Banners")}
|
|
||||||
description={__(
|
|
||||||
"Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -16,10 +16,10 @@ import { formatError, type GraphQLError } from "@probo/helpers";
|
|||||||
import { usePageTitle } from "@probo/hooks";
|
import { usePageTitle } from "@probo/hooks";
|
||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
import {
|
import {
|
||||||
|
Breadcrumb,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Field,
|
Field,
|
||||||
IconChevronLeft,
|
|
||||||
Input,
|
Input,
|
||||||
Label,
|
Label,
|
||||||
Option,
|
Option,
|
||||||
@@ -29,7 +29,7 @@ import {
|
|||||||
} from "@probo/ui";
|
} from "@probo/ui";
|
||||||
import { type FormEvent, useState } from "react";
|
import { type FormEvent, useState } from "react";
|
||||||
import { useMutation } from "react-relay";
|
import { useMutation } from "react-relay";
|
||||||
import { Link, useNavigate } from "react-router";
|
import { useNavigate } from "react-router";
|
||||||
import { graphql } from "relay-runtime";
|
import { graphql } from "relay-runtime";
|
||||||
|
|
||||||
import type { NewCookieBannerPageMutation } from "#/__generated__/core/NewCookieBannerPageMutation.graphql";
|
import type { NewCookieBannerPageMutation } from "#/__generated__/core/NewCookieBannerPageMutation.graphql";
|
||||||
@@ -99,13 +99,17 @@ export default function NewCookieBannerPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
<Link
|
<Breadcrumb
|
||||||
to={`/organizations/${organizationId}/cookie-banners`}
|
items={[
|
||||||
className="mb-4 inline-flex gap-2 items-center"
|
{
|
||||||
>
|
label: __("Cookie Banners"),
|
||||||
<IconChevronLeft size={16} />
|
to: `/organizations/${organizationId}/cookie-banners`,
|
||||||
{__("Back")}
|
},
|
||||||
</Link>
|
{
|
||||||
|
label: __("New"),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
<PageHeader
|
<PageHeader
|
||||||
title={__("Create Cookie Banner")}
|
title={__("Create Cookie Banner")}
|
||||||
description={__(
|
description={__(
|
||||||
|
|||||||
@@ -12,8 +12,9 @@
|
|||||||
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
// OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||||
// PERFORMANCE OF THIS SOFTWARE.
|
// PERFORMANCE OF THIS SOFTWARE.
|
||||||
|
|
||||||
|
import { usePageTitle } from "@probo/hooks";
|
||||||
import { useTranslate } from "@probo/i18n";
|
import { useTranslate } from "@probo/i18n";
|
||||||
import { Badge, Button, Card } from "@probo/ui";
|
import { Badge, Button, Card, PageHeader } from "@probo/ui";
|
||||||
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
|
import { type PreloadedQuery, usePreloadedQuery } from "react-relay";
|
||||||
import { Link } from "react-router";
|
import { Link } from "react-router";
|
||||||
import { graphql } from "relay-runtime";
|
import { graphql } from "relay-runtime";
|
||||||
@@ -52,6 +53,8 @@ export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPag
|
|||||||
const { __ } = useTranslate();
|
const { __ } = useTranslate();
|
||||||
const organizationId = useOrganizationId();
|
const organizationId = useOrganizationId();
|
||||||
|
|
||||||
|
usePageTitle(__("Cookie Banners"));
|
||||||
|
|
||||||
const { organization } = usePreloadedQuery(cookieBannersOverviewPageQuery, queryRef);
|
const { organization } = usePreloadedQuery(cookieBannersOverviewPageQuery, queryRef);
|
||||||
if (organization.__typename !== "Organization") {
|
if (organization.__typename !== "Organization") {
|
||||||
throw new Error("invalid type for node");
|
throw new Error("invalid type for node");
|
||||||
@@ -62,13 +65,29 @@ export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPag
|
|||||||
|
|
||||||
if (banners.length === 0) {
|
if (banners.length === 0) {
|
||||||
return (
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<PageHeader
|
||||||
|
title={__("Cookie Banners")}
|
||||||
|
description={__(
|
||||||
|
"Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
<CookieBannerEmptyState>
|
<CookieBannerEmptyState>
|
||||||
<Button to={newBannerHref}>{__("Create your first banner")}</Button>
|
<Button to={newBannerHref}>{__("Create your first banner")}</Button>
|
||||||
</CookieBannerEmptyState>
|
</CookieBannerEmptyState>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<PageHeader
|
||||||
|
title={__("Cookie Banners")}
|
||||||
|
description={__(
|
||||||
|
"Manage cookie consent banners for your websites. Configure categories, cookies, and install the SDK.",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<Button to={newBannerHref}>{__("Create Banner")}</Button>
|
<Button to={newBannerHref}>{__("Create Banner")}</Button>
|
||||||
@@ -97,5 +116,6 @@ export function CookieBannersOverviewPage({ queryRef }: CookieBannersOverviewPag
|
|||||||
))}
|
))}
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -24,19 +24,13 @@ export const cookieBannerRoutes = [
|
|||||||
{
|
{
|
||||||
path: "cookie-banners",
|
path: "cookie-banners",
|
||||||
Fallback: PageSkeleton,
|
Fallback: PageSkeleton,
|
||||||
Component: lazy(() => import("#/pages/organizations/cookie-banners/CookieBannersLayout")),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
index: true,
|
|
||||||
Fallback: LinkCardSkeleton,
|
|
||||||
Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannersOverviewPageLoader")),
|
Component: lazy(() => import("#/pages/organizations/cookie-banners/overview/CookieBannersOverviewPageLoader")),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "new",
|
path: "cookie-banners/new",
|
||||||
|
Fallback: PageSkeleton,
|
||||||
Component: lazy(() => import("#/pages/organizations/cookie-banners/NewCookieBannerPage")),
|
Component: lazy(() => import("#/pages/organizations/cookie-banners/NewCookieBannerPage")),
|
||||||
},
|
},
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: "cookie-banners/:cookieBannerId",
|
path: "cookie-banners/:cookieBannerId",
|
||||||
Fallback: PageSkeleton,
|
Fallback: PageSkeleton,
|
||||||
|
|||||||
Reference in New Issue
Block a user