rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix breadcrumb route nesting

Browse Source 
Signed-off-by: Émile Ré <nemile.re@gmail.com>
This commit is contained in:
Émile Ré
2025-03-14 11:02:40 +04:00
parent 2f63f680e8
commit 8e0456b77d
1 changed files with 112 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/console/src/layouts/ConsoleLayout.tsx
View File

@@ -24,11 +24,7 @@ import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/Con
import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
import { ConsoleLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPolicyOverviewQuery.graphql";
function BreadcrumbHome({ children }: { children: React.ReactNode }) {
const { organizationId } = useParams();
// If there's no organizationId, we're on the create organization page
if (!organizationId) {
function BreadcrumbHome() {
return (
<Breadcrumb>
<BreadcrumbList>
@@ -37,15 +33,15 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
function BreadCrumbOrganization() {
const { organizationId } = useParams();
const data = useLazyLoadQuery<ConsoleLayoutOrganizationQuery>(
graphql`
query ConsoleLayoutOrganizationQuery($organizationId: ID!) {
@@ -70,7 +66,7 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
{children}
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
@@ -370,9 +366,6 @@ function BreadcrumbUpdatePolicy() {
}
export default function ConsoleLayout() {
const { organizationId } = useParams();
const showBreadcrumb = !!organizationId;
return (
<SidebarProvider>
<AppSidebar />
@@ -381,11 +374,16 @@ export default function ConsoleLayout() {
<div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" />
<Suspense>
<BreadcrumbHome>
{showBreadcrumb && (
<Routes>
<Route path="organizations/:organizationsId">
<Route path="organizations">
<Route
path=":organizationsId"
element={
<Suspense>
<BreadCrumbOrganization />
</Suspense>
}
>
<Route
path="frameworks"
element={<BreadcrumbFrameworkList />}
@@ -429,10 +427,7 @@ export default function ConsoleLayout() {
</Suspense>
}
/>
<Route
path="create"
element={<BreadcrumbCreatePeople />}
/>
<Route path="create" element={<BreadcrumbCreatePeople />} />
</Route>
<Route path="vendors" element={<BreadcrumbVendorList />}>
<Route
@@ -458,16 +453,24 @@ export default function ConsoleLayout() {
element={<BreadcrumbUpdatePolicy />}
/>
</Route>
<Route path="create" element={<BreadcrumbCreatePolicy />} />
</Route>
</Route>
<Route path="*" element={<BreadcrumbHome />}>
<Route
path="create"
element={<BreadcrumbCreatePolicy />}
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
</Route>
</Routes>
)}
</BreadcrumbHome>
</Suspense>
</div>
</header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0">