Fix breadcrumb route nesting

Signed-off-by: Émile Ré <nemile.re@gmail.com>

apps/console/src/layouts/ConsoleLayout.tsx

@@ -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 }) {
+function BreadcrumbHome() {
-  const { organizationId } = useParams();
-
-  // If there's no organizationId, we're on the create organization page
-  if (!organizationId) {
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -37,14 +33,14 @@ function BreadcrumbHome({ children }: { children: React.ReactNode }) {
             <Link to="/">Home</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
-          <BreadcrumbSeparator />
+        <Outlet />
-          <BreadcrumbItem>
-            <BreadcrumbPage>Create Organization</BreadcrumbPage>
-          </BreadcrumbItem>
       </BreadcrumbList>
     </Breadcrumb>
   );
-  }
+}
+
+function BreadCrumbOrganization() {
+  const { organizationId } = useParams();
 
   const data = useLazyLoadQuery<ConsoleLayoutOrganizationQuery>(
     graphql`
@@ -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
+                    <Route path="create" element={<BreadcrumbCreatePeople />} />
-                          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">