Open respective page in editor from preview

mui · Mar 29, 2023 · b811615 · b811615
1 parent 37c008c
commit b811615
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/packages/toolpad-app/src/routes.ts b/packages/toolpad-app/src/routes.ts
@@ -2,3 +2,5 @@ export const APP_PAGE_ROUTE = '/app/pages/:nodeId';
 export const APP_API_ROUTE = '/app/apis/:nodeId';
 export const APP_CODE_COMPONENT_ROUTE = '/app/codeComponents/:nodeId';
 export const APP_CONNECTION_ROUTE = '/app/connections/:nodeId';
+
+export const PREVIEW_PAGE_ROUTE = '/preview/pages/:nodeId';
diff --git a/packages/toolpad-app/src/runtime/AppNavigation.tsx b/packages/toolpad-app/src/runtime/AppNavigation.tsx
@@ -12,8 +12,6 @@ import {
 import { useNavigate, useLocation, useHref } from 'react-router-dom';
 import * as appDom from '../appDom';
 
-const NAV_LIST_SUBHEADER_ID = 'nav-list-subheader';
-
 const DRAWER_WIDTH = 250; // px
 
 interface AppNavigationProps {
@@ -35,6 +33,8 @@ export default function AppNavigation({ pages, isPreview = false }: AppNavigatio
 
  const activePagePath = location.pathname.replace(href, '');
 
+ const navListSubheaderId = React.useId();
+
  return (
  <Drawer
  variant="permanent"
@@ -51,11 +51,11 @@ export default function AppNavigation({ pages, isPreview = false }: AppNavigatio
  <List
  component="nav"
  subheader={
- <ListSubheader id={NAV_LIST_SUBHEADER_ID} sx={{ px: 4 }}>
+ <ListSubheader id={navListSubheaderId} sx={{ px: 4 }}>
  Pages
  </ListSubheader>
  }
- aria-labelledby={NAV_LIST_SUBHEADER_ID}
+ aria-labelledby={navListSubheaderId}
  >
  {pages.map((page) => (
  <ListItem key={page.id} onClick={handlePageClick(page)} disablePadding>

diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -39,6 +39,8 @@ import {
  Navigate,
  Location as RouterLocation,
  useNavigate,
+ useHref,
+ matchPath,
 } from 'react-router-dom';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import {
@@ -81,6 +83,7 @@ import Header from '../toolpad/ToolpadShell/Header';
 import { ThemeProvider } from '../ThemeContext';
 import { BridgeContext } from '../canvas/BridgeContext';
 import AppNavigation from './AppNavigation';
+import { PREVIEW_PAGE_ROUTE } from '../routes';
 
 const ReactQueryDevtoolsProduction = React.lazy(() =>
  import('@tanstack/react-query-devtools/build/lib/index.prod.js').then((d) => ({
@@ -1143,9 +1146,12 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp
  const root = appDom.getApp(dom);
  const { pages = [] } = appDom.getChildNodes(dom, root);
 
- const { search } = useLocation();
+ const location = useLocation();
+ const { pathname, search } = location;
  const urlParams = React.useMemo(() => new URLSearchParams(search), [search]);
 
+ const pageMatch = matchPath(PREVIEW_PAGE_ROUTE, `/preview${pathname}`);
+
  const hasShell = hasShellProp && urlParams.get('toolpad-display') !== 'standalone';
 
  const isPreview = version === 'preview';
@@ -1166,7 +1172,7 @@ function ToolpadAppLayout({ dom, version, hasShell: hasShellProp = true }: Toolp
  endIcon={<EditIcon />}
  color="primary"
  component="a"
- href={`/_toolpad/app`}
+ href={`/_toolpad/app/pages/${pageMatch?.params.nodeId}`}
  >
  Edit
  </Button>