From aa9c3db8441ccaa703d8901e591dbd3f297ee12c Mon Sep 17 00:00:00 2001
From: gearnode <bryan@frimin.fr>
Date: Thu, 20 Feb 2025 09:50:24 +0100
Subject: [PATCH] Fix react router warning

Signed-off-by: gearnode <bryan@frimin.fr>
---
 apps/console/src/App.tsx                   | 20 ++++++++++----------
 apps/console/src/layouts/ConsoleLayout.tsx | 16 +++++++++-------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/apps/console/src/App.tsx b/apps/console/src/App.tsx
index 35c52cf95..a2055396a 100644
--- a/apps/console/src/App.tsx
+++ b/apps/console/src/App.tsx
@@ -45,7 +45,7 @@ function App() {
               <BrowserRouter>
                 <Routes>
                   <Route
-                    path="/"
+                    path="/*"
                     element={
                       <ErrorBoundaryWithLocation>
                         <ConsoleLayout />
@@ -63,7 +63,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/peoples"
+                      path="peoples"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -73,7 +73,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/peoples/create"
+                      path="peoples/create"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -83,7 +83,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/peoples/:peopleId"
+                      path="peoples/:peopleId"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -93,7 +93,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/vendors"
+                      path="vendors"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -103,7 +103,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/frameworks"
+                      path="frameworks"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -113,7 +113,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/frameworks/:frameworkId"
+                      path="frameworks/:frameworkId"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -123,7 +123,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/frameworks/:frameworkId/controls/:controlId"
+                      path="frameworks/:frameworkId/controls/:controlId"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -133,7 +133,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/vendors/:vendorId"
+                      path="vendors/:vendorId"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
@@ -143,7 +143,7 @@ function App() {
                       }
                     />
                     <Route
-                      path="/settings"
+                      path="settings"
                       element={
                         <Suspense>
                           <ErrorBoundaryWithLocation>
diff --git a/apps/console/src/layouts/ConsoleLayout.tsx b/apps/console/src/layouts/ConsoleLayout.tsx
index e0ed36b1b..96e8e1fd4 100644
--- a/apps/console/src/layouts/ConsoleLayout.tsx
+++ b/apps/console/src/layouts/ConsoleLayout.tsx
@@ -30,7 +30,7 @@ import { ConsoleLayoutBreadcrumbPeopleOverviewQuery } from "./__generated__/Cons
 import { ConsoleLayoutBreadcrumbVendorOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbVendorOverviewQuery.graphql";
 import { ConsoleLayoutBreadcrumbControlOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbControlOverviewQuery.graphql";
 
-function BreadcrumbHome() {
+function BreadcrumbHome({ children }: { children: React.ReactNode }) {
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -39,7 +39,7 @@ function BreadcrumbHome() {
             <Link to="/">Home</Link>
           </BreadcrumbLink>
         </BreadcrumbItem>
-        <Outlet />
+        {children}
       </BreadcrumbList>
     </Breadcrumb>
   );
@@ -238,8 +238,8 @@ 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" />
-            <Routes>
-              <Route path="/" element={<BreadcrumbHome />}>
+            <BreadcrumbHome>
+              <Routes>
                 <Route path="/frameworks" element={<BreadcrumbFrameworkList />}>
                   <Route
                     path="/frameworks/:frameworkId"
@@ -262,12 +262,14 @@ export default function ConsoleLayout() {
                     element={<BreadcrumbVendorOverview />}
                   />
                 </Route>
-              </Route>
-            </Routes>
+              </Routes>
+            </BreadcrumbHome>
           </div>
         </header>
         <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
-          <Outlet />
+          <div className="w-full max-w-[1000px] px-6">
+            <Outlet />
+          </div>
           <Toaster />
         </div>
       </SidebarInset>