[PageContainer] Remove leading slash from patterns for PageContainer (#…

…4191)
mui · Oct 7, 2024 · 8154415 · 8154415
1 parent 329bb7e
commit 8154415
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/docs/data/toolpad/core/components/page-container/CustomPageContainer.js b/docs/data/toolpad/core/components/page-container/CustomPageContainer.js
@@ -13,7 +13,7 @@ const NAVIGATION = [
   {
     segment: 'inbox',
     title: 'Orders',
-    pattern: '/inbox/:id',
+    pattern: 'inbox/:id',
   },
 ];
 

diff --git a/docs/data/toolpad/core/components/page-container/CustomPageContainer.tsx b/docs/data/toolpad/core/components/page-container/CustomPageContainer.tsx
@@ -12,7 +12,7 @@ const NAVIGATION = [
   {
     segment: 'inbox',
     title: 'Orders',
-    pattern: '/inbox/:id',
+    pattern: 'inbox/:id',
   },
 ];
 

diff --git a/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx b/packages/toolpad-core/src/PageContainer/PageContainer.test.tsx
@@ -92,7 +92,7 @@ describe('PageContainer', () => {
       <AppProvider
         navigation={[
           { segment: '', title: 'Home' },
-          { segment: 'orders', title: 'Orders', pattern: '/orders/:id' },
+          { segment: 'orders', title: 'Orders', pattern: 'orders/:id' },
         ]}
         router={router}
       >
@@ -112,4 +112,32 @@ describe('PageContainer', () => {
 
     expect(screen.getByText('Orders', { ignore: 'nav *' }));
   });
+
+  test('renders nested dynamic correctly', async () => {
+    const router = {
+      pathname: '/users/invoices/123',
+      searchParams: new URLSearchParams(),
+      navigate: vi.fn(),
+    };
+    render(
+      <AppProvider
+        navigation={[
+          {
+            segment: 'users',
+            title: 'Users',
+            children: [{ segment: 'invoices', title: 'Invoices', pattern: 'invoices/:id' }],
+          },
+        ]}
+        router={router}
+      >
+        <PageContainer />
+      </AppProvider>,
+    );
+
+    const breadcrumbs = screen.getByRole('navigation', { name: 'breadcrumb' });
+
+    const homeLink = within(breadcrumbs).getByRole('link', { name: 'Users' });
+    expect(homeLink.getAttribute('href')).toBe('/users');
+    expect(within(breadcrumbs).getByText('Invoices')).toBeTruthy();
+  });
 });
diff --git a/packages/toolpad-core/src/shared/navigation.tsx b/packages/toolpad-core/src/shared/navigation.tsx
@@ -112,7 +112,8 @@ function buildItemLookup(navigation: Navigation) {
       }
       map.set(path, item);
       if (item.pattern) {
-        map.set(pathToRegexp(item.pattern), item);
+        const basePath = item.segment ? path.slice(0, -item.segment.length) : path;
+        map.set(pathToRegexp(basePath + item.pattern), item);
       }
       if (item.children) {
         for (const child of item.children) {