Add page name as an alias for routing in the runtime (#1925)

mui · Apr 26, 2023 · f0646de · f0646de
1 parent cde3393
commit f0646de
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 139 deletions.
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -1106,18 +1106,27 @@ function RenderedPages({ pages, defaultPage }: RenderedPagesProps) {
  return (
  <Routes>
  {pages.map((page) => (
- <Route
- key={page.id}
- path={`/pages/${page.id}`}
- element={
- <RenderedPage
- nodeId={page.id}
- // Make sure the page itself mounts when the route changes. This make sure all pageBindings are reinitialized
- // during first render. Fixes https://github.com/mui/mui-toolpad/issues/1050
- key={page.id}
- />
- }
- />
+ <React.Fragment key={page.id}>
+ <Route
+ path={`/pages/${page.id}`}
+ element={
+ <RenderedPage
+ nodeId={page.id}
+ // Make sure the page itself mounts when the route changes. This make sure all pageBindings are reinitialized
+ // during first render. Fixes https://github.com/mui/mui-toolpad/issues/1050
+ key={page.id}
+ />
+ }
+ />
+ </React.Fragment>
+ ))}
+ {pages.map((page) => (
+ <React.Fragment key={page.id}>
+ <Route
+ path={`/pages/${page.name}`}
+ element={<Navigate to={`/pages/${page.id}`} replace />}
+ />
+ </React.Fragment>
  ))}
  <Route path="/pages" element={defaultPageNavigation} />
  <Route path="/" element={defaultPageNavigation} />
@@ -1175,11 +1184,9 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp
  const pageId = pageMatch?.params.nodeId;
 
  const defaultPage = pages[0];
- const page = pageId
- ? (appDom.getNode<'page'>(dom, pageId as NodeId) as appDom.PageNode)
- : defaultPage;
+ const page = pageId ? appDom.getMaybeNode(dom, pageId as NodeId, 'page') : defaultPage;
 
- const pageDisplay = urlParams.get('toolpad-display') || page.attributes.display?.value;
+ const pageDisplay = urlParams.get('toolpad-display') || page?.attributes.display?.value;
 
  const hasShell = hasShellProp && pageDisplay !== 'standalone';
 

diff --git a/test/models/ToolpadHome.ts b/test/models/ToolpadHome.ts
diff --git a/test/models/ToolpadRuntime.ts b/test/models/ToolpadRuntime.ts
@@ -13,10 +13,7 @@ export class ToolpadRuntime {
  }
 
  async gotoPage(pageName: string) {
- await this.goto();
-
- const navLocator = this.page.locator('nav');
- await navLocator.getByRole('button', { name: pageName }).click();
+ await gotoIfNotCurrent(this.page, `/preview/pages/${pageName}`);
  }
 
  async gotoPageById(appId: string, pageId: string) {