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

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

@@ -24,27 +24,23 @@ import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/Con
import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql"; import { ConsoleLayoutOrganizationQuery } from "./__generated__/ConsoleLayoutOrganizationQuery.graphql";
import { ConsoleLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPolicyOverviewQuery.graphql"; import { ConsoleLayoutBreadcrumbPolicyOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbPolicyOverviewQuery.graphql";
function BreadcrumbHome({ children }: { children: React.ReactNode }) { function BreadcrumbHome() {
const { organizationId } = useParams(); return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<Outlet />
</BreadcrumbList>
</Breadcrumb>
);
}
// If there's no organizationId, we're on the create organization page function BreadCrumbOrganization() {
if (!organizationId) { const { organizationId } = useParams();
return (
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink asChild>
<Link to="/">Home</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
);
}
const data = useLazyLoadQuery<ConsoleLayoutOrganizationQuery>( const data = useLazyLoadQuery<ConsoleLayoutOrganizationQuery>(
graphql` graphql`
@@ -70,7 +66,7 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
</Link> </Link>
</BreadcrumbLink> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
{children} <Outlet />
</BreadcrumbList> </BreadcrumbList>
</Breadcrumb> </Breadcrumb>
); );
@@ -370,9 +366,6 @@ function BreadcrumbUpdatePolicy() {
} }
export default function ConsoleLayout() { export default function ConsoleLayout() {
const { organizationId } = useParams();
const showBreadcrumb = !!organizationId;
return ( return (
<SidebarProvider> <SidebarProvider>
<AppSidebar /> <AppSidebar />
@@ -381,93 +374,103 @@ export default function ConsoleLayout() {
<div className="flex items-center gap-2 px-4"> <div className="flex items-center gap-2 px-4">
<SidebarTrigger className="-ml-1" /> <SidebarTrigger className="-ml-1" />
<Separator orientation="vertical" className="mr-2 h-4" /> <Separator orientation="vertical" className="mr-2 h-4" />
<Suspense> <Routes>
<BreadcrumbHome> <Route path="organizations">
{showBreadcrumb && ( <Route
<Routes> path=":organizationsId"
<Route path="organizations/:organizationsId"> element={
<Suspense>
<BreadCrumbOrganization />
</Suspense>
}
>
<Route
path="frameworks"
element={<BreadcrumbFrameworkList />}
>
<Route
path=":frameworkId"
element={
<Suspense>
<BreadcrumbFrameworkOverview />
</Suspense>
}
>
<Route <Route
path="frameworks" path="controls/create"
element={<BreadcrumbFrameworkList />} element={<BreadcrumbCreateControl />}
> />
<Route <Route
path=":frameworkId" path="controls/:controlId"
element={ element={
<Suspense> <Suspense>
<BreadcrumbFrameworkOverview /> <BreadcrumbControlOverview />
</Suspense> </Suspense>
} }
> />
<Route <Route
path="controls/create" path="update"
element={<BreadcrumbCreateControl />} element={<BreadcrumbUpdateFramework />}
/> />
<Route
path="controls/:controlId"
element={
<Suspense>
<BreadcrumbControlOverview />
</Suspense>
}
/>
<Route
path="update"
element={<BreadcrumbUpdateFramework />}
/>
</Route>
<Route
path="create"
element={<BreadcrumbCreateFramework />}
/>
</Route>
<Route path="peoples" element={<BreadcrumbPeopleList />}>
<Route
path=":peopleId"
element={
<Suspense>
<BreadcrumbPeopleOverview />
</Suspense>
}
/>
<Route
path="create"
element={<BreadcrumbCreatePeople />}
/>
</Route>
<Route path="vendors" element={<BreadcrumbVendorList />}>
<Route
path=":vendorId"
element={
<Suspense>
<BreadcrumbVendorOverview />
</Suspense>
}
/>
</Route>
<Route path="policies" element={<BreadcrumbPolicyList />}>
<Route
path=":policyId"
element={
<Suspense>
<BreadcrumbPolicyOverview />
</Suspense>
}
>
<Route
path="update"
element={<BreadcrumbUpdatePolicy />}
/>
</Route>
<Route
path="create"
element={<BreadcrumbCreatePolicy />}
/>
</Route>
</Route> </Route>
</Routes> <Route
)} path="create"
</BreadcrumbHome> element={<BreadcrumbCreateFramework />}
</Suspense> />
</Route>
<Route path="peoples" element={<BreadcrumbPeopleList />}>
<Route
path=":peopleId"
element={
<Suspense>
<BreadcrumbPeopleOverview />
</Suspense>
}
/>
<Route path="create" element={<BreadcrumbCreatePeople />} />
</Route>
<Route path="vendors" element={<BreadcrumbVendorList />}>
<Route
path=":vendorId"
element={
<Suspense>
<BreadcrumbVendorOverview />
</Suspense>
}
/>
</Route>
<Route path="policies" element={<BreadcrumbPolicyList />}>
<Route
path=":policyId"
element={
<Suspense>
<BreadcrumbPolicyOverview />
</Suspense>
}
>
<Route
path="update"
element={<BreadcrumbUpdatePolicy />}
/>
</Route>
<Route path="create" element={<BreadcrumbCreatePolicy />} />
</Route>
</Route>
<Route path="*" element={<BreadcrumbHome />}>
<Route
path="create"
element={
<>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>Create Organization</BreadcrumbPage>
</BreadcrumbItem>
</>
}
/>
</Route>
</Route>
</Routes>
</div> </div>
</header> </header>
<div className="flex flex-1 flex-col gap-4 p-4 pt-0"> <div className="flex flex-1 flex-col gap-4 p-4 pt-0">